Theia Sticky Sidebar

Theia Sticky Sidebar by WeCodePixels

Version: 1.2.2
Updated: 2015-04-18

Open a Support Ticket


Quick Start Guide - top

This small guide will help you get your new plugin up and running in just a few minutes.

First of all, you need to download the plugin file and unzip it (if you're reading this, you've probably done so already). Now you need to do one of the following:

    1. In the WordPress administration panel, open the "Plugins -> Add new -> Upload" page.
    2. Select and upload the "theia-sticky-sidebar.zip" file.
    1. Unzip the "theia-sticky-sidebar.zip" archive into your WordPress plugins folder (located at "/wp-content/plugins/").
    2. Open your browser and go to your WordPress admin panel.
    3. Open the "Plugins -> Installed plugins" page and activate the "Theia Sticky Sidebar" plugin.

For customizing the plugin, open the "Settings -> Theia Sticky Sidebar" page.


Configuration - top

After installing and activating the plugin, you should open your homepage and check if the plugin works out-of-the-box. Just scroll down and see if the sidebar remains permanently visible. If it doesn't, you should follow these next steps.

What we need to do is tell the plugin exactly what HTML element represents the sidebar. For that we're going to use Google Chrome, which is available on all major platforms (Windows, Mac OS and Linux). We're going to use the default WordPress Twenty Twelve theme as an example.

1. First, open your homepage in Google Chrome. It should look something like this:

2. Now locate the sidebar and right-click on it. A menu should pop-up. Select "Inspect Element".

3. The Developer Tools should now be displayed on the bottom, and the element you've right-clicked on should be selected. In this case, we've selected the sidebar's "Meta" heading.

4. In the Developer Tools from the bottom of the window, search upwards for the sidebar element by moving your mouse. The elements you're hovering over will be highlighted. Search for the first parent element that highlights the entire sidebar. It usually has the ID or class name of "sidebar", "sidebar-right", "secondary", etc..

In this example, the sidebar has the ID of "secondary". To identify it, we can use the "#secondary" selector (notice the "#" in front of it, meaning this is an "ID"). If this sidebar didn't have an ID, we could have used it's "widget-area" class to identify it, like so: ".widget-area" (notice the "." in front of it, meaning this is a "class").

5. Now we must do the same thing to locate the container of the page. This is the first parent element that contains both the sidebar and the actual content of the site. It usually has the ID or class name of "main", "main-container", etc.. In this example, we're going to use the "#main" selector to identify it.

6. Finally, we're going to open the plugin's settings page from the administration panel. Enter the "Sidebar CSS selector" and the "Container CSS selector". In this case, we have "#secondary" and "#main".

Note that if you have any issues, you can send me an email with your website address and I'll find these selectors for you.


Themes that work out-of-the-box - top

A number of themes have already been tested and work out-of-the-box without the need for further configuration. Here is a partial list:

And many more that have been added since the writing of this list.


Changelog - top


WeCodePixels

Go To Table of Contents