Urban Giraffe

Step 2 - Sidebar sections

Searching

The search field is an important, if somewhat underused, feature of any website. Frequent visitors may want to refer back to an old article but don’t want to spend the time searching through archives or a generic search engine. New visitors are unlikely to use a search feature, but it’s nice to have it there all the same.

My own opinion is that putting the search field at the top of the sidebar gives it too much importance. Most of us read from left-to-right, top-to-bottom, and the search field is the first thing we see in the sidebar, despite it being the last thing we use. This can be easily changed by demoting it to last position (line 18):

Now when we view the sidebar it is the last item:

Note how the search field itself is not defined in the sidebar, but is included from the file searchform.php. The contents of this are:

<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  <div>
    <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

It is debatable whether it is worth splitting this into another file, but regardless, it is not necessary to make any changes.

Author information

A blog can bring out the latent voyeur in most of us. It is not surprising that a lot of blogs contain some ‘about me’ link where the author can describe themselves, their life, the purpose of the blog, hobbies, and whatever else they feel like sharing.

Some people take this a step further and add a short biography in the sidebar, maybe including a photograph. Although disabled by default, the Kubrick theme does already provide for this:

Re-enabling this is a simple task. First we remove the HTML comment tags (line 1, 2, and 8).

<li>
  <h2><?php _e('Author'); ?></h2>
  <p>A little something about you, the author. Nothing lengthy,
  just an overview.</p>
</li>

Now we can change the contents of the information to something more appropriate. Here I have also included a photograph to demonstrate that the sidebar does not need to contain only text information.

<li><h2><?php _e('Author'); ?></h2>
  <p>Born under a tree, shot into space; life as a monkey is a challenge.</p>
 
  <div id="author">
    <a href="/about/" title="View my biography">
      <img border="0" src="<?php bloginfo('template_url') ?>/images/author.jpg" alt="photo"/>
    </a>
  </div>
</li>

And the accompanying style:

#author
{
  border: 1px solid #999;
  margin: 10px auto;
  text-align: center;
  width: 130px;
  padding: 2px;
}
 
#author img
{
  border: 0;
}

The image has been made into a link, which I have pointed at an ‘about’ page for more detailed information. You should change the URL to something appropriate. The image has been wrapped in a div, allowing us to centre it within the sidebar.

Let’s take a look at the result:

Image courtesy of Japanese TV series 'Monkey'

Note the use of the _e() function in displaying the Author title. This is a WordPress function to aid internationalisation. Although it won’t perform any translation, it allows a dictionary of translated words to be supplied and then referenced using a keyword. If no translation exists then the keyword itself is used. We should continue to use this method to remain standard with WordPress.

There are many other things you could replace the author biography with. For example, you could insert an extended description of your blog, or maybe a quote or image. Several plugins exist which will allow dynamic content to be inserted here, such as random photographs from a Flickr album.

Context specific information

This section provides information on the current location within the blog. That is, when viewing an archive page it will tell you what month or year the page shows. When viewing a category it will describe the category.

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

The code, although complex looking, can be shrunk down to this:

if category

• display category title

if archive

• display type of archive (day, month, year)

if search results

• display search words

The reason it looks complicated is because of the way PHP is used in HTML to make choices:

You can see that the ‘you are currently browsing’ text is wrapped inside a PHP if else statement (line 1 and 3). Note that the PHP braces are important and misplacement can cause errors.

Just like any other section in the sidebar, you are free to change the details. One notable issue here is that when none of the statements are true, then the section will output an empty list item. While not an error, this should be tidied away.