Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

Off-Canvas Sidebars

Add off-canvas sidebars containing widgets, menus or other content using the Slidebars jQuery plugin.

This plugin will add various options to implement off-canvas sidebars in your WordPress theme using the Slidebars jQuery plugin.

Overview / Features

  • Add off-canvas sidebars to the left, right, top and bottom of your website
  • Use sidebar areas (widget-ready areas), menu locations or custom hooks to place content into the off-canvas sidebars
  • You can add control buttons with a widget, a menu item or with custom code
  • Various customisation options and settings available in the Appearances menu

Compatibility (IMPORTANT!)

The structure of your theme is of great importance for this plugin. Please read the installation guide carefully!!

This plugin should work with most themes and plugins although I can't be sure for all use-cases. At this point it's still a 0.x version... If the plugin does not work for your theme, please let me know through the support and add a plugins and themes list and I will take a look!

It's not working! / I found a bug!

Please let me know through the support and add a plugins and themes list! :)


  • Slidebars jQuery plugin by Adam, thank you for this great plugin!
Author Jory Hogeveen
Contributors keraweb
Tags App, genesis, jquery, menus, mobile, off-canvas, responsive, sidebars, slidebars, tablet, widgets
  1. off-canvas-sidebars screenshot 1

    Settings page

  2. off-canvas-sidebars screenshot 2

    Sidebars settings page (sidebars closed)

  3. off-canvas-sidebars screenshot 3

    Sidebars settings page (sidebar opened)

  4. off-canvas-sidebars screenshot 4

    Control Widget

  5. off-canvas-sidebars screenshot 5

    Menu item

  6. off-canvas-sidebars screenshot 6

    Sidebar left (Push effect) -> image from Slidebars website

  7. off-canvas-sidebars screenshot 7

    Sidebar left (Overlay effect) -> image from Slidebars website

  8. off-canvas-sidebars screenshot 8

    Sidebar top (Push effect) -> image from Slidebars website

Installation of this plugin works like any other plugin out there. Either:

  1. Upload the zip file to the '/wp-content/plugins/' directory
  2. Activate the plugin through the 'Plugins' menu in WordPress

Or search for "Off-Canvas Sidebars" via your plugins menu.

Theme Setup

Themes based on the Genesis Framework are supported by default! No changes needed.

Please note that it is possible that there are some Genesis themes that can not be supported out-of-the-box due to their structure.

There are more themes with similar implementations like Genesis to insert code before and after the website HTML through actions hooks. These theme can most likely be supported without any changes. See a full list here with currently known themes

For other themes there are two options:

  1. Simple theme setup
  2. Custom theme setup

1: Simple theme setup

First of all, I strongly advice to create a child theme if you didn't already! Click here for more information.

Add this code directly after the <body> tag. This is probably located in the header.php or index.php theme file.

<?php do_action('website_before'); ?>

Add this code directly after the site content, before the wp_footer() function. This is probably located in the footer.php or index.php theme file.

<?php do_action('website_after'); ?>

Important: This code needs to be a direct child of the <body> tag!

The final output of your theme should be similar to this:

        ** HEADER CONTENT **
        <?php do_action('website_before'); ?>
        ** WEBSITE CONTENT **
        <?php do_action('website_after'); ?>
        <?php wp_footer(); ?>

2: Custom theme setup

  • Fix: Settings page checkbox bug when saving


  • Feature: Allow changing this plugin capability to show the settings page
  • Fix: Update fixed element compat for the new Slidebars version (still experimental, Slidebars still doesn't fully support fixed elements within the site container)
  • Fix: Don't echo empty sidebar CSS selectors if no styles are set
  • UI: Set .ocs-button to cursor: pointer; by default
  • Update textdomain hook


  • Feature: Allow sidebars to overwrite some general settings
  • Feature: Option to set padding to sidebars
  • Feature: Option to choose other content types than only a WP sidebar for an off-canvas sidebar
  • Feature: Option to set your own CSS prefix (some classes are fixes to ocs and can't be changed, the prefix ocs is also the default prefix for new installations)
  • Feature: Added various actions, filters and JS hooks - Click here for info
  • OCS API functions to output off canvas sidebars in your theme instead of using this plugin frontend functions - Click here for info
  • Fix: Sidebar ID validation wasn't correct

Detailed info: PR on GitHub


  • Feature: Option to set the animation speed for sidebars
  • Feature: Option to use the FastClick library - Click here for info
  • Fix: Disabling sidebars on global settings page didn't work


  • Fix: Add touch events for iOS mobile device compatibility
  • Added some actions for front-end (see Other Notes)

  • Fix: Global variable bug
  • UI: Improve settings page


  • Update Slidebars plugin to v2.0.2: click here for info
  • Feature: An unlimited amount of off-canvas sidebars (No longer just one left, one right)
  • Feature: 2 new locations (top and bottom)
  • Feature: 2 new effects (reveal and shift)
  • UI: Improved settings pages
  • I18n: Translations are now managed at
  • Screenshots updated
  • Tested with WordPress 4.6


  • Feature: First experiment for compatibility with fixed elements within the site container with the use of transform: translateZ (needed for -webkit- and -moz- only). See problem here
  • Improvement: Usage of a single instance of the class


  • Feature: Added the option to change the website_before and website_after hook names


Created from nothingness just to be one of the cool kids. Yay!

Other Notes

You can find me here:

Actions | Filters | API


  • Slidebars jQuery plugin by Adam, thank you for this great plugin!


Please let me know through the support page!


Requires WordPress version: 3.8 or higher

Compatible up to: 4.7.2

Last Updated 07 Dec 2016

Date Added: 26 Feb 2016

Plugin Homepage


5 stars
4 ratings


Not Enough Data

Works: 0
Broken: 0