How to make the most out of your sidebar

17 Comments

By Pontus Etéus

When designing a WordPress site, many people overlook the power of the sidebar. It’s an excellent way to display information, and an even better way to display page-relevant information that doesn’t really fit into the “content” area of that page. Better yet, using dynamic content for the sidebar will make sure the user pays attention to it, since it (generally) displays less cluttered information and is obviously relevant to the page the user is currently browsing. Examples would be posts in the same category, author information, or specific ads for specific categories.

What I will cover here today are various methods of displaying dynamic content for your sidebar. I know a few myself, but I also went ahead and looked for various other methods.

1. Various Sidebar Templates

Since WordPress 2.5, more functionality has been added to the get_sidebar command which allows us to include any sidebar we want with a file name format of sidebar-anything.php, instead of sidebar.php.

The way we would go about this, is creating various files, such as: sidebar-about.php, sidebar-archives.php, etc. Then, in the index.php file, and all other pages which contain the get_sidebar(); command, we will replace that command and add a conditional statment.


<?php
if(is_page()) {
    // We're on a "page", which?
     if (is_page('About')) {
        // Ah, the about page!
          get_sidebar('about'); // includes sidebar-about.php
    } elseif (is_page('archives')) {
          get_sidebar('archives'); // includes sidebar-archives.php
    } elseif (is_page('contact')) {
          get_sidebar('contact'); // includes sidebar-contact.php
    } else {
        // if we're not any of the above pages
          get_sidebar(); // includes regular sidebar.php
} else {
    get_sidebar(); // includes regular sidebar.php
}
?>

This will load a different sidebar for each page. If you want to extend it further, such as displaying different sidebars for different categories, use this code:


<?php
//to be able to use this outside the loop
if( have_posts() ) { the_post(); rewind_posts(); } 

if( in_category('1') ) {
     get_sidebar('cat1');
    //gets sidebar-cat1.php
} elseif ( in_category('2') ) {
     get_sidebar('cat2');
    //gets sidebar-cat2.php
} elseif ( in_category('3') ) {
     get_sidebar('cat3');
    //gets sidebar-cat3.php
} elseif ( in_category('4') || in_category('5') || in_category('6') ) {
     get_sidebar('catRest');
    //gets sidebar-catRest.php
} else {
     get_sidebar()
    //gets sidebar.php
}
?>

This allows you to have an immense amount of sidebars, all different depending on which page of the site you decide to browse. The above code-snippet is courtesy of Chris Cagle.

2. Including Widgets

Simply including these sidebars is fine if you don’t use any widgets. Actually, it’s fine if you want the same widgets to display on each and every sidebar too, but if you want the widgets to change as well, you will have to mess a little with functions.php.

By default, the code to activate widgets looks like this:


<?php
if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}
?>

What we want it to do is register more than one “sidebar”. Sidebar is actually not a very good term for it, I’d rather have it called widget_area or something like that, but that’s not important. Let’s just think of them as sidebars within sidebars. They contain your widgets.

We’ll change the code in functions.php to the following instead, registering an additional sidebar. You can just copy/paste and add as many as you like, of course.


<?php
if ( function_exists('register_sidebar') ) {
    register_sidebar(array('name'=>'sidebarpage',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ));
     register_sidebar(array('name'=>'sidebararchive',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ));
}
?>

If you take a look at your admin panel, you’ll see several sidebars onto which you can add widgets:
sidebarscrn

The default line for inserting a standard widget area into sidebar is this:


<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Let’s say this is your file sidebar-archives.php, and you want the arhive specific widgets to display. To change this to display exactly the dynamic sidebar you’re looking for, change it to this:


<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebararchive') ) : ?>

This code snippet can be added anywhere, if you want that widget in your header, that’s just fine. Just include that little code snippet, and don’t forget to add just before your “sidebar” ends, avoiding PHP errors.

So, to make this clearer…

Scenario: We have three different ”widget sidebars” with the extensions -archive, -contact and -main. We want to display the following in the sidebars:

-archive:
Monthly Archives
Authors
Widgets (sidebar-archive)

-contact
Links
Widgets (sidebar-contact)

-main
Category listing
Latest Posts
Widgets (sidebar-main)

