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.

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.