NAV Navbar
Logo Wecodepixels logo 80px

Getting Started

Installation

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:

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

Configuration

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:

Theia Sticky Sidebar admin page

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

Theia Sticky Sidebar admin page

  1. 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.

Theia Sticky Sidebar admin page

  1. 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").

Theia Sticky Sidebar admin page

  1. 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.

Theia Sticky Sidebar admin page

  1. Open the plugin's settings page -> General tab from the administration panel and click on the 'Add another sidebar' button.

Theia Sticky Sidebar admin page

  1. Finally enter the "Sidebar CSS selector" and the "Container CSS selector". In this case, we have "#secondary" and "#main".

Theia Sticky Sidebar admin page

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.

Multiple Sticky Sidebars

You can have multiple sticky sidebars in your website, either on different pages or on the same page (usually in different containers). This functionality can be implemented by using the 'Add another sidebar' button and following the same steps described in the Configuration section.

Theia Sticky Sidebar admin page

Advanced Usage

<div class="wrapper">
  <div class="content">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
  <div class="sidebar">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
</div>

In order for Theia Sticky Sidebar to work, your website's HTML structure should be similar to the following:

Note that the inner "theiaStickySidebar" divs are optional, but highly recommended. If you know some HTML basics you can edit your theme files and add them yourself (note that we strongly recommend doing this inside a child theme). Otherwise, the JavaScript plugin will automatically create them for you, but this can be problematic if you are using ads or iframes, since they will be moved around in the DOM and as a result will get reloaded.

Themes that work out-of-the-box

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