That pesky WordPress sidebar

Sometimes you want it and sometimes you don’t. The sidebar, specifically here the one that appears to the side of content on your WordPress site (see on the right here), can be tricky customer when you don’t want it to appear throughout your site. On your posts pages you may want it with the categories, archives or meta widget inside. Some pages you may want it with a custom menu inside, and some you may not want it at all. So how do you achieve all that? Well, you’ll need to have a child theme set up (otherwise on your next update all your good work will be undone, arghhh!) and inside that you’ll want to create a new page template and have a copy of the default theme’s functions.php copied in.

Let’s start by imagining we have a website, where we decide to add a categories widget to our secondary sidebar which appears to the right of the content section in twentythirteen. Now we only want that on our blog pages, but by default, this will now appear on every page on our website. Damn.

Well this is where we need or new page template. If you’ve not already done so, copy the page.php file from the default theme’s root folder into your child theme (always matching directory structure). Then re-save this file as ‘page-no-sidebar.php’.

At the top of the page you’ll see comments, something like:

/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other
* 'pages' on your WordPress site will use a different template.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/

Change this to:

/*
Template Name: Page No Sidebar
*/

Finally, at the bottom of this page (should be second line from bottom), delete:

<?php get_sidebar(); ?>

Now you have your template page for no sidebar, so all that’s left to with it is upload it. Now when you have a page which doesn’t require a sidebar, scroll to the option for the page in admin that allows you to change the template, and choose ‘Page No Sidebar’.

Well, that should be it, but unfortunately, it’s never quite that simple… What you’ll find, is that once a secondary sidebar is used elsewhere in the site a new body class is added – .sidebar – on all the pages throughout the site, even if the sidebar isn’t called onto that page. This then uses different css rules and can often leave an undesired space where the side bar usually appears.

To stop this happening you need to add some code to your functions.php file. Again, make sure you have a copy of this placed in your child theme. Locate in the page the function beginning:

function twentythirteen_body_class( $classes )

Before amending it, mine appeared as so:

function twentythirteen_body_class( $classes ) {
if ( ! is_multi_author() )
$classes[] = 'single-author';

if ( is_active_sidebar( 'sidebar-2' ) && ! is_attachment() && ! is_404() )
$classes[] = 'sidebar';

if ( ! get_option( 'show_avatars' ) )
$classes[] = 'no-avatars';

return $classes;
}
add_filter( 'body_class', 'twentythirteen_body_class' );

Before the ‘return $classes;’ add the following:

if ( is_page_template('page-no-sidebar.php') )
foreach($classes as $key => $value) {
if ($value == 'sidebar') unset($classes[$key]);
}

This will make sure that when the page template page-no-sidebar.php is used that no .sidebar class will be added to the body tag. Voila.

Now we could leave it there, if all you need to do is have the option of pages with or without the secondary sidebar, where only one type of content for the sidebar is necessary. However, as mentioned above, there are times you may want sidebars with different content on different pages. To do this you need to create a new sidebar in functions.php, and then add this, or pull it into your template. I’m going to use the example of a portfolio page, where you want a custom menu of portfolio items in the sidebar.

To start with, locate in functions.php this function:

function twentythirteen_widgets_init()

You’ll see the current sidebars in the function (in twentythirteen’s default just two, main widget and secondary widget area). You’ll want to add a third by copy and pasting the secondary widget area, like below:

function twentythirteen_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Widget Area', 'twentythirteen' ),
'id' => 'sidebar-1',
'description' => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Secondary Widget Area', 'twentythirteen' ),
'id' => 'sidebar-2',
'description' => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Portfolio Widget Area', 'jungledesign' ),
'id' => 'sidebar-3',
'description' => __( 'Appears on the portfolio page in the sidebar.', 'jungledesign' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}

You can see that I’ve changed the name and description, but importantly I’ve also changed the ID to sidebar-3. You can of course change the before and after html, but I’m happy to keep everything as is, with the current css styling.

Save and re-upload the functions.php file.

Now create another new page template as before. You can just copy and paste the page-no-sidebar.php file and rename it portfolio-page.php. Then go into it and change the name at the top.

/*
Template Name: Portfolio Page
*/

Now go to the bottom of the page, and above:

<?php get_footer(); ?>

add:

<div id="tertiary" class="sidebar-container" role="complementary">
<div class="sidebar-inner">
<div class="widget-area">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?><?php endif; ?>
</div><!-- .widget-area -->
</div><!-- .sidebar-inner -->
</div><!-- #tertiary -->

You’ll notice this references sidebar (3) the one in the functions.php file. Upload this template to your theme folder and apply it to a page. Now by going to your admin area, visiting Appearance > Widgets, you’ll see the new sidebar area you can add widgets to. Add some content – I dragged over a menu widget, and added a custom menu – and save your changes. Now visit the page on your site and you should see your custom sidebar!

Please let me know if I’ve missed something. Something I would like to change here is where I’ve added html tags around the custom sidebar pulled onto the template. This could be done on the functions.php or onto a separate page included like the other sidebars, as these tags will still show up if the sidebar isn’t used.

One thought on “That pesky WordPress sidebar

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *