Getting closer to finishing your first wordpress theme. However there’s one important thing left - sidebar. That’s right, every blog needs a well organized and user-friendly navigation. It’s actually pretty simple. We just need to call few wordpress functions, add few lines to the stylesheet and we’re done.
Widgetized Sidebar
Let’s start with an unordered list. Open the sidebar.php and fill in:
<div id=”sidebar”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
// Here we are going to add all other codes…
<?php endif; ?>
</ul>
</div><– close sidebar –>
The two lines between the <ul> and </ul> tags will widgetize your sidebar - enabling you to quickly reorganize the items in your sidebar from within the admin panel. One last thing before we move to categories. Add the following to your stylesheet:
ul,li {list-style:none;}
It will remove the ugly little squares from list items. Anyways you’ll probably add your own little images later.
Categories
The first item in the unordered list will contain categories:
/* Function _e(’Categories’) will print the word “Categories” */
<li><h2><?php _e(’Categories’); ?></h2>
<ul>
/* This function calls for the list of category links and prints it */
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul>
</li>
The wp_list_cats() function contain few arguments. Let’s explain them:
sort_column=name - category links will be displayed in alphabetical order
optioncount=1 - displays the number of posts after each cateogory link (change “1″ to “0″ in order to hide the numbers)
hierarchial=0 - this turns off displaying sub-categories in sub-list-items (change “0″ to “1″ in order to turn on)
Archives And Blogroll
Type the following code under the categories listing to display monthly archives:
<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
Now the blogroll links:
<li>
<ul>
<?php get_links(-1, ‘<li>’, ‘</li>’, ‘ - ‘); ?>
</ul>
</li>
Meta Tags
The latter code will diplay the “Register” link, “Login” link (if you have already registered), “Logout” (if logged in) and “Site admin” link:
<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
Remember that you don’t need to have meta section in your sidebar. You can still get to the login page by typing into your browser http://yourblog.com/wp-login.php.
That’s it for the sidebar. I told you it was easy. Let’s summarize how the sidebar.php should look now:
<div id=”sidebar”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
<li><h2><?php _e(’Categories’); ?></h2>
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul><br />
</li>
<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
<li>
<ul><br />
<li><h2><?php _e(’Blogroll’); ?></h2></li>
<?php get_links(-1, ‘<li>’, ‘</li>’, ‘ - ‘); ?>
</ul><br />
</li>
<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div><!– close sidebar –>
Horizontal Navigation
We will add page links into horizontal navigation div we have in the header template. Open the header.php file and add between <div id=”nav”> and </div><!– close nav –> tags:
<?php wp_list_pages(’title_li=’); ?>
The only problem is that the pages will be displayed vertically. To make them display horizontally in one row just add to the style.css file:
ul,li {list-style:none;}
#nav ul li {display:inline;padding:2px 10px 2px 10px;}
.entry {margin-bottom:20px;} /* This is just a little addition to visually divide the posts at the main index page */
I have also included some padding so the links won’t be too crowded…
Footer
Usually there is just some copyright information plus maybe a few links in the footer. We will add just copyright. Open the footer.php file and copy and paste:
<div id=”footer”>
Copyright © 2008 <?php bloginfo(’name’); // Function bloginfo(’name’) will return your blog’s name ?>
</div><!– close footer –>
</div><!– close wrapper –>
</body>
</html>
Your Theme’s Ready For The First Launch!
Alright. Activate the theme in the admin panel and it should be working. There’s still lot of space for improvements but the hardest part has already ended. In the next chapter I’ll show you few very useful tweaks and stylesheet tricks to make your theme look better.
Related articles: Part I, Part II Part III
