First WordPress Theme: 2 - A sidebar

Adding the sidebar to the basic layout.

For simplicity, we’re just going to do 1 sidebar - adding 2,3 sidebars follows the same principles, but with a few complications best left for later.

1. Go to your index.php (from the first wordpress theme tutorial) and cut out the code for the sidebar:- probably something like this

<div id="sidebar">
....
Some dummy text at the moment
....
</div>

2. Paste this into a new file and name it sidebar.php - save in the same folder as your index.php

3. In index.php, replace the code you cut out with this

<?php get_sidebar(); ?>

4. Now, in sidebar.php cut out the dummy text and replace with

<ul>

<?php /* WordPress Widget Support */ if (function_exists('dynamic_sidebar') and dynamic_sidebar(1)) { } else { ?>

<?php wp_list_pages(); ?>

<?php get_links_list(); ?>

<li id="categories"><?php _e('Categories'); ?>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>

<li id="search">
<ul>
<label for="s"><?php _e('Search:'); ?></label>
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="s" id="s" /><input type="submit" value="<?php _e('Search'); ?>" />
</form>
</ul>
</li>

<li id="archives"><?php _e('Archives'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li id="meta"><?php _e('Meta'); ?>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>

<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('RSS'); ?></a></li>

<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments RSS'); ?></a></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'); ?>"><abbr title="WordPress">WP</abbr></a></li>
<?php wp_meta(); ?>
</ul>
</li>

<?php } ?>
</ul>

This code is largely taken from the default (Kubrick) theme of Wordpress.

4. Create a file called functions.php and add this to it:

<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>

Save in the same folder as your index.php

You should now have a theme folder with:
functions.php
index.php
sidebar.php
style.css

Exactly as in the first wordpress tutorial, upload it, (overwriting your first folder) activate the theme if necessary and see what it looks like. If everything’s gone right you should have a widget-enabled sidebar now - make sure to activate the plugin.

Next: separate Wordpress headers and footers

If these tutorials have helped you get started with theme design - please give us a link from your blog, eg…

<a href="http://www.codescheme.net/">WordPress Design</a>