1. Category description (this is useful other than the sidebar)
2. Children categories
3. Posts in the category

Clicking on any category causes this menu to display all posts within that category. I generally try to stay away from children categories but children categories may also be displayed.

/* If this is a category archive
*  This is a continuation of the if - elseif
*  sequence from the default template sidebar.php
*/
<?php  } elseif (is_category()) { ?>
<?php $current_category = single_cat_title(”, false); ?>
<?php $category_id = get_cat_ID($current_category); ?>
<li><h2>Description of <?php echo $current_category; ?></h2>
	<p><?php echo category_description($category_id); ?></p>
</li>
<li><h2>Children of <?php echo $current_category; ?></h2>
	<ul>
	<?php wp_list_categories('orderby=name&show_count=1&hierarchical=0&title_li=&use_desc_for_title=0&child_of='. $category_id); ?>
	</ul>
</li>
<li><h2>Posts in <?php echo $current_category; ?></h2>
<ul>
	<?php while (have_posts()) : the_post(); ?>
		<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
	<?php endwhile; ?>
</ul>
</li>
<?php } ?>

What is going on here?

First we check to see if we are working with a category. If yes, we proceed. Next we assign the category name and the category ID to PHP variables. Then using some template tags and basic formatting, we output the category’s Description, Children, and Posts.

References:

• http://codex.wordpress.org/Template_Tags/wp_list_categories
• http://codex.wordpress.org/Template_Tags/single_cat_title
• http://codex.wordpress.org/Template_Tags/category_description
• http://codex.wordpress.org/Function_Reference

To gain further understanding of which template files are used when view a WordPress site visit WordPress Site Architecture.

Narrow Column

The default single.php has its content div set to widecolumn. This needs to be changed to narrowcolumn.

<div id="content" class="widecolumn">
to
<div id="content" class="narrowcolumn">

Display Sidebar

Now display the sidebar by adding the following code just before the get_footer call.

FROM
<?php get_footer(); ?>

TO
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Wow, it doesn’t get much easier than that! Now you know how to convert from without sidebar to with sidebar displays.

Reference links:

• WordPress Site Architecture

• Display some categories under 1 title and other categories under another title
• Some categories may serve a special purpose
• Some categories may meant to be hidden

The standard default category widget includes all categories and this cannot be changed. However, the WP-dTree plugin is available for all dVector accounts and allows a wide range of options including exclusion of certain categories. Also, those writing their own sidebar.php template have a huge number of options.

WP-dTree Plugin

This is an excellent plugin and I recommend its use for all those who wish more advanced display of categories for navigation purposes. It is not currently used on the Oracle of ONE1 blog as my needs are quite simple here but I do implement it on 90% of my client work.

Once activated, options for this plugin are available in the Presentation tab. From the options it is a simple matter to exclude any number of categories you wish. Just enter a comma separated list of category IDs. The ID numbers are found as the first column in the Manage > Categories tab (see comments).

Then just drag the WP-dTree widget into the sidebar as you would any other widget.

Custom Sidebar Template

Actual editing of the template sidebar.php provides the most customization power. If you choose this advanced approach, please read documentation provided on wordpress.org. Displaying all but one category may be accomplished with the following code:

<?php wp_list_categories('show_count=1&exclude=86&title_li=<h2>Categories</h2>'); ?>

Iconic Links

Say you have a series of icons used to link to special pages or partner sites similar to the image. Simply add the following HTML to add the iconic links to your sidebar.

<li>
<a href="http://gruffgoat.com" title="Gruff Goat Information Services">
<img src="http://dvector.com/arcexercise/wp-content/themes/arcexercise-01/images/goat_logo_btn.jpg"
alt="Gruff Goat Information Services" border="0"></a>
<a href="http://redcrossinsewis.org" title="American Red Cross in Southeastern Wisconsin">
<img src="http://dvector.com/arcexercise/wp-content/themes/arcexercise-01/images/arc_logo_btn.jpg"
alt="American Red Cross in Southeastern Wisconsin" border="0"></a>
<a href="http://dvector.com/arcexercise" title="Home">
<img src="http://dvector.com/arcexercise/wp-content/themes/arcexercise-01/images/home_logo_btn.jpg"
alt="Home" border="0"></a>
</li>

Sponsor or Support Banners

Add the following code to add a sponsor or support banner to your sidebar.

<div align="center">
<hr>
<p>
<a href="http://redcrossinsewis.org">
<img src="http://www.redcrossinsewis.org/images/stories/logos/arcinsewis_120x60.gif"
alt="American Red Cross in Southeastern Wisconsin" height="60" width="120" border="1" />
</a>
</p>
<p>
<a href="http://www.eff.org/br/">
<img src="http://www.eff.org/br/br.gif"
alt="Join the Blue Ribbon Online Free Speech Campaign"
height="76" width="112" border="1" align="middle">
</a>
</p>
</div>

Flash Banner

Add some flash to your sidebar with the following code.

<div align="center">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
    width="160" height="75">
  <param name="movie"
    value="http://www.redcrossinsewis.org/images/stories/video/redcross_fire_ggis.swf" />
  <param name="quality" value="high" />
  <param name="menu" value="false" />
  <param name="wmode" value="" />
  <embed src="http://www.redcrossinsewis.org/images/stories/video/redcross_fire_ggis.swf"
    wmode="transparent" quality="high" menu="false"
	pluginspage="http://www.macromedia.com/go/getflashplayer"
	type="application/x-shockwave-flash" width="160"
	height="75">
  </embed>
  </object>
</div>

This should help you get started on using the Text widget to impress your site’s visitors.