How To: Use A Header Image in Your WordPress Theme

Occasionally you will find a WordPress theme that you like, but it does not allow use of a logo or graphic in place of the default text link. You might want to jazz up the theme, or throw on your company’s logo.

header with only text

This is a relatively easy problem to fix, but you have to get your hands a bit dirty and change some code. I’ll try to make this as simple as possible, after the jump!

Go to your WordPress Administration panel and select ‘Presentation’, and then select ‘Theme Editor’ from the submenu. On the right side of the editor, select ‘Header’, so we can easily edit the code in your theme’s header.php file.

theme editor menu

Familiarize yourself with this little interface, it is rather nifty for quick code changes.

Now see if you can find some code that looks like this:

<h2><a href=”<?php echo get_settings(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h2>
<h3><?php bloginfo(‘description’); ?></h3>

This code adds the text for your WordPress blog’s name and description (or tagline), along with a link to your homepage. Remove this code (you might want to copy and paste this to a txt file on your computer, just in case something goes haywire).

Now add in the following code, putting the url to your image and the name of your site in the code:

<div align=”center”><a href=”<?php echo get_settings(‘home’); ?>/”><img src=”http://YOURIMAGE” border=”0″ alt=”Your Site Name” /></a></div>

A recommendation: if your logo will be on a colored background (like the example above), you might want to make the background on your image transparent, so the image will match the background color. Just remember, save the file in a format that keeps the transparency. I usually save as .png, but change the mode to indexed, otherwise the transparency will not display correctly in Internet Explorer (lack of full PNG support, yet another reason to use Firefox).

I hope this helps out those of you who find a great theme, but what to implement an image in the header. If you need any assistance, post in the comments and I will try to help out.

2 thoughts on “How To: Use A Header Image in Your WordPress Theme”

  1. i was surfing to search for an easy way to change the way my header looked in my redoable installion over at my blog …
    thanks for the info here … now i have enough confidence to try it on my own … hehe …
    good article … thanks …
    appreciated …

  2. Subcorpus,
    Thanks, I liked your site and your writing style. Let me know if you are able to get Redoable to work, I have quite a bit of experience with that particular theme.

Comments are closed.