The code would look like this:


    <?php if(is_page('archive')) { ?>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(sidebar-archive) ) ?> <li> <h2>Archives</h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <li> <h2>Authors</h2> <ul> <?php wp_list_authors('optioncount=1'); ?< </ul> </li>
 <?php } elseif (is_page('contact')) { ?>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(sidebar-contact) ) ?> <li> <?php wp_list_bookmarks(); ?> // display your blogroll. </li> <?php } else { ?>
 <?php } if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(sidebar-main) ) ?> <li> <h2>Latest posts</h2> <ul> <?php wp_get_archives('type=postbypost&limit=10'); ?> </ul> </li> <?php wp_list_categories('show_count=1&title_li=<h2>Kategorier</h2>'); ?> <?php endif; ?> </ul>

NOTE: To make your widgets display properly, You might have to change a thing or two in the functions.php file as far as markup goes, then style it within your style.css, and perhaps take a look at the second link just below if you want something more advanced.

Nice resources:

Styling individual widgets within sidebar

Register_Sidebars info from the Codex

Custom renaming of sidebars

3. Dynamic Height Sidbar

Maybe you don’t want to include different sidebars for different pages/categories, but stick to one big one. On many sites, your sidebar might extend further than your content area, on short posts, or pages. This is fairly dysfunctional, and not very pretty. This might apply even if you use several sidebars, such as one for all category pages, and some categories are just not the content heavy, creating a hanging sidebar.

Ryan at Dao By Design came up with a very clever solution for this.

The idea is that depending on the amount of characters created by the loop, you display different amounts of content. This number will of course differ from site to site, so you’ll have to experiment. You’ll want the most important content to display at all times, and less important stuff, in Ryans case the blogroll, to display only if there is room for it.

Add this code just before the loop on your page.php and index.php pages:


<?php
    $post = get_post(the_ID(), ARRAY_A);
    $contlen = strlen($post[‘post_content’]);
?>

This sets the value of the variable $contlen as the length of the content. Then, in your sidebar, add a few conditional statements, like if($contlen > 3000), and then add the content. Problem here is that we now have to change the nifty piece of code WordPress supports since 2.5 (the get_sidebar()), and use the old one:


<?php include (TEMPLATEPATH . ‘/sidebar.php’); ?>

This is because the wp command doesn’t carry over variables passed in other parts of the template.

Next, we have to decide after which amount of characters we display the different amounts of content. Ryan made this list, and I see no reason to change it:

  • All – Search Box, Recent Posts
  • >1,000 – Badges
  • >3,500 – Recent Comments
  • >5,000 – Blogroll

To implement this, wrap the elements in your sidebar within if() statements:


<?php if($contlen > 3500) { ?>
    <h2>Recent Comments</h2>
    <ul>
        <?php get_recent_comments(); ?>
    </ul>
<?php } ?>

For other areas, just change the “if $contlen > 3000” to something else. For the, in this example, badges, it would be “if $contlen > 1000” insert code for badges. Or for blogroll “if $contlen > 5000” insert code for blogroll.

Closing Thoughts

There are numerous applications of the techniques showcased here today. There is no need to limit yourself to the sidebar area. If you want to display something special after posts in a special category, just register another “sidebar”, and add the conditional check if they are in that category, just as we did before. The difference this time being that you display at the end of “single.php”. This could be done with custom fields as well, but then you would have to add it manually to each post. This can be applied to posts in one category right off the bat, and adding a special category for a few posts is way less time consuming than adding all those custom fields. This is automatic 😉

So, say I have a set of good posts that i have set up as “bestof”, and at the end of those, I want to link to other popular posts. For this we’ll use a widget called WordPress Popular Posts. We’ll add that widget to the “sidebar” we have registered as sidebar-bestof (we could include links to other posts in best-of category, but then we would use this cool widget).

Sample code:


<?php
//to be able to use this outside the loop
if ( have_posts() ) { the_post(); rewind_posts(); } 

