Build your utopia

    Adding a Header Image to your WordPress Site

    If you want to put a header image on your WordPress site, there are a number of ways you can do it and a number of tutorials on the web. It’s such a common question though, I’ll let you in on a really easy way to do it.

    If your blog already has a small image (maybe it came with one in your theme), you just create a new header in something like Photoshop, and put the new image in the appropriate image folder in your hosting. Deleting or rename the old image file, and call your new image the same name as the old one. You can also upload your image, but change just the filename in the style.css file.

    Often a theme comes with just a text title, that you want to replace with a header. This is more often the case, so here’s an easy way to do it.

    1) create a header as close to the right size as you can, and save it as a .gif, .jpg, or .png.

    2) open up any post in your blog.

    3) insert your header image into the post. don’t worry, we’re not saving the post, so it can go anywhere. sometimes i make a ‘draft’ post just for situations like this. by uploading it, we are putting that image in your hosting.

    4) grab a corner and slightly resize the image, bigger or smaller. This adds an image size line of code to the image, which can be useful later.

    5) click on the image, and make it a link, back to your home page. get it to open in the same window. at this stage i usually center the image on the page, also.

    6) ok, switch to HTML view. Copy ALL the code that has to do with that image – link, image title, image location, and image size.

    7) open up the header.php file and look for the line of code that controls the printing of the name of the blog in the header. I just do a search for “name”. There is usually a similar line after that for “description”.

    8 ) you can delete that line if you’re feeling confident, however it’s better if you “comment out” the line. do a simple google search if you don’t know how to comment out lines of code (it’s easy).

    9) just before or after this commented out code, paste in your image file code from your post. Hit save.

    10) open up a NEW tab or window, and see the results (opening up a new window lets you easily change windows and correct things if you’ve made a mistake).

    Look ok?

    If it’s too big or small, remember that you should have some numbers in the code controlling its size. Play with these numbers until you get the look you are after. Adding spaces around it, and line breaks before or after, should be enough to get the exact look you need.

    If it looks good in Firefox, don’t forget to check in browsers others might be using too – like Safari, Opera, Chrome, Internet Explorer (yuck!), etc.

    This same basic technique can be used for putting images (such as ads) in your widgets, or just about anywhere you want an ad or graphic to appear.

    Any questions?

    Leave a Reply