One thing I push, is that 99% of the site’s content should be in posts. Write content to posts. They are much more flexible and easier for a developer to work with.

Pages have their place on a site but are limited to non-hierarchical, never-changing, organizational metadata (information about data). So what goes on a page? About, contact, history, jurisdiction, terms of use, privacy statements, and a sitemap. All the boring stuff.

Posts, on the other hand, can belong to multiple categories and have unlimited tags. Categories and tags automatically create the navigational structure of the site. The power of going with the flow is that most of the structure is done for you instead of needing to be created by you.

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

Create home.php

Simply copy your index.php to home.php. Most of the template will be the same except for a few minor modifications.

Sticky Posts

Sticky posts are those that will remain at the top of your home page regardless of their age. Create a hidden category named ‘_sticky’ and make note of it’s ID. Edit your home.php. Shortly after the <div id="content"> tag enter code similar to the following:

<?php query_posts('cat=86&showposts=2');?>
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
	<div class='post' id='post-<?php the_ID(); ?>'>
	<h2 class='articleHeadline'>
	<?php the_title(); ?>
	</h2>
	<p class='article'>
	<?php the_content('Read the rest of this entry'); ?>
	</p>
	</div>
  <?php endwhile; ?>
<?php endif; ?>

Firstly, make certain you replace 86 with the ID of your _sticky category. Now, some explanation of what is happening. The block which starts at <?php if (have_posts()) : ?> and ends at <?php endif; ?> is the standard WordPress Loop. So the trick here lies within <?php query_posts('cat=86&showposts=2');?>. This function call requests the most recent 2 (showpost=2) posts in the category with an ID of 86 (cat=86).

Display Regular Posts

Now in order for regular posts to display, we must reset our posts query. Let’s do a little more than that by also excluding all categories we wish to remain hidden. Just before the next Loop, add the following:

<?php query_posts('cat=-1,-86&showposts=10');?>

Here we are excluding categories with the IDs of 1 and 86 and then displaying the most recent 10 posts.

This article introduced two key concepts, the function query_posts and the Loop. Do a little digging into these concepts and you have gained large amounts of control over your site’s display.

Reference links:

• The Loop
• query_posts

1. Home
2. About
3. Contact
4. Site Map (activate the sitemap plugin and include
   <!-- ddsitemapgen --> in your page or post)
5. Store

Mostly these are pages and not posts but if you wished posts in the banner bar navigation it would be a simple matter by using a hidden category.

NOTE: Modifying the Header requires working with the template header.php and often the file style.css.

Modify header.php

The default header.php has the following code:

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

I usually use my own header images including text and so delete the headerimg div. With this in mind, I end up with the following code in place of the original:

<div id="header">
  <div id="menu_top_layout">
    <div class="menu_top">
	<ul class="menu_top">
	<li class="page_item page-item-0">
	  <a href="<?php bloginfo('url'); ?>"
	  title="<?php bloginfo('name'); ?>">Home</a>
	</li>
	<?php wp_list_pages('depth=1&child_of=0&title_li='); ?>
	</ul>
	</div>
  </div>
</div>

This alone does not give the desired effect, instead it outputs an unordered list of links. Now we must properly format this list using CSS.

Modify style.css

As you can see, I added a couple of style classes and ids to header.php. We can now use this to create new styles. Though you will likely need to adjust this CSS in oder to meet your styling needs, the following should get you started.

/* Header Menu - add to style.css */
#menu_top_layout 	{
	float: right;
	overflow: hidden;
	margin:1px;
	height: 20px;
	width: 420px;
	text-align: right;
} 

ul.menu_top {
	margin: 0;
	list-style: none;
	line-height: normal;
	float: right;
}

ul.menu_top li {
	display: inline;
	padding: 0;
}

ul.menu_top a {
	color: #FFA500;
	display: block;
	float: left;
	height: 26px;
	padding: 6px 8px 0 10px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
}

ul.menu_top a:hover {
	color: #664700;
/*	background: transparent url(images/menuover.jpg) repeat-x; */
}

/* End Menu */

These simple header navigations often make a huge difference to visitors and I encourage you to consider including them on your site.

• 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.

1. Each form submission goes to multiple recipients
2. The recipient of a form depends on a form select box

Each form submission goes to multiple recipients

This is the easier of the two in both concept and implementation. By default, when your form is submitted it is emailed to the ‘Admin email address’. If you would like a form to be sent to more than 1 address, simply comma separate the list of email addresses to send to. View the image as an example.

The recipient of a form depends on a form select box

This is a little more difficult to achieve but still quite easy using cforms. Here it is a two step process. Step one is to create a special Multiple Recipients field. Step two sets the email addresses for the recipients.

Create the special Multiple Recipient field

Create a new field and give it the type ‘Multiple Recipients’. In the field name, enter the select box label and then the select box choices separated by the ‘#’. Your field name will then look like:

Recipient?#President#Vice President#Senator#Representative

Which in your form will look like:

Set the email address for the recipients

Enter a properly ordered, comma separated list of email addresses into the ‘Admin email addresses’. View the example:

In the dVector installation, there seems to be a small implementation issue. cformsII strips out single ‘\’s in the regular expression. To fix this problem simply place two ‘\’s instead of one in your regular expression. Unfortunately, every time you update settings, the ‘\’s are stripped. This means that if you use regular expressions in your form fields, you must double the slashes just before your last Update Settings.

Here are some regular expressions I use:

Telephone||^\([0-9]{3}\)\s?[0-9]{3}(-|\s)?[0-9]{4}$|^[0-9]{3}-?[0-9]{3}-?[0-9]{4}$

Zip Code||^[0-9]{5}([- /]?[0-9]{4})?$

Website||^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$

Name||^[a-zA-Z][a-zA-Z',\.\- ]*[a-zA-Z\.]$

The same regular expressions only with doubled slashes:

Telephone||^\\([0-9]{3}\\)\\s?[0-9]{3}(-|\\s)?[0-9]{4}$|^[0-9]{3}-?[0-9]{3}-?[0-9]{4}$

Zip Code||^[0-9]{5}([- /]?[0-9]{4})?$

Website||^([a-zA-Z0-9]([a-zA-Z0-9\\-]{0,61}[a-zA-Z0-9])?\\.)+[a-zA-Z]{2,6}$

Name||^[a-zA-Z][a-zA-Z',\\.\\- ]*[a-zA-Z\\.]$

This is a bit of an inconvenience but once you have set your forms, there is usually very little reason to change them.

While the use of regular expressions does not eliminate invalid data, it certainly does cut down on erroneous user input. The Regular Expression Library provides an excellent resource for those simply looking for regular expression recipes.