How to Add a Header Image to the Simplicity WordPress Theme

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.