Setting up a special blog sidebar in a Roots/Sage WordPress template

If you want to display a special blog menu on the blog posts but a normal menu on the rest of the site then this handy tip will show you how.

The Sage starter template is a pretty solid product. It’s just recently changed its name from Roots to Sage so you might know it by that. Either way this technique will work just fine for both Roots v7 templates and Sage v8.

There are just two files that we will be editing to achieve this.

If you look in your theme folder in ./lib/init.php and look for widget_init() (its called roots_widget_init() in v7).

This is where you registered the widget areas. You can add as many as you like here (for example if you want to make your footer editable) but for this purpose we just need to add a blog menu widget area:

register_sidebar(array(
  'name'          => __('Blog Sidebar', 'sage'),
  'id'            => 'sidebar-blog',
  'before_widget' => '<section class="widget %1$s %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h3>',
  'after_title'   => '</h3>',
));

See that bit that says ‘sage’? If you’re still running v7 then you will need to swap that out for ‘roots’.

This will make a new blog widget area appear in the WordPress admin panel. The next step is edit the sidebar display logic. Open up ./templates/sidebar.php. If you want the just the blog sidebar to appear on its own on the blog pages then use this code:

if( is_single() || is_post_type_archive() || is_home() || is_author() || is_category() || is_date())
{
    dynamic_sidebar('sidebar-blog');
} 
else 
{
    dynamic_sidebar('sidebar-primary');
}

If you want the original sidebar to still appear underneath then you can use this code instead:

if( is_single() || is_post_type_archive() || is_home() || is_author() || is_category() || is_date())
{
    dynamic_sidebar('sidebar-blog');
} 

dynamic_sidebar('sidebar-primary');

The functions starting with “is” are all standard parts of WordPress. It calls these conditional tags and they can be used to identify which type of page you’re currently displaying. You can see the full list here:

• http://codex.wordpress.org/Conditional_Tags

As you can see the dynamic_sidebar() is simply calling up the widget area we setup in init.php. There is no front end markup to change because they are injected automatically wherever you already have the main sidebar being displayed.

Congratulations, you can go and tick this one off your todo list!