Johnny Saturn

Web Wednesday No. 4

Hi, Folk!

This week, I’m going to touch on the subject of headers and footers.  These are among the easier things to modify in WordPress.

Once you’ve signed into WordPress and have arrived at your Dashboard, go to Design, then Theme Editor.  On the right hand column, under Templates, select Header.

Under <div id=”header”>, you can place any graphics that you want displayed at the top of the site.  In my own case, I put a typical html table with my logo, a secondary logo, and language for the Ad-Minister plugin.  It looks something like this:

<div id=”header”>

<table width=”974″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”272″ height=”95″><a href=”Your URL”><img src=”You logo graphic” /></a>

<h1><a href=”<?php echo get_settings(‘home’); ?>”><?php bloginfo(‘name’); ?></a></h1>

<div class=”description”><?php bloginfo(‘description’); ?></div>

</td>

</td><td width=”234″>

<img src=”My second graphic”/>

</td>

 <td width=”468″><My language for Ad-Minister, or whatever type of graphic or banner tool you wish, such as a project wonderful advert>

 </tr>

</table>

</div>

The dimensions above are set for my site, you are more than welcome to modify them to fit your site’s needs.

Next up is the menu that is above your comic.  As it stands, the menu is set to repeat the menu on the side column, which is may be OK for you as is.  For me it wasn’t because I’ve got a lot of content on my site, and I could stand all the sub-pages and sub-sub-pages messing up my navigation bar and layout as people move about the site.  That’s what will happen if you leave it.  So, my best alternative was to pull all that “Echo function” type language out. 

The menu is underneath the header, and is labeled <div id=”menu”>.  In my case, the best approach was to replace the automatic echo function language with a simple table and html links of my own creation.

<div id=”menu”>

<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

</tr>

</table>          

</div>

With this arrangement, you can put in as many or as few links as you wish and retain control over it.

What if you don’t like the size relationships of your header elements?  Some bars are too tall, or not wide enough, or whatever?  To change this about the header, you modify your Stylesheet, not the Header file. This too is accessed via Design and then Theme Editor, this time choosing Stylesheet.  The part of this document that covers your header is under /* THE HEADER */, while the part that covers your Navigation Bar is under /* THE MENU */ and then #menubar.

Before you begin altering your CSS code in the Stylesheet doc, make sure you have backed up your database and perhaps saved a copy of the site onto your hard drive.  It’s all too easy to screw up your site if you don’t know what you are doing.  Even if you are well used to CSS, you are still playing with code that someone else wrote, and mishaps can happen. 

Well, I’ve already written more than I intended, and I didn’t even get to footers.  There’s still a lot of fun stuff on the way, and I’ll get to that in future columns.

Scott.