How to turn your wordpress header-image into a link
Feb 16th, 2009 by Jane Blogs
Too often, the choice of basic fonts available can limit the look of your blog.
And by using an image for your header, you can create some wonderful effects.
The most frustrating part with WordPress blogs is how to do that and still have your header as a ‘clickable’ link to the home page of your blog.
Well, here we go.
1. Open your header.php file
Whether you do this in wordpress through your theme editor, or make changes and upload the altered copy is up to you.
Here’s a how-to in case you’re not sure where to find the information.
2. Find the right part of the code
Scroll down through the file until you find the <body> tag and it will be just under there.
It should look something like this:
3. Replace the old code with the new & save
Replace everything from <div id=”header”> to </div> with the following:
<div id="header">
<a href="<?php bloginfo('url'); ?>">
<img src="header image url" alt="<?php bloginfo('name'); ?>" />
</a>
</div>
4. Edit your stylesheet too
Open style.css and find the section that refers to the header:
#header {
Underneath, there is a line describing the colour of the header background:
background: #hexcode
or
background: colourname
Replace that line with this:
background: url(your header image url) no-repeat;
Save style.css.
And now you should have a clickable header image on your blog. Tada!
Problems still? If you’re having any trouble doing this, you can always email me or check out this page on the wordpress site.
Related posts:
