Coding A WordPress Theme From Scratch Part 7

This is the seventh part in a tutorial series on how to create a wordpress theme from scratch. If you landed on this page randomly, I suggest you start at the beginning of this tutorial series. You can also go to the previous part of the tutorial series.

In this section of the tutorial, we will work on adding the sidebar to your layout. There are two different ways you can create the sidebar, you can either manually code each section of the sidebar, or you can widgetize the sidebar, allowing you to add ready coded widgets into your layout. We’ll start by manually coding the layout, then move on to widgetizing the layout. I’m listing some of the more commonly used codes in this tutorial, however if you don’t want a list of the most recent posts, don’t add the codes into your layout.

Open up index.php. We’ll contain the sidebar codes in a div with class sidebar. Add the following code before the </body> tag.

<div class="sidebar">

</div>

Adding the Sidebar

The first element we will add onto the siedbar is the search form. Create a new file, call it searchform.php, and paste the following codes into it. Make sure it’s in the same folder as the index.php file you are working on.

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div>
          <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" /><br />
          <input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

This code creates a form using the <form> and </form> tags. The form is given the id “searchform”, and is given the action.

Save this file, then close it. Go back to your index.php, and add the following code between the sidebar div tags.

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

This code uses PHP Includes, and is literally including all the codes found in searchform.php. Remember that these codes create the form to search the site. The TEMPLATEPATH is necessary as it can call this file, regardless of which folder of page the visitor is on.

If you would like to add a title on top of the search field, add the following code:

<h2><?php _e('Search'); ?></h2>

If you don’t want to use the PHP codes, simply type <h2>Search</h2>.

Adding the Calendar

Next we’ll add a calendar onto your sidebar. Below your search form codes in index.php, add the following codes.

<li id="calendar"><h2><?php _e('Calendar'); ?></h2>
<?php get_calendar(); ?>
</li>

Here, we created a list with the id “calendar”. The code <?php get_calendar(); ?> is a PHP function that will add the calendar onto your site.

Adding the Meta

Next we’ll add the meta. The meta essentially provides links for you, staff and visitors to either visit or log into the site. Add the following codes to your sidebar.

<li><h2><?php _e('Meta'); ?></h2>
     <ul>
          <?php wp_register(); ?>
          <li><?php wp_loginout(); ?></li>
          <?php wp_meta(); ?>
     </ul>
</li>

I’ll explain these codes in a bit more detail. First, you create a header with the title Meta using <li><h2><?php _e('Meta'); ?></h2>. You then create an unordered list for the links using <ul> and </ul>.
wp_register(); generates a list of links. If you are logged in, it displays the Site Admin link, and if you are logged out, it’ll display Register, allowing visitors to register on your wordpress.
The reason we don’t have <li> and </li> tags around wp_register(); is because the code automatically adds them in. Unfortunately this isn’t true for the log in and log out links. <li> and </li> wrapped around <?php wp_loginout(); ?> makes the log in and log out links part of the list.
wp_meta(); are other meta tags that can be used.

Adding the Categories List

Here we will now add a list of the categories you have on your wordpress. Add the following code onto your sidebar.

<ul>
     <li><h2><?php _e('Categories'); ?></h2>
          <ul>
               <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
          </ul>
     </li>
</ul>

Here we have created an unordered list, then added the heading Categories.
The code <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> sorts the categories, then lists them. <?php wp_list_cats(); ?> calls for the list of category links. sort_column=name alphebatizes the list. optioncount=1 displays the number of posts made in each category. hierarchial=0 places all categories in the same column, despite if their a subcategory or not.

Adding the Archive Links

Now we’re going to add the Archives. Archives are handy as they let your visitors sift through your old content and posts, and quickly find posts that might be of interest to them. Add the following codes into your sidebar.

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

This code creates an unordered list, then adds the title Archives. wp_get_archives('type=monthly'); calls for the archive links, organized in months.

Adding the Blogroll Links

Here we will add the blogroll. The blogroll is handy if you’re planning on adding affiliates, or websites that you like to visit and want to share. Add the following code to your sidebar.

<?php get_links_list(); ?>

This lists all the links in the blogroll. We dont add <ul> or <li> tags to them, as the code automatically generates them.

These are a list of the most popularly added elements on a sidebar. There are many others that you could add. I recommend having a look at my WordPress Hacks if you’re looking for some inspiration.

If you have any questions or comments, please add them below.