This is the sixth part of how to create a WordPress theme. In the last part How To Create A WordPress Theme - Part 5, you created some non-post pages, in this part you shall add the 404 error page and clean up the sidebar and footer areas.

404 Page

It is inevitable that someone will type in your url from memory and make a mistake and try to access a non-existent page. You might delete a post but forget to remove the internal links to it. When either of these things happen the web server will send the visitor to a 404 error page.

There are a number of things you can do with this page:

• A humorous/sarky/serious image/message.
• A search box.
• A tag cloud.
• A list of helpful links

These can be used either on their own or in combination, exactly what you do use will be up to you and the type of site you run. To create a very basic 404 page:

1. Load up archives.php
2. Delete lines 1-5.
3. Delete everything inside the content div (lines 6-15).
4. Add the following inside the content div:

   <h2 style="color: red;" >Error 404 - Not Found</h2>
   <p>Either you typed in the URL incorrectly or there has been an error.
   You can have a look in the <a href="<?php bloginfo('url'); ?>/archives/"
   title="View the Archives">Archives</a>.
   

save the file as 404.php. Also in style.css add:

  #content a, #content a:visited {
  text-decoration: none;
  color: #922;
}

If you want to add a search box then add this in the content area:

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

If you want a tag cloud (v2.3.x only) add this in the content area:

<?php if ( function_exists('wp_tag_cloud') ) : ?>
<div class="cloud">
  <?php wp_tag_cloud('smallest=8&largest=25'); ?>
</div>

To style it add the following to styles.css:

.cloud {
  color: #555;
  background: #eee;
  border: 1px solid #aaa;
  padding: 10px;
  margin-top: 10px;
}
.cloud a, .cloud a:visited {
  text-decoration: none;
  color: #922;
}

If you want all three then I suggest the following:

<h2 style="color: red;" >Error 404 - Not Found</h2>
<p>Either you typed in the URL incorrectly or there has been an error.
You can have a look in the
<a href="<?php bloginfo('url'); ?>/archives/" title="View the
Archives">Archives</a>,
Search for what you are looking for:</p>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php if ( function_exists('wp_tag_cloud') ) : ?>
  <p>Or click on a topic below.</p>
  <div class="cloud">
    <?php wp_tag_cloud('smallest=8&largest=25'); ?>
  </div>
<?php endif; ?>

And don’t forget to add the styles to style.css.

Other Pages

There are other pages that you can/should include:

About Page: This page is about you and what the website is about. Often there is a picture of the blog author, that and a brief rundown about you help the visitors connect. This page can be easily created by going to Write > Page in the Admin Panel.

SiteMap: A SiteMap is handy for visitors to explore your site. It also helps your SEO as you are creating internal links to all your pages. Unfortunately, WordPress does not provide this option, instead you need to use a plugin, I use the one from Dagon Design.

Contact Page: Sometimes visitors want to ask you a question, or maybe another blogger would like to network with you, or a potential advertiser wants to contact you. Whatever the reason, a post’s comment area is not the place to do it in. As there are several ways of doing this, I will explore it in more detail in a future part of this series.

Sidebar Plugins

The sidebar is primarily a place where you can give the visitor extra useful information or ways to navigate your site. I have been to some sites where the sidebar is full of "decorative" widgets like spinning globes, clocks etc. Why?? These increase the time to download your site because they usually have to contact other sites or start up Java, and they provide no real help or information for the visitor. Please, when you are thinking of adding something to the sidebar, think first how will it help the visitor?

If you have a look at the sidebar that comes with the Default Theme you will see:

• A message telling you where you are (what you are browsing): This can be useful depending on your audience, usually the Page Title is, in my opinion, enough to let the visitor know where they are.
• A list of Pages: These are generally part of the main navigation. In this theme’s case they are already in the horizontal navigation bar.
• A list of the monthly Archives: This might be useful sometimes, but ask yourself when was the last time you searched for something purely by when it was published?
• A list of the Categories: Categories are like main topics, very useful to find a collection of posts.
• A list of Bookmarks (the blogroll): This is so misused on most blogs, you will see links to A-list bloggers and long lists of "friends". I find this a waste of space and link juice as it is usually on every page. I find it better to give a link from within a post because then that link can be given in context.
• The Meta block: Here you will find the Register and Login links. There should, in most cases, be no need for a visitor to Login to your site to either read or add a comment. If you have multiple authors they should be given usernames and passwords by the Admin. Leaving these two links on any page is a potential security risk and an invitation to a hacker.

