Using Slidebars to Slide In and Out Content in A Genesis Theme

Having some content slide out from the side of a page is a great solution for off canvas content, it can solve crowded page issues especially at smaller sizes as it can slide in content that takes prominence, do what it needs to do for the user and then slide out again,  Slidebars is a jQuery plugin solution that does exactly that – here is a tutorial on how you can integrate this into your WordPress Genesis theme, the theme used here is the Sample Theme but would work the same in other themes.

Set Up Your Slidebars CSS and JS Scripts

First up is to create a Slidebars init script that will be needed to work the slidebars. Create a slidebar-init.js and file it in your js theme folder.

jQuery("document").ready(function($) {
$.slidebars();
});
view raw slidebar-init.js hosted with ❤ by GitHub

Then from the 0.10.3  Slidebar download, find slidebars.min,js and slidebars.min.css and file those in your respective js and css directories.

Make sure you download the older Slidebar version for this tutorial, the new one is completely re-written.

<?php
//Script-tac-ulous -> All the Slidebar JS and CSS files
function themeprefix_scripts_styles_slidebars() {
wp_enqueue_script ( 'slidebarsjs' , get_stylesheet_directory_uri() . '/js/slidebars.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script ( 'slidebarsinit' , get_stylesheet_directory_uri() . '/js/slidebar-init.js', array( 'slidebarsjs' ), '1.0.0', true );
wp_enqueue_style ( 'slidebarscss' , get_stylesheet_directory_uri() . '/css/slidebars.min.css', '', '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_styles_slidebars' );
view raw enqueue-script.php hosted with ❤ by GitHub

These are then enqueued to load in the theme with the above snippet.

Add a Slidebar ID to the Page Container

Slidebars needs to have the page content’s container to have a specific ID, you can do this by using the Genesis filter genesis_attr on the .site-container

<?php
//Add in the required ID attribute for the page
function themeprefix_site_container_id( $attributes ) {
$attributes['id'] = 'sb-site';
return $attributes;
}
add_filter( 'genesis_attr_site-container', 'themeprefix_site_container_id' );
view raw attributes.php hosted with ❤ by GitHub

So in the above the snippet will now add the id of sb-site to the site-container.

The requirement here for slidebars to work is that the pages content is captured in a container with that id of sb-site – but the slide content must be outside of that container.

Set Up Your Slidebar Widget Panels

<?php
//Register the 2 widgets used for the right and left slideout bars
function slidebars_widgets_init() {
register_sidebar( array(
'name' => __( 'Right Slidebar', 'theme-slug' ),
'id' => 'slidebar-right',
'description' => __( 'Right SlideBar', 'theme-slug' ),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => __( 'Left Slidebar', 'theme-slug' ),
'id' => 'slidebar-left',
'description' => __( 'Left SlideBar', 'theme-slug' ),
'before_widget' => '<div class="">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'slidebars_widgets_init' );
//Position the 2 widgets outside of the normal layout
function slidebars_page_position() {
echo '<div class="sb-slidebar sb-right">';
dynamic_sidebar( 'slidebar-right' );
echo '</div>';
echo '<div class="sb-slidebar sb-left">';
dynamic_sidebar( 'slidebar-left' );
echo '</div>';
}
add_action('genesis_after','slidebars_page_position');
view raw widgets.php hosted with ❤ by GitHub

In the above code the first function registers the 2 slidebars one for the left and one for the right, the second function positions them using the genesis_after hook, this ensures that they are outside of the .site-container (which is required).

Note that in the 2nd function a specific CSS class is given to the slides,  a generic .slide-bar and a unique .slidebar-right and .slidebar-left 

Populating SlideBar Widget Content

right-left widgets slidebars

Now with the Slidebar Widgets ready – just pile in the content.

Toggling the SlideBars

toggle-slidebars

To toggle these slidebars in  and out you just need a simple link HTML mark up

<a href="#" class="sb-toggle-left">Toggle Left Slider</a>
<a href="#" class="sb-toggle-right">Toggle Right Slider</a>

toggle-slidebars-genesis

So here would be a rudimentary link added in via the Header Right widget, so this will toggle both the left and right sliders – all that needs to be done is the CSS work.

Toggle the Slides from a Fixed Bar

A lot of sites use this type of off canvas content from a fixed bar at the top of the page especially at smaller viewports. You can add in a pre-header widget and position it before the main .site-container, using the genesis_before hook.

//Add in new Widget areas
function themeprefix_hello_bar() {
genesis_register_sidebar( array(
'id' => 'preheader',
'name' => __( 'preHeader', 'themename' ),
'description' => __( 'This is the preheader', 'themename' ),
) );
}
add_action( 'widgets_init', 'themeprefix_hello_bar' );
//Position the preHeader Area
function themeprefix_hello_bar_position() {
echo '<div class="preheadercontainer hello-bar "><div class="wrap">';
genesis_widget_area ('preheader');
echo '</div></div>';
}
add_action('genesis_before','themeprefix_hello_bar_position');
view raw hello-bar.php hosted with ❤ by GitHub

toggle-slidebars-menu

Add your links in the widget areas in the backend

Add in some CSS

/* # SliderBar Menu
---------------------------------------------------------------------------------------------------- */
.hello-bar{
background-color: #333;
box-shadow: 0 0 5px #ddd;
display: block;
font-size: 15px;
font-weight: 700;
padding: 10px 10px;
position: fixed;
text-align: left;
width: 100%;
z-index: 9999;
color: #fff;
}
.hello-bar a:hover {
color: #fff;
}
.sb-toggle-right {
float: right;
}
body .sb-slidebar {
padding: 80px 20px;
color: #fff;
}
view raw hello-bar.css hosted with ❤ by GitHub

To restrict showing the fixed menu bar until the viewport is smaller you can just add this CSS to a media query.

 

toggle-slidebars-menu-small

 

menu-bar-slide-toggle-genesis

Demo Site here.

This should be enough to get your project underway – further CSS would be needed for the slideout panels and the fixed bar and some refining, like using icons for the toggle.

 

6 Comments

  1. hat on May 31, 2017 at 3:14 am

    I could not do it like yours. I tried for three hours. Please give me a complete code of yours. thank you

  2. Sean Vandenberg on January 5, 2016 at 4:40 am

    Thx, Neil. Super great tutorial – as usual.

    I finally decided on slidebars instead of sidr… Was also looking into angular pageslide – but will stick with jquery.

    Much appreciation!

  3. Ruben DaSilva on August 22, 2015 at 10:53 am

    Thanks for the coding.
    It looks good, but would look better if the main content was responsive instead of being cut off when the side bars slide out.

  4. Sheryl C on June 17, 2015 at 3:05 pm

    Very Cool!!

  5. Dave Fogel on June 17, 2015 at 2:57 pm

    Very Nice. Would you use this same technique for making an off site navigation bar?

    • Neil Gee on June 17, 2015 at 11:50 pm

      Hi Dave, yes you would, I would say that is one of the main usages, but as you can see, you can use any content.

Leave a Comment





%d bloggers like this: