How to Add a Header Image to the Simplicity WordPress Theme
24
By I get a lot of folks who want to add a header graphic to my Simplicity WordPress theme, so I figured it was time to just write a tutorial on it. It’s really pretty simple to do.
Step 1: Understand the Dimensions
The header of Simplicity is the wide, blue area at the top where you see the blog name and description. The width of the header is 940px wide. That means any header image you place there needs to be no wider than that. As for the height, well that doesn’t really matter. The header height will expand to fit.
Step 2: Upload Your Image
To upload your header image to your web host, I suggest you use an FTP program such as SmartFTP. FTP stand for File Transfer Protocol, and it basically allows you to transfer files between your home computer and a web server (i.e. your web hosting account). If you’ve never used an FTP program before, you’ll need to get the FTP login information from your webhost. Specifically, you’ll need the FTP url, the username and the password.
Once you have your FTP login info, go ahead and login. You’ll want to upload your header image to the following folder on your web hostiing account: /wp-content/themes/Simplicity10/images.
Step 3 – Add Your Image to the Theme
Next, we need to tell the theme to place your new header image into the header itself. To do that, you’ll need to modify your Stylesheet template. So, click the Presentation tab on your WordPress control panel. Then click the Theme Editor link on the subnav bar. Your stylesheet template should show up in the code box, but if for some reason it doesn’t, just click the Stylesheet link from the list of theme files on the right side of the page.
On the page that follows, you’ll see your stylesheet template. Scroll down just a bit until you see the following block of code:
#header {
clear: both;
padding: 25px 0;
margin: 0 auto;
background: #0066cc;
}Once you find it, change it to this:
#header {
clear: both;
padding: 0;
margin: 0 auto;
background: url(images/headerimagename.gif) top left no-repeat;
height: header image height goes here (e.g. 100px);
}Of course, you’ll want to change the name of the file from headerimagename.gif to whatever is the name of your actual file. Be sure to click the Update File button in the bottom right corner.
Step 4: Remove the Blog Name and Description from the Header
The last thing we have to do is remove the blog name and description from the header area. On the right side of your Theme Editor page, you will see a link named Header about half way down the list of files. Click it. Once you get to that page scroll down until your find this block of code:
<div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
<h1 class="blogtitle"><?php bloginfo('name'); ?></h1>
<p class="description"><?php bloginfo('description'); ?></p>
</div>Change it to this:
<div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
</div>Click Update File. And that’s all there is to it.
About the Author
Michael Pollock is the marketing and product development guy for Solostream. He's also a blogger, a web marketing trainer and an entrepreneur. When he's not evangelizing Solostream, he trains other solopreneurs on how to use the web to reach more people, earn more money and live a bigger life. Michael's Website.
Awesome, u made my life easy! Thanx for the theme too!
Wow I’ve been searching for an easy way to put my logo and picture at the top of my wordpress blog. And presto its done after a couple of days of frustration Micheal Thank you so much for your help..to your continued success..Alan
My pleasure Alan. Glad I could help.
Wow! Thanks for this!
Thanks for the info. Implemented it on my site without a hassle.
I tried to change my header and fortunately I succeeded!
Wow! Thanks for this!
[...] Originally Posted by crinthia does anyone know how to add images to your headings? Hey, try this – How to Add a Header Image to the Simplicity WordPress Theme: WordPress Themes for Small Business; Wo… [...]
Great explanation for new bloggers.
Hi everyone,
If you are looking for support, please visit our forum at http://www.solostream.com/forum/ for immediate answers to your support questions. Otherwise, there will be a delay in answering your support-related comment if left here.
If this doesn’t apply to you, feel free to comment!
Alistair
Hi Joe,
It’s basically a general fix, though the code you modify and delete will likely be different. You can always try it and see what happens. If things don’t work out right, go to the forum at http://www.solostream.com/forum/ for help.
Is this a general fix to adding a header image? or specific to simplicity? I like the theme its a clean easy read.
I got another post regarding this. It can be used to add image header to any wordpress theme. You won’t regret reading it.
http://opensourcethefuture.blog.co.in/2008/10/10/tweaking-your-blog/
It was realy easy to setup a new header in the theme, thanks for the tips
Hey there thanks for sharing this :) I never thought that javascript could be used to convert the whole header container into a clickable link… brilliant!
Oh and on a sidenote, it’s better not to remove the blog title and the description as search engines cannot read text from images. It’s possible to keep them without interferring the layout:
Just my 2 cents though!
Thank you thank you!!! I am so new to PHP that a little help goes a long way!! I also used your helpful tutorial on setting up WordPress.org on my server!!! It was so straight forward.
Thanks, tried this on another theme and worked great!
This tutorial is easy to follow and clear, as are all of Michael’s instructional media. I was able to insert my image correctly the first time. Remember to refresh the page; you might be surprised that you were successful!
Great help. Also the most professional-looking theme around. It’s a beauty!
Thanks for your creative Mr. Michael
I am having trouble with adding my image header. I have followed everything laid out by Michael step by step and now my image header has disappeared. I now want to restore it to the default header image and I can’t.
Suk
Just starting to create my blog. Great info just what I was looking for.
That was so simple, thank you I think this will be very helpful to lots of people. I love the theme
Fantastic, Michael, thanks so much!