How to Change the Header Image or Photo of Your Wordpress Theme

Brad,

Glad to be of help. It seems there I’m writing more and more about Wordpress and there are several new developments, so I’m going to be doing some more posts later this week. The new Wordpress.tv site is very exciting and I hope helpful to all of us using Wordpress.

Regarding your static pages in the header navigation, these are controlled by a chuck of HTML and PHP code. You can remove the Wordpress loop and create static links to any specific pages you wish, for example, Home and Contact Us and then add the page listing loop in your sidebar navigation with your categories. If you are using the sidebar widgets, you will see one for Pages that will automatically add the list of pages to the sidebar. In your current header.php template you are looking for a chunk of code similar to this;

< ?php wp_list_pages('title_li='); ?>

The operative bit to search for is the “wp_list_pages”. What this code does is run a loop that reads the title of each Wordpress page you’ve created and writes it as a list item. How the list item looks is controlled by your style sheet. Yes, there are ways to tell the automatic loop to exclude specific pages, but that is probably more complex coding than you want to so right now. I use the technique to exclude things like “Thank you for shopping” and “You’re request did not complete” an so forth. In most cases, people only wish to have a few static pages listed like “Home”, “Contact Us” and “About Us.”

Which leads me to my next point. Why are you needing so many static pages? Usually, when someone tells me they have a lot of static pages, I find that many of these pages should actually be posts that are aggregated into a category. For example, I worked with one person who had been thinking she needed all kinds of static pages for client forms, client worksheets, instructions for specific products, terms & conditions, legal disclaimers, company history and so forth. By putting the client forms and worksheets into a category called “Documents” and moving all the legal, cya, history, staff bios and such into a category labeled “About Us”, the client was able to make her navigation cleaner, easier to follow and it allowed her a great deal more flexibility in adding new material. Is there some way you can collect much of these static pages into a category and convert them into posts?

If you find yourself down to just 1 or 2 pages that you want excluded from your page navigation, let me know and I’ll walk you through how you can exclude a page from your wp_list_pages loop.

And thanks again for visiting the site and the kind words about the Beginner’s Guide to Wordpress 2.7. Please check back soon for the new posts and please spread the word to others.

Reply

Dan,

Thanks for the kinds words. There are several ways of replacing a single image with multiple images depending upon the actual header.php layout and code. The easiest is to wrap the images in a tag that defines in the CSS code the length, margins, padding, borders and so forth for the space in which the images are being placed and then placing multiple images. For example,


< div id="header">
<img src="image1" alt="" /><img src="image2" alt="" /><img src="image3" alt="" /><img src="image4" alt="" />
< div id="header"/>


You might choose to specify the width of each image to speed up loading but make certain the total widths add up to nothing larger than the maximum width of your current image.

The CSS might look something like this:
#header {
width: 760px;
height: 151 px;
padding: 0;
}

#header img {
margin: 0;
padding: 0;
border: none;
}

I took a look at your current site and did find a problem with your HTML, however. Your header tag includes the closing tag attribute. It shouldn’t do this. Basically, you are opening and closing your header division with nothing in between. This is treating it like a singleton tag. A singleton tag is an HTML tag that opens and closes in a single line. Very few tags should do this. The two most common are the break tag <br /> and the image tag <img />.

Right now the code looks like this:


< div id="header"/>
<img id="frontphoto" height="151" width="760" alt="" src="http://youngandfoodish.com/wp-content/themes/wp-andreas01/img/finn.jpg"/>


It should look like this:

< div id="header">
<img id="frontphoto" height="151" width="760" alt="" src="http://youngandfoodish.com/wp-content/themes/wp-andreas01/img/finn.jpg"/>
< div id="header"/>


Reply