Create WordPress Themes from scratch Part II. Create Wordpress Sidebar and navigation

On the previous article, we have create part of wordpress themes. Started with theme layout framework that consist of header on the top, content (post area) on left side , sidebar on right side and footer on the bottom. Lets continue with adding some WordPress template tags on the sidebar for navigation purpose like category, archive, recent post. We also will adding navigation page on the header and some information on footer.

Sidebar

Open index.php file from our latest wordpress theme on previous articles and . For now we focus on sidebar area.

before

<div id="sidebar">
this is sidebar
</div>

Listing the category

add the following wordpress template tags

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

Archive monthly

<div id="sidebar">
<ul>
<li id="categories"><?php _e('Categories'); ?>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<li id="archives"><?php _e('Archives'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
</ul>
</div>

Latest posts

<div id="sidebar">
<ul>
<li id="categories"><?php _e('Categories'); ?>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<li id="archives"><?php _e('Archives'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li id="posts"><?php _e('Latest posts'); ?>
<ul>
<?php wp_get_archives('type=postbypost&amp;amp;amp;amp;limit=10'); ?>
</ul>
</li>
</ul>
</div>

We just adding category, archive and latest post on the sidebar. All the tags above are well documented in the WordPress Codex.  Lets take a look at the preview

preview

Header

adding list page on the header

Again , open up index.php, add the following source code on the header tag

before

<div id="header" class="container">
<div id="logo">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
</div>

after

<div id="header" class="container">
<div id="logo">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
<div id="menu" class="top">
<ul>
<?php wp_list_pages('sort_column=menu_order&amp;amp;depth=1&amp;amp;amp;amp;amp;amp;amp;amp;title_li='); ?>
</ul>
</div>
<h4>

Footer

before

<div id="footer">
this is footer
</div>

after

<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Themes by <a href="http://mupet.net">blogfreak</a>  for working with          <a href="http://wordpress.org/">WordPress</a></h3>

Just simple blog to share about php, cakephp, wordpress themes, css, javascript and other webdesign stuff<br />
&amp;amp;amp;amp;amp;amp;amp;amp;copy;<a href="http://www.blogfreakz.com"><?php bloginfo('name'); ?></a><br><?php the_time('Y'); ?>

</div>

<div class="footer_column">
<h3>More Links</h3>
<ul>
<li><a href="http://mupet.net">mupet.net</a></li>
</ul>
</div>

<div class="footer_column">
<h3>RSS</h3>
<ul>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
</ul>
</div>
</div>
</div>

Take a look at the preview now.

preview

Wrapping up

Okey , our themes almost complete. On the next article, we will adding  CSS stuff to make our WordPress Themes more beautiful than ever.