How you implement yours is down to you and what you think would be helpful to your visitors. For this example I will show you how to implement each of the above features along with a tag cloud. Load up sidebar.php and edit it as follows:

<!-- SIDEBAR -->
<div id="rsidebar">
  <!-- TOP SIDEBAR -->
  <div class="sidebar" id="sbtop">
    <ul>
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
      <?php wp_list_pages('title_li=<p class="sbheader">Pages</p>' ); ?>
      <?php wp_list_categories('show_count=1&title_li=<p class="sbheader">Topics</p>'); ?>
      <?php if ( function_exists('wp_tag_cloud') ) : ?>
        <li><p class="sbheader">Tags</p>
          <?php wp_tag_cloud('smallest=8&largest=18'); ?>
        </li>
      <?php endif; ?>
      <?php wp_list_bookmarks('title_li=<p class="sbheader">Blogroll</p>'); ?>
      <li><p class="sbheader">Meta</p>
        <ul>
          <?php wp_register(); ?>
          <li><?php wp_loginout(); ?></li>
          <?php wp_meta(); ?>
        </ul>
    <?php endif; ?>
    </ul>
  </div>
  <!-- BOTTOM SIDEBAR -->
  <div class="sidebar" id="sbbot">
    <ul>
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
    <!-- PUT OTHER PLUGINS HERE -->

    <?php endif; ?>
    </ul>
  </div>
</div

You will also need to add something to style.css for the tag cloud as follows:

#rsidebar .sidebar ul li a, #rsidebar .sidebar ul li a:visited {
  text-decoration: none;
  color: #333;
}
#rsidebar .sidebar ul li a:hover {
  color: #833;
}

In this practice theme you will notice I have put Recent Posts, Recent Comments and Popular Posts in the Footer section, so let’s code them first.

Recent Posts

This can be done without a plugin, it is essentially a similar loop to that used in the single.php. Open footer.php and modify the Left Module as follows (changes are in red):

<!-- LEFT MODULE -->
<div class="fmodule" id="sbleft">
  <ul>
  <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>
    <li><p class="ftitle">Recent Posts</p>
      <ul>
      <?php query_posts('showposts=8'); ?>
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a>
          <span class="quick_date"><?php the_time('m.j') ?></span></li>
      <?php endwhile; endif; ?>
      </ul>
    </li>
  <?php endif; ?>
  </ul>
</div>

Recent Comments

This can be done without a plugin but it is easier to use one. Get the recent comments plugin and install it. This can act as either a plugin or a widget. If you want it to act as a plugin then modify the middle module as follows:

<!-- MIDDLE MODULE -->
<div class="fmodule" id="sbmiddle">
  <ul>
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>
      <?php if (function_exists('get_recent_comments')) { ?>
        <li><p class="ftitle">Recent Comments</p>
          <ul>
            <?php get_recent_comments(); ?>
          </ul>
        </li>
      <?php } ?>
    <?php endif; ?>
  </ul>
</div>

Popular Posts

This will also need a plugin called Popularity Contest. Download and install it then modify the right module as follows:

<!-- RIGHT MODULE -->
<div class="fmodule" id="sbright">
  <ul>
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : ?>
      <?php if (function_exists('akpc_most_popular')) { ?>
        <li><p class="ftitle">Popular Posts</p>
          <ul>
            <?php akpc_most_popular(); ?>
          </ul>
        </li>
      <?php } ?>
    <?php endif; ?>
  </ul>
</div>

Wrap Up

Your basic theme is now finished You have cleaned up the sidebar areas and added any pages that you need. However, there are some things that cannot be done without plugins very easily, so next time I shall go over some useful, even necessary plugins that you can use to improve the use of your blog.