Dissection of a WordPress theme: Part 3

Apr 30, 2005 | Tags: guide, meta-data, php, plugin, theme, wordpress | Written by Administrator

Translation:

Resources:

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):

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:

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.

Help me to save time by reading these instructions!

If you are asking a question please read the FAQ to see if it has already been answered. All support questions should be directed to the support forum. Thanks!

Comments (page 5 of 5)

44
John (author) :
Dec 18, 2007 5:00 am

Jo, if you increase the size of the sidebar you'll probably need to decrease the size of the content area. Once you've done that the rest of the theme will fall into place
43
Jo :
Dec 7, 2007 6:38 pm

Do you have a guide on how to widen the sidebar area without messing up everything?

I'm trying out this theme right now, http://www.plaintxt.org/themes/barthelme/ version 4.1

The test page is here: http://themes.wordpress.net/columns/2-columns/107/barthelme-101/

The sidebar is really cramped, is there a way to widen it to at least 250px? Will widening it hurt other areas?

I've been spending days and days trying to find the solution to this.
42
OS Template Reviewer :
Sep 7, 2007 3:00 am

If the sidebar is not vertical but horizontal, will it still be called 'sidebar'...
I think it disrupts the normal flow of browsing a blog if you arrange the sidebar horizontally
41
John (author) :
Apr 20, 2007 4:20 am

Ani, you can force this in Firefox by adding a special clearing div element just after the content.

So,

<div id="container"> <div id="content>YOUR CONTENT</div> <div style="clear: both"></div> </div>

That basically tells the browse to bring any floating elements (such as the sidebar) back into the main flow of the page, and so displaying the background in FireFox.

Pings & Trackbacks

benjoblog.weblogs.us, bingu.net, blogunion.org, drssay.com, hoozifachi.myfxh.com, kursus.textdriven.com, literalbarrage.org, r0x0rz.info, tekapo.com, theselfstarters.com, tinyau.weblogs.us, vanus01.host.sk, webcalendario.com, wordpr.ectio.us, bloggingpro.com, carlosdoren.com, clydeshome.net, daveschalkboard.com, garinungkadol.com, grantpalin.com, jou.ufl.edu, netlexfrance.com, noulakaz.net, shsh.ylc.edu.tw, whogivesfx.com, xxiaa.net

Urban Giraffe