WooThemes

This tutorial was written by one our awesome forum ninjas - Kirstin Pauk.

Making radical changes to the design of Fresh news can be as simple as editing images, style.css and header.php. It’s important when planning to customize the header, that you decide what elements to keep. All elements except for the logo can be successfully placed elsewhere in your site so you’re not confined to keeping elements the same.

For this tutorial, we’re going to create a site based on holiday experiences, called ‘Wish you were here’.

As you can see, I decided to remove unwanted elements such as the rss links and categories which can be moved to the sidebar. I also decided to change the category dropdowns to page dropdowns. This tutorial allows you to pick out certain techniques if you don’t want to follow it literally.

Step 1

Make sure that you have the latest versions of wordpress and the Fresh news theme.

Step 2

To create a full width image as your background, use the guide below when designing the image. The width of the image can be any size, but remember to keep the main elements into 960px box in the middle (see the whitened area) and the logo and search box should be in the ‘header image’ section.

Save your image as bgr.jpg. For the logo, you could either make it a separate image same size as the logo in the fresh news theme or just keep it on the bgr.jpg. You won’t need to use the admin menu for you logo to appear and the area will still be linked to the home page just like the logo.

Step 3

Before we continue, we need to remove any unwanted coding from header.php. You can use either wordpress’ built in editor or a text editor.

Because in this tutorial we’re removing the page and rss links at the top, find and remove this coding:

	<div class="grid_12">
        <ul class="nav1">
            <li <?php if ( is_home() ) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
            <?php wp_list_pages('sort_column=menu_order&title_li=&depth=1'); ?>
        </ul>
	    <!--/nav1-->
	</div>
	<!-- end .grid_12 -->

	<div class="grid_4">
        <span class="subscribe">Subscribe:   <a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>">Posts</a>   |   <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a>   |   <a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=<?php $feedburner_id = get_option('woo_feedburner_id'); echo $feedburner_id; ?>" target="_blank">Email</a></span>
	</div>
	<!-- end .grid_4 -->

To remove the rss image from the navbar, find this code and remove it:

		<a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>"><img src="<?php bloginfo('template_directory'); ?>/images/ico-rss-trans.png" alt="RSS" /></a>
   </div><!--/rss -->

Finally, to change the navbar from categories to pages, find this coding:

	<ul id="nav" class="grid_15">
		<?php include(TEMPLATEPATH . '/includes/version.php'); ?>
		<?php wp_list_categories('title_li=&exclude=' . $ex_aside) ?>
		<li> </li>
	</ul>

and change it to the following:

<ul id="nav" class="grid_15">
			<?php include(TEMPLATEPATH . '/includes/version.php'); ?>
			<?php wp_list_pages('title_li=&exclude=' . $ex_aside) ?>
            <li> </li>
</ul>

You can exclude pages you don’t want in the navbar by changing the text in the brackets to the following:

		<?php wp_list_pages('exclude=17' ); ?>

Once you’ve edited header.php, save and upload (if necessary).

Step 04

Now upload your background image into the default folder (found in /styles/default/). Open up style.css (in the main theme directory) and change the following:

#top{
	clear: both;
	height: ADD IN YOUR TOP MENU HEIGHT;
	margin: 0 auto;
	padding: 7px 0 0 0;
	font-size:11px;
}

#header{
	height: 109px; - make sure you leave this as it!
}

Step 05

To finish you may want to have the image behind the nav menu duplicated in the actual drop downs. To do this, first save a section that can be repeated as nav.jpg, making sure it’s the same height as the header (the width can be anything). Upload into the /images folder (in the main directory).

Now open up default.css (located in the /styles folder) and change #nav command url to nav.jpg:

#nav li ul li { background: #FFFFFF url(../images/nav.jpg) repeat-x top; }

And that’s it!