Make your Own WordPress Theme – Part 5

You are reading Make your Own WordPress Theme – Part 5. To read other parts, click on the link below.

• Part 1 – The Layout
• Part 2 – Header
• Part 3 – Index
• Part 4 – Comment
• Part 5 – Sidebar
• Part 6 – Footer
• Part 7 – Finish!

For sidebar, there are some WordPress tags that we can use here. For an example, to display the pages, categories, archives, etc.

First what we will do is to put unordered list to make it easier to manage our sidebar. Here what I mean.

In sidebar id, we put the <ul> and <li> like this.

<div id="sidebar">
 <ul>
  <li>
   our sidebar content goes here
  </li>
 </ul>
</div> <!– close sidebar –>

Because we can use CSS, so it will be better if do like this.

<div id="sidebar">
 <ul>
  <li>

   <h2>sidebar title</h2>
    <ul>
     <li>sidebar link1</li>
     <li>sidebar link2</li>
     <li>sidebar link3</li>
    </ul>

  </li>
 </ul>
</div> <!– close sidebar –>

So we can make each section has their own title and content. For an example, we display our site categories like this.

<div id="sidebar">
 <ul>
  <li>

   <h2>Categories</h2>
          <ul><BR><?phpwp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    </ul>

  </li>
 </ul>
</div> <!– close sidebar –>

Some of you may noticed that I did not include <li> tag for the Category. This is because WordPress already list down the output in <li> and </li>. So we no need to put the <li>.

Some other WordPress tags that you can use in sidebar.php

<?php wp_get_archives(‘type=monthly’); ?>
– display Monthly Archives

<P><?phpwp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>
– display our site categories

 

<?php get_links_list(); ?>
– list down our Blogroll

You can get more tags here, WordPress Template Tags .

Here is the sidebar code that I make that you can use in your sidebar.php

<div id="sidebar">
 <ul>
  <li>

    <?phpwp_list_pages('sort_column=menu_order&title_li=<h2>Pages</h2>' ); ?>

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

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

  </li>
 </ul>
</div> <!– close sidebar –>

Next, Part 6 – Footer . [tags]diy, how to, skin, theme[/tags]