How to Change the Header Image or Photo of Your Wordpress Theme
Posted on | January 19, 2009 by carolyn
In response to a request for help in the comments for my Beginner’s Guide to Wordpress post, I created this quick reply on how to change the default photo or image in your Wordpress theme. Unfortunately, I discovered I couldn’t use all of my formatting in the comments section, so here’s the brief version. I’ll add some screen captures later.
There are a few ways to change your Wordpress theme images, depending upon your preferences.
To change a Wordpress theme header photograph, you have to know first if the photograph is part of a CSS tag background or if it is an image tag in the HTML.
First, look at the HTML code either by viewing the page source from your browser or by opening the header.php template in your theme (/yourwordpresspath/wp-content/theme/yourtheme [substituting your wordpress server path for /yourwordpresspaath/ and the name of the theme you are using for /yourtheme/].
Now look for a div tag labeled something like “header” or “header_img” and is followed by some HTML that looks something like this:
<img src="/images/header_1.jpg" width="970" height="140" alt=" header image 1" title=" header image 1" />
The specific attributes will probably be different (unless you are using the Cutline 3-Column-Split-11 theme by Chris Pearson), but basically you are looking for an actual tag that displays the header photo.
How To Change Your Wordpress Theme Photo or Image If It Is An <img/>Tag
If you find that tag, you can create another image the same width and height and upload it to the same directory as the current image. Note: If you hate mucking with the HTML, you should give it the same name as the current header photo and upload it to the same directory. If you are a cautious bloke (which I am), first re-name the current header image to something like “original-header_1.jpg” before uploading your new “header_1.jpg” (again, assuming this is the name of the header photo in your theme template.)
If you don’t find the tag in your theme header.php template, it means that your image is referenced in a CSS background.
How to Change Your Wordpress Theme Header Photo or Image If It’s Part of a CSS Tag
Look at your HTML code and note what ID tags are in your header code For example,
<div id="headerimg">
<div id="headertxt">
<h1><a href="<?php echo get_option('home'); ? rel="nofollow">/"><?php bloginfo('name'); ?></a></h1>
...
</div>
</div>
or
<div id="header" >
<h1 ><a href="<?php bloginfo('url'); ? rel="nofollow" >" ><?php bloginfo('name'); ? ></a ></h1 >
<p > >strong > <?php bloginfo('description'); ? > </strong > <br/> </p >
</div >
You almost always are looking for something with the ID “header” or “masthead”.
Open your theme’s style.css file (if your theme files are writeable, you can do this in Wordpress Appearances | Editor; otherwise, open it in your web favorite web editor. I’m partial to BBedit or CSSEdit).
Find the CSS tag that matches your HTML code. For example, in the first example above, it is “id=”headerimg” so I find #headerimg:
#headerimg {
height: 180px;
width: 517px;
background:url('images/mainbannerimage.gif');
}
Now, notice that the line: background:url(‘images/mainbannerimage.gif’);. This is the line that specifies that the background for this division is the mainbannerimage.gif found at the URL the-path-to-your-wp-content-themes-theme-name/images. Unless a full URL path is specified, the CSS will start with the directory in which it resides. So you now know where the image you want to replace is stored: your-Wordpress-path/wp-content/themes/your-theme/images.
Download the image and make your new image the same width and height. Again, if you hate mucking with the CSS, you should give it the same name as the current header photo and upload it to the same directory. Keep a copy of the original image on your system in case something goes wrong with your new image.
If creating and modifying images and photos for the web is a bit out of your area of expertise, you should be able to find someone who can do it for you either by asking a friend, bartering services, or hiring someone. You can always put it up on one of the freelance sites like freelanceswitch.com or elance.com or 99designs.com.
I hope that helps and make sense for you. If you find the information useful, please spread the word. I’ll be adding more Wordpress site administration tips in February.
Carolyn,
Thank you for this information I’ve just thought about this on the wordpress site I’m going to add to my site. Many thanks.
I do have an issue that I haven’t resolved on another site that we are just putting up. When I add static pages I get the pages as menu items at the header. I need to know if there is an easy way to control pages that are displayed, it is likely that we will have 12 to 20 static pages and I do not need all of them as top level menu items.
Code, plugin, settings? So far I haven’t jumped to far into it, wanted to know if you had a simple straight forward solution as you give here. Oh, and in your intro to WP 2.7. Excellent presentation.
Thanks
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.
Carolyn,
Many Thanks,
I discovered several plugins that make the navagation menus easy to handle. The one I’m working with on my wifes site, youryogasource.com is WP Multi-level Navigation Plugin. Adding n a simple line of code to the header file and then managing the menus with the plug in. It has much more than needed and was a easy solution.
I think we can still clean it up a bit in the next round of content additions.
Also I upgraded into a premium theme for to use on two other sites and have learned a lot about what you talk about. That theme has menu control built into it and should make it easier to simplify navagation.
We decided on the WP platform as a CMS and to build the site, not necessarily as a Blog only. The static pages are ones we wanted as intro to the site themes. Posts in related categories will be used for new material as you suggest.
If you write more on WP, I’d like to see optimazation of the settings category.
Look forward to more of your info.
Brad,
Funny you should mention optimization of the settings…that’s exactly what I’m working on for my Intermedia Wordpress class. I’m also hoping to start doing the tutorials as videos and slideshows, which many people prefer. It’s a matter of time to find a screen recorder program I like.
It sounds like you are doing great things. I am a fan of premium themes because they offer so much more in the way of customization without coding for folks who don’t like hacking code. I consider them bargains for the price!
Thanks for your comments and suggestions.
Great post, Caroline. Thank you.
I’ve replaced the header image with a single image of the same size but would prefer to replace the header image with three or four images to run across the top to fill the same space.
Would you know how to do this though editing of the html code in the header.php?
Thanks.
Best,
Dan
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"/>
Brad,
I loved your post and attempted to do everything as you layed out for changing the image when it is a CSS tag. However, after doing it all like you posted, it still did not work. Here is what the style.css code shows:
#masthead {
position: relative;
top: 0px;
background: url(‘images/masthead.jpg’);
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;
}
I found that I could actually delete the file called “masthead.jpg” altogether from the images folder within the theme (via ftp folder) … but that didn’t change it either. This leaves me to believe that it is somehow pulling the image from a different url than what the code shows above. Could that be possible?
Thanks!
Mike
Mike,
Thanks for reading and writing. Hmmm, if you are deleting the file named “masthead.jpg” in
yourdomainname/wp-content/themes/the-name-of-your-theme/images/, you should be getting rid of the image in your<div id="masthead">section. There are a couple of possibilities and a test you can run.The hard code way to solve the problem is to remove the background url call entirely. You can do this by either deleting the line from the CSS tag or you can test it by commenting it. To comment out a line of code in CSS, you want to wrap it in /* and */ like this:
#masthead {
position: relative;
top: 0px;
/* background: url(’images/masthead.jpg’); now this line of code will be ignored */
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;
}
Or, as I said, you can simply delete that line from your CSS. If you do that and you still see your background image, it means one of 2 things:
1. The first thing to check is to make absolutely certain you are changing the correct theme and the correct style sheet. (Some themes have more than 1 style sheet and the last style sheet loaded tops the first one. I have run across a couple of themes where they load or add custom styling after linking the standard style.css.) I’ve done this. I’ve worked hard at editing a theme and got very frustrated when my changes didn’t appear to have any affect on the browser display and then discovered I had been working on the wrong style sheet.
2. If you are working on the correct style sheet, then it means that the page has been cached. If you have installed and activated the plugin WP Super Cache you won’t see any changes to your theme. I had a student do this in my last class on essential Wordpress SEO. We had been learning how to add new plugins and discussing using WP Super Cache if you ran into a load speed problem with your site — so naturally, she’d installed it while we were looking at other plugins. Since the next thing we looked at was editing our style sheets in the Wordpress Theme Editor, it caused a small problem. The problem was solved when she deactivated WP Super Cache, cleared her browser cache and re-loaded the page.
So remove the background line in the correct css, make certain you have cleared your browser cache and then reload the page.
A great way to troubleshoot whether you are working on the wrong style sheet or have a cached page problem, is to change the color of you css body tag to something like
color: #ff0000;— which will make all of your standard text red — and add some new text to your index.php or footer.php template like “IF YOU CAN READ THIS THEN THE PAGE IS NOT CACHED!”I hope this helps solve your problem and thanks again for visiting, Mike!
Thanks alot for this you just helped me out change the header of theme. thanks alot.
Hi Carolyn
Thanks for you very helpful tips and informative answers to questions. I am in the very early stages of building my WordPress blog and with your help I was successful in replacing the default header with my own. The problem I now face is that my new header contains my blog title, so I want to hide the default blog title and tag line from display. (they now overlap) Is there a “coding” way to do that other than blanking them out in my general settings?
Your advice would be most helpful
Thank you
Warren
Warren, thanks for reading my posts and for asking the question. What I’ve done to answer you is create a new post. You can find it here: http://carolynecooper.com/web-dev/how-to-get-rid-of-the-blog-title-and-description-in-the-wordpress-header.
I hope that helps and don’t hesitate to ask if you need more help.
Anyone where I can start my own blog.
Jay, there’s always Wordpress.com (remember .com is for creating your own blog) or Google’s Blogspot. Also, Live Journal is still alive and I know a number of bloggers have stayed with them.