PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Understanding the WordPress Sidebar

The sidebar is a very important part of your blog. It appears on every page of your blog and is usually the main method visitors use to navigate around your blog.

The sidebar code may seem quite daunting at first but when you take the time to break it down, its very easy to understand. I hope this guide will help you understand the sidebar more and will help you modify it to your needs.

A look at the basic code of the Sidebar

Some themes use a different method however most themes (including the default theme of wordpress), the code looks something like this.


<div id="sidebar">
<ul>

<!-- Code for Name of Block -->
<li><h2>Name of Block</h2>

<ul>
      <li>first link</li>
      <li>second link</li>
     </ul>

</li>
<!-- End of Code for Name of Block -->

</ul>
</div>

The above code is defined in the stylesheet using the id ‘sidebar’. You can customise how the sidebar looks by modifying the sidebar section in the stylesheet.

The above is a short example of how the code works. ‘Name of Block’ is simply the title of the section ie. pages, categories, blogroll etc. It’s simply the name of the section or category. The links are then displayed undneath the title.

As you can see from the code above, the basic code of the sidebar is very simple when you break it down. To add in more sections you would simply add more blocks. In effect, the whole sidebar is just a list listed inside another list.

The traditional sidebar is just an extension of the basic code i showed above. Here is an example of a sidebar which displays the most common additions to the sidebar. Namely the Pages, Archives, Categories, Blogroll and the Meta sections.

<div id="sidebar">
<ul>

<li><h2>Pages</h2>
<ul>
<?php wp_list_pages(); ?>
</ul>
</li>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives(); ?>
</ul>
</li>

<li><h2>Categories</h2>
<ul><?php wp_list_categories(); ?>
</ul>
</li>

<li><h2>Blogroll</h2>
<ul><?php wp_list_bookmarks (); ?>
</ul>
</li>

<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>

</ul>
</div>

A different way of listing Blocks

If you specify paramaters, you can list the most common sidebar sections a little differently. Lets use the category section as an example. The php code to list the categories of your blog is wp_list_categories(); however if you use wp_list_categories('title_li=<h2>Categories</h2>'); you can pass through the title of the block in the function call.

You see, the standard functions for the sidebar have the list code already so you can replace


<li><h2>Categories</h2>
<ul><?php wp_list_categories(); ?>
</ul>
</li>

with

<?php wp_list_categories('title_li=<h2>Categories</h2>'); ?>

More Parameters

The above example works because the parameter title_li was defined in the function. There are a variety of parameters you can use with your sidebar functions to display the information you want.

I’ve already showed you how the title_li can be used. Here are a few more parameters which you can add to your sidebar. Note:

  • all you need to do to pass more than one parameter in a function is seperate different parameters with an ampersand eg &.
  • This isn’t a complete list, merely 2 or 3 which i thought readers would be likely to use. For a complete list of parameters for all functions please refer to the wordpress docs.

show_count

This probably the most common parameter that is added to the sidebar. The showcount parameter allows you to display the number of articles in your categories and archives. Blogging Tips uses this to show how many posts we have in each section.

So

<?php wp_list_categories(); ?>

becomes

<?php wp_list_categories('show_count=1'); ?>

type

This parameter can be used in the Archives call (amongst other things). So type=monthly for example would list archives per month (this is probably the most common timeline used). It should also be noted that monthly is the default parameter used.

The others are

  • monthly (Default)
  • daily
  • weekly
  • postbypost

The first three are pretty straight forward. To display the post count in a weekly basis you would use

<?php wp_get_archives('type=weekly&show_post_count=1'); ?>

The last one in the list is ‘postpost’. This is used to display your latest posts(I use it on Blogging Tips). The code i use to display the 10 latest posts is


<?php wp_get_archives('type=postbypost&limit=10'); ?>

The limit parameter above simply defines how many posts to list.

Overview

The wordpress sidebar is pretty straight forward once you see how the nested lists work. There is a lot more parameters which i haven’t covered however in this post i just wanted to help give a basic understanding of how the sidebar works. If there is something you want to display in your sidebar and you don’t know how please leave a comment here or post a thread in the forums and i’ll do my best to help. I can cover more advanced sidebar topics in the future if there is enough demand for it :)

Good luck,
Kevin

Kevin Muldoon is a webmaster and blogger who lives in Central Scotland. His current project is WordPress Mods; a blog which focuses on WordPress Themes, Plugins, Tutorials, News and Modifications and useful resources such as 101 Places To Find Images For Your Blog Posts.

16 comments - Leave a reply
  • Posted by Dylan on 20th May 2007

    Nice post Kevin, when I first started I had a heck of a time figuring out the sidebar, now I just use sidebar widgets, a lot easier.

    Dylan

  • Posted by Rich Minx on 20th May 2007

    Thanks for the coding tips. Sidebar widgets are great and I guess there’s a real psychology behind adding and positioning them: where to put the ads? What to add and what not to add? I find it’s tempting to go overboard with all the tiles and widgets you can add. I’d be interested to hear your advice on what you think are sidebar essentials and also things to avoid.

  • Posted by Stephen Welton on 20th May 2007

    Fantastic information. Maybe I can start to understand the "mumbo" in the php files.

  • Posted by TechZilo on 24th May 2007

    Since you narrate from a user’s point of view, you beat the pants off wordpress guides!

    Are you a PHP coder or something? This info is basic, but you seem to know a lot more….

  • Posted by Kevin on 24th May 2007

    im not a great php coder but i understand a lot of it – particularly the things i need to edit. i did C+ 11 years ago and java 6 years ago and php is really similar to that (plus back home i have a few php books i use for reference etc)

    glad you liked the guide :)

  • Posted by george on 20th Jan 2008

    Kevin,

    Thanks for the great coding information. I want to modify a theme to fit my needs, this greatly helps me along the way.

    Thanks,

    George

  • Posted by Andrew on 17th Feb 2008

    Great post Kevin. Excellent information regarding the wordpress sidebar and great examples. You make everything very easy to understand to any newbie!

  • Posted by dreamfreeblog on 9th Jun 2008

    thanks for the simple but usefull tips~

  • Posted by Chris on 20th Jun 2008

    Hello Kevin,

    You invited possible topics, so here goes!

    I am having trouble getting Twitter updates into my sidebar. I have posted their code into sidebar.php but nothing displays. Is it as simple as grabbing the Twitter code and pasting it in, or is it a bit more complex that that?

    Any clues- I've read lots of solutions but nothing seems to work.

  • Posted by Kevin Muldoon on 20th Jun 2008

    Chris – I use this plugin to post messages from my twitter on my sidebar

    Twitter for WordPress

  • Posted by Chris on 20th Jun 2008

    Thanks for that…works too! I would like to be able to see the tweets from those I am following to…and also a "follow me" link…any clues?

  • Posted by Kevin Muldoon on 20th Jun 2008

    Think you are looking for a twitter client. Check out this thread

    11 Free Twitter Clients

  • Posted by halloween on 19th Sep 2010

    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts.
    Any way Ill be subscribing to your feed and I hope you post again soon

    tHANKS & Regards

    Halloween 2010

  • Posted by aamir on 23rd Sep 2010

    Honestly, its a good move to educate overseas Customers with such information,
    so that he is fully equipped to take it further without any loss of time, thereafter.

    My recent post Halloween Decorations – Spooky Window Ghosts Could Scare Anybody!