Dissection of a WordPress theme: Part 3

Personalising a blog can require patience and perseverance. There are times when it seems a fruitless task and the blog absolutely refuses to do what you want, despite your best efforts. There are many sources of information on the internet, but it can be hard to locate exactly what you need.

One of the simplest solutions is to look at other people’s work and see if you can make use of their ideas. This is the third part in a series of articles concerned with the dissection of the default WordPress theme, Kubrick. The hope is that walking through this theme may provide help for your own blog or, at the very least, open up new areas of research. After all, there is no shortage of information out there.

Previous guides have resulted in the creation of a basic theme framework. The header and footer elements have been completed, but the body section is still very much devoid of style. This part will focus on the sidebar, the navigational centre of a blog, and flesh out its raw contents to be more functional and attractive.

The sidebar is where a visitor first looks when they have finished reading a blog posting. It tells them what else your blog has to offer, how to find it, and where to go next. It can be a great aid in directing visitors, or it can confuse them entirely. A confused visitor is not likely to return and so we should persuade them to stay as long as possible.

Step 1 – The sidebar

The first part in describing the sidebar is to look at the code, taken from sidebar.php:

<div id="sidebar">
  <ul>
    <li><?php include (TEMPLATEPATH . '/searchform.php'); ?></li>

    <!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    <li><h2><?php _e('Author'); ?></h2>
    <p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    </li>
    -->

    <li>
			<?php /* If this is a category archive */ if (is_category()) { ?>
			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>

			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
			<p>You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives
			for the day <?php the_time('l, F jS, Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
			<p>You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives
			for <?php the_time('F, Y'); ?>.</p>

			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
			<p>You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives
			for the year <?php the_time('Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
			<p>You have searched the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives
			for <strong>'<?php echo wp_specialchars($s); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>

			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
			<p>You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives.</p>
			<?php } ?>
    </li>

    <?php wp_list_pages('title_li=<h2>' . __('Pages') . '</h2>' ); ?>

    <li>
			<h2><?php _e('Archives'); ?></h2>
      <ul><?php wp_get_archives('type=monthly'); ?></ul>
    </li>

    <li>
			<h2><?php _e('Categories'); ?></h2>
      <ul><?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?></ul>
    </li>

    <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>       

      <?php get_links_list(); ?>
      <li><h2><?php _e('Meta'); ?></h2>

      <ul>
        <?php wp_register(); ?>
        <li><?php wp_loginout(); ?></li>
        <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('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="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>">WordPress</a></li>
        <?php wp_meta(); ?>
      </ul>
      </li>

    <?php } ?>
  </ul>
</div>

There’s a lot of code here so let’s break it down carefully. At its most basic, the sidebar consists of a single div called sidebar (line 1). Inside this is an unordered list, with many items (lines 2 to 64):

Sidebar div

Each heading you see in the Kubrick sidebar maps to one of these items. Most of these items contain sub-lists, such as the categories or archive list:

Sidebar div

Currently the sidebar consists of the following sections:

  • Search field (line 3)
  • Author information, disabled (line 5 to 9)
  • Context specific information (archive, category, etc) on lines 11 to 34
  • Page list (line 36)
  • Archives (lines 38 to 41)
  • Categories (lines 43 to 46)
  • Meta data & blogroll (lines 51 to 61)

I will look at each in turn and, where appropriate, show how they can be changed.

It should be noted that nothing in the sidebar is mandatory. You are free to insert and delete whatever items you want to, and can even dispense with the sidebar entirely. There is nothing to say it even has to be vertical; a common technique is to take certain parts of the sidebar, such as the pages, and turn them into a horizontal menu at the top of the page.

86 Responses to Dissection of a WordPress theme: Part 3

  1. It probably is easier to keep search in a separate file, especially if you are likely to change your mind about it. You mention changing its location. You might also want to swap out the supplied WordPress search and use another search (e.g., Technorati, Google).

  2. Great article – really makes it all clear and inspires to make up your own layouts!

    PDF copy of all parts for offline brainstorming would be great! :-)

  3. Superb resources – I’d echo the call for a printable version of the full article. PDF? *shudder* :o)

    Respect – a great effort, and a generous share.

  4. I’m working on putting together a PDF version and it’ll probably appear shortly after I complete the series. WordPress is a lot less print-friendly than I hoped for!

    Thanks for the comments too.