if ( in_category('bestof') ) {
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-bestof') ) : ?
else {
    // Add other posts / text / info if not in best-of category.
} ?>

That’s it for now. There is another method, creating custom sidebars through custom fields. That is a little more advanced, however, and we’ll save that for another tutorial. It is however, excellent when you want to have have more extensive sidebar content control through the admin interface, rather than editing the code. If you are designing premium themes, it would be a feature to implement next time, as it’s excellent for clients not able to touch the code.

Thanks for reading folks, this is my first tutorial for WPCandy, please let me know if you enjoyed it, and what could be improved upon until next time, in the comments section. Until then, take care!

Further reading:

WordPress Conditional Tags

Include Tags, such as get_sidebar()

Customizing your sidebar

17 thoughts on “How to make the most out of your sidebar

  1. Pingback: How to make the most out of your sidebar | Dailytuts.net - Daily tutorial for peoples

  2. Great article!

    The only problem with WordPress now is that you can only add a certain sidebar widget once, which could be a problem when you have multiple sidebars. Hopefully this will be resolved when WordPress 2.8 comes out.

  3. @zy – that is no longer a problem in WordPress 2.8 with the introduction of the multi-widget class. Of course, old widgets will need to include the new code for them to be used multiple times.

    Overall, great article. I don’t like this method of using all sorts of different sidebars for different page templates. Instead, I’d rather have a sidebar, but assign when and where widgets would be displayed.

  4. I tend to agree with Jeffro here. A single sidebar with the ability to assign which widgets show on specific pages is cleaner. There are several plugins that handle this (Widget Logic, Widget Context). I used to use the method described here, but it eventually became unruly.

    @zy – Multi-widgets have been possible for a long time (i.e., text widget, RSS widget). Just many of the default widgets could only be used once. If no one minds a little self-promotion around here, I’d like to point out the Widgets Reloaded plugin, which does just what you want with the default widgets.

  5. Justin: Yes, using widgets in that sense would work just fine 🙂 Personally, I prefer to use just one sidebar, with a bunch of custom fields, plus some regular wp expressions within conditional tags.

    There is a situation for all methods though, even though simply using a plugin like the one you described is one of the easiest, and best 🙂

  6. The fist set of code for displaying various sidebar templates looks useful, i had been using a php include sidebar-about

    There seems to be a syntax error though??

  7. To add more widget areas (or ‘sidebars’ if you wish), you can also create them this way in functions.php


    // Create widget names and put them in array
    $my_widget_name = array(
    __('Home Sidebar'),
    __('About Sidebar'),
    __('Whatever Sidebar'),
    __('etc-sidebar'),

    );

    and to have more control over the way they are displayed:


    // Define how we want our widgets to display
    // Replace list items with custom style
    foreach($my_widget_name as $my_widget) :
    register_sidebar(array(
    'name' => $my_widget,
    'before_widget' ='',
    'after_widget' ='',
    'before_title' ='',
    'after_title' ='', ));
    endforeach;
    }

    hm..some code gets stripped out; there should be div’s and header tags in the before_widget etc. part, in between the ‘ ‘

  8. @Mitch:

    You’re right, there is a syntax error. At the end, there is a double else, a misstake while formatting the article properly. Also, the first if statement wasn’t closed off properly. The code below is valid, just put it in between php tags:

    if(is_page()) {
    // We’re on a “page”, which?
    if (is_page(‘About’)) {
    // Ah, the about page!
    get_sidebar(‘about’); // includes sidebar-about.php
    } elseif (is_page(‘archives’)) {
    get_sidebar(‘archives’); // includes sidebar-archives.php
    } elseif (is_page(‘contact’)) {
    get_sidebar(‘contact’); // includes sidebar-contact.php
    } else {
    // if we’re not any of the above pages
    get_sidebar(); // includes regular sidebar.php
    }
    };

  9. Pingback: How To Make The Most Out Of Your Sidebar : Design Newz

  10. Pingback: links for 2009-04-12 | This Inspires Me

  11. Pingback: stephen-turner.net » links for 2009-04-16

  12. I am using a theme with 3 sidebars. A top sidebar and two sidebars below the top one. I would like to use a different top sidebar for each category so I can have different videos and other information specific to that category.

    I’m missing something. Which WordPress file do I add this code to and where in the page do I insert the code?

  13. Pingback: 100+ Massive Wordpress Tutorial Collection | tripwire magazine

  14. Fantastic! There are a lot of help pages out there for people who do not have a functions.php in their default WordPress skin. Yours is the first I have found with a proper hack for those of us who do. Thank you!

  15. Pingback: How to make wordpress sidebars only appear on certain pages for search engine optimization | Ken H. Judy

  16. Is it possible to assign a sidebar to more than one page at a time?

    example:
    if (is_page(’About, Products, Contact’)) {
    get_sidebar(’about’); // includes sidebar-about.php

    The above example doesn’t work, but is there a way to do it that would work?

  17. Thank you for this great post, I’m trying to use it on my site.
    In the second code set, you forgot an “;” after get_sidebar().

    But anyway, very useful code!
    Greetings

Comments are closed.