How to Add a Header Image to the Simplicity WordPress Theme

Last updated on

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 (Author Profile)

Solostream provides Premium WordPress themes that are professional and easy to use. Templates suitable for personal or business blogs, websites and online magazines.

Comments (16)

Trackback URL | Comments RSS Feed

  1. Thanks for this post, Michael. I was having trouble doing this since yesterday. Good thing I bumped in to your blog.

  2. sunil says:

    nice now i will use header image in my blog for a change :)

  3. Chris says:

    Oddly enough I can’t get it work. Followed the instructions to the letter but alas, no logo. Just getting started with WP (with a book). put the logo (logo.gif & logo.jpg) in the images-folder, modifed and saved the code changes bt all I see is a blue – empty – banner. Is there something to be taken into account regarding the logo image?

    kind regards,
    chris

  4. shreyas says:

    Awesome, u made my life easy! Thanx for the theme too!

  5. Alan Simmons says:

    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

  6. Ed says:

    Thanks for the info. Implemented it on my site without a hassle.

  7. Nitin says:

    I tried to change my header and fortunately I succeeded!

  8. KC says:

    Wow! Thanks for this!

  9. Epilasyon says:

    Great explanation for new bloggers.

  10. Alistair Barnett says:

    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

  11. Alistair Barnett says:

    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.

  12. Joe Crawford says:

    Is this a general fix to adding a header image? or specific to simplicity? I like the theme its a clean easy read.

  13. 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/

Leave a Reply

No Theme Support Questions Please

We will not respond to theme support questions submitted via this form.. If you've purchased one of our themes or a Premium Themes Membership, please visit the Solostream Support Forum for support questions. To do so, login to the Solostream Member's Area, and click the link for the Solostream Support Forum.