Free Wordpress Help | Wordpress Theme Customizations - Header Images With Hyperlinks

Ask me a question at the Wordpress Ninja Forum

 

Wordpress Theme Customizations - Header Images With Hyperlinks

Posted on August 14, 2008
Filed Under Guides, Wordpress Solutions |

I’ve seen a lot of requests from people wanting to know how to customize the header of the page, usually wanting to know how to add an image in place of the site title text. Furthermore, a common request is how to make the image ‘clickable’ i.e. a built-in hyperlink that returns the user to the main home page of the site when they click on any part of the image? Luckily it is rather easy to do ;)

First thing we need to do is find out the max width we have to play with for our image. Start by editing the style.css file for the theme which is located in /wp-content/themes/<your theme name>/.

Find the section called #container or #page or if you can’t find anything like that then search for “width:” - you are looking for a decent sized page width - should be over 800px (800 pixels) usually. This page width is the max width you can use for you image if you want to keep it uniform to the page width. You may want the image to stretch across the whole page width in some cases, which is fine, though remember not all users have the same resolution, so if you are going to do that then the best tactic may be to use a repeating gradient texture of something that you can stretch to 100% of the page - that’s a different lesson though.

So, now we know the max width, decide on the size you would like your image to be then create your image (based on the width you chose) in your favorite image application. I have found Photoshop is by far the best, but it is pricey….’Gimp’ is an open source image editing program that is also very good - and it is free! Upload the image to your /wp-content/themes/<your theme name>/images/ folder - but remember to have saved your image in the best format. The following are some very handy hints i came up with for dealing with images, particularly header images:

  • .jpg files have very good compression - but you need to get the size as low as possible without sacrificing too much quality in the image. This is almost an art form in itself, but remember you must keep the overall page loading time as low as possible so keep your image sizes as low as possible! Also remember .jpg cannot retain transparency (alpha)
  • .gif has even better compression and can retain transparency, but sometimes much less quality compared to .jpg - i have also noticed that some browsers (ie6 suffers from this sometimes) don’t blend the edges around a transparent .gif very well, even if others like Mozilla Firefox display perfectly. Don’t forget that you need your theme to look great on as many common browsers as possible. IE6 is still very common.
  • .png files retain transparency but are very large in size - use these sparingly and carefully.
  • .bmp - forget it - too big

Next we need to remove the title text that Wordpress themes usually have as default, which is taken from the site’s ‘Blog Title’ parameter in the WP-Admin (Settings) console. So in your theme folder (same location as style.css) you will find header.php - edit it in your favorite code editor. Look for this code:

<a href="<?php echo get_settings('home'); ?>">

This is basically a dynamic variable that gets the URL of your home page from your admin config. and displays it as clickable text - a hyperlink back to your homepage. Finding this bit of code shows us which part of the style.css file we need to edit to put our image in. Find the first <div> tag above this code - it will probably look something like this:

<div id="header_left">

or simply

<div id="header">

The name in quotes is the corresponding section name in the style.css file. So search your style.css for that phrase in the quotes (without the quotes obviously ;) ). Using the first example above, the CSS section would look something like this (every theme is different so i can’t tell you exactly what you will have in your theme - but if you are stuck let me know in the forum and i can advise you):

#header {
width: 100%;
background: #000;
text-decoration: none;
height: 100%;
}

Change it to be like this (remember to substitute in your own height in pixels and image filename):

#header {
background: url(images/myimage.jpg) no-repeat;text-decoration: none;
height: 200px;
width: 100%;
}

If later on you find your image width is being cut off for some reason then you may need to edit the width to be your exact image width size e.g. width: 960px;

Now to remove that title text and make the image a clickable hyperlink back to your homepage. Go back to the header.php file which you were working on and modify the <div> section you found above e.g. <div id=”header”> to be like this:

<div id="header" onclick="location.href='http://www.myblog.com';" style="cursor: pointer;">

Of course, my code is just an example - you would have your existing id there instead of “header” and you would change your url to be your homepage. Lastly, delete this old line of code that we found earlier under that <div> section:

<a href="<?php echo get_settings('home'); ?>">

Save your header.php and style.css and upload to your host, overwriting your old files of course. Only do this if you have backups of those files just in case something goes wrong and you need to restore to your old config. Any questions? Feel free to post any questions as responses to this post or in the forum and i will gladly help you out with any issues.

UPDATE:

Hi all, i have just noticed that in some browsers this may not have the desired effect (Latest firefox for instance seems to not always work correctly)…in which case you can try the following code instead - of course you need to change the ‘dummy’ example bits for your own particular blog (this could be done a bit nicer in CSS but i just whipped this up for speediness sake) ;-) :

<div class="Header">
<a href="http://www.myblogurl.com" title="My Blog Title"><img src="http://www.myblogurl.com/wp-content/themes/myblogtheme/images/mylogo.png" style="background-repeat:no-repeat ; background-position:bottom left ; padding-top:15px"></a> </div>

You can adjust the style parameters as required - for example, you can change the background-position to be center, left, right etc and change the padding parameters as well if required to get the image positioned exactly where you want it.  Also, note that the image source path needs to be the FULL path to where your header image resides.

Comments

30 Responses to “Wordpress Theme Customizations - Header Images With Hyperlinks”

  1. Rachel on August 16th, 2008 1:56 am

    Hey Paul,

    I saw some of your comments on the Prosense Blue Wordpress Theme page, and thought I’d try contacting you… hopefully you’d be interested…

    I recently hired someone to transfer over old content onto that Wordpress theme. For some reason, we can’t get the AdSense to show up.

    I checked out the comments on that thread, but none of them worked for me.

    If you could provide me with some help, I’d gladly pay you.

    Thank you VERY much for your time.

    Best,
    Rachel

  2. WPNinja on August 16th, 2008 4:50 am

    Rachel,

    will gladly have a look. No payment necessary. Email me your sidebar.php file to wpninja@wordpressninja.com and i’ll be able to sort it out for you. Also let me know your blog URL and your Adsense publisher ID. Make sure you have created URL tracking for your blog site. Do you want Adsense in all the same locations as the standard Prosense theme or only in the sidebar?

    regards,

    Paul.

  3. Chris on September 4th, 2008 6:00 pm

    Wow, thanks so much for this article, I’ve been looking everywhere for this information.

    I have a related problem, though: I have an image as a background to my header already, and I was wondering if it would be possible to replace the blog title with a clickable image, as opposed to text. I also want to do this with the pages links that are found in the header.

    If you want to see where I’m at right now, my temporary worldpress url is “www.chrismerrittmusic.com/blog/”.

    Thanks for your help. I’m brand new to wordpress, so I’m learning as I go!

    Chris

  4. WPNinja on September 6th, 2008 1:02 am

    Chris,

    great looking site there! Really love the header image and the ’scribbled’ text for the page links - seems like you got that part working so you can have those page links with images that are clickable.

    For the header image im guessing you want the main title ‘Pixie and the bear’ to be clickable? If so, the best way would be to have a transparent dummy .gif image absolutely positioned where that text is and use z-depth to place it on the top layer above the background image. Then you would make that .gif image clickable.

    Let me see if i can dig up some code for you and get back to you.

    Also, imo the text on your site was a little hard to read, especially the cyan color. Maybe you could change the color, boldness or font to make it a bit easier to read…anyway, just a suggestion, i do love the look of the site though, well done so far!

    Paul.

  5. Bob on October 5th, 2008 9:02 pm

    A newbie so details are important… my default header image is only an inch in height (ProSense Theme) and not the image I want to keep. I can replace the header_footer_img.jpg and I can see my new image… so far so good. But any changes I make to the style.css sheet, to increase the height to 3X the size, fail. Meaning I see no changes when I click on “View Site” in WordPress.
    So, I cleared my changes and tried what you suggested
    #header {
    background: url(images/banner1.jpeg) no-repeat;text-decoration: none;
    height: 960px;
    width: 100%;
    but again when selecting “View Site” I see no changes. In fact I can comment out all of the sytle.css and “View Site” still shows me the site. I’ve cleared my cache as someone suggested but no luck…. I’m stuck!!!! How do I test style.css changes????

  6. Bob on October 6th, 2008 5:37 pm

    Nevermind, I figured it out.

  7. Sara-Unblogindue on November 11th, 2008 11:54 am

    Hi,
    I’m a wordpress user and I can tweak the code fine enough, but now I can’t finish one project.
    I built an Image Map for my header. If you go to my web site you see that the header has a black bar in it. Well, i wrote some words on it and i’d love to make them clickable to let my users go to several pages.
    Well, the image is ok, the HTML is ready but… Where the H**L should I put the HTML code in my files?
    I’m searching for the solutions since hours, but nothing good for me.
    Can you please kindly help me?
    My theme is NewYorker 3.0 and my website is http://www.unblogindue.it
    Please help me!
    Thanks in advance,
    Sara

  8. lydia on December 20th, 2008 9:11 am

    Hi Paul,

    I tried to change the default header to one that I have. I followed your instructions but still couldn’t manage to upload it correctly. Take a look at my site and tell me what I did wrong. Need some help please.

    Thanks

    Lydia

  9. Robert on January 12th, 2009 8:21 pm

    Wow, I am glad I happened upon your page I am trying to find out out to do a css hyperlink with image rollerover, and your site had the code for the hyperlink part, been looking about 12 hours. Got the code to work thanks to you. Nice work appreciate the code.
    Have a prosperous 2009.
    Drop by for a visit
    The Forex Miracle
    Robert

  10. Genesis on February 23rd, 2009 3:35 pm

    Wow. Thank you SO much! I`ve been struggling with this for a long time and since my theme has “banner”, I wasn`t sure how to put the code in. When I did, it didn`t work . . . until I read your advice on deleting the extra line. :P So simple and now my blog works. Thank you!

  11. WPNinja on February 23rd, 2009 11:14 pm

    No problem, Genesis. Glad it helped you out :)

  12. bdw on March 5th, 2009 4:14 am

    I think I have a similar problem as bob above. I followed your instructions and was able to get the title and description to disappear but the header never changes. If fact after all the changes everything looks exactly the same except for no title. I added a line with my custom logo.jpg but I never see it. I’m a newbie so this is most likely user error but I was hoping you might have a suggestion. Thanks for this valuable resource you provide.

  13. WPNinja on March 6th, 2009 5:41 am

    bdw,

    check that you have completed these things:

    - did you upload the logo.jpg to the server? Is the url of the image correct in the code? You can test by putting the full address in your browser including the filename of the image and it should properly display the image
    - did you update the style.css file with the code as i provided (with correct url) and save it - uploading to the server, OVERWRITING the old one?
    - did you remove the line of code i mentioned in the post? i.e. “>

  14. newbie on March 22nd, 2009 7:16 am

    Hi

    I’m experiencing the exact same problem as Bob. Any changes I make to the style.css file just doesnt change anything on the website. Could Bob or anyone please advise on how to solve this problem?

    Thanks.

  15. Dex on March 22nd, 2009 12:14 pm

    wonderful, thanks for the help it so helps the site out now

  16. Tina on April 2nd, 2009 5:14 pm

    Love this article. Just starting to learn code and have wanted to change the header image on my blog/website (I’m trying to use WP as a CMS). So far so good. With this article I’m sure I’ll be able to figure it out.

    Thank you thank you thank you….

    PS: I found this plugin (looks like code to me) about resizing your header. Do you think it would work? http://gist.github.com/86016

    PPS: My site’s not near finished yet. But it will be soon.

  17. WPNinja on April 6th, 2009 4:02 am

    Hi Tina,

    site looks nice, love the bio pic there. Glad to be of some help. Well, that plugin is very simple…you could easily change the size of the picture by either making it smaller in a paint program (such as Photoshop) or by explicitly defining the size in your style.css file.

  18. jessica brothers on April 8th, 2009 5:19 pm

    thank you very much for the great tutorial information. It has helped immensely!

  19. Peter Pjotr on April 17th, 2009 10:23 am

    Hi Paul,
    i read your instructions about the header replacing, but i have a question about the header area… i hope u can help me :)

    so, i have to creat a wp blog site, and i can manipulate almost things in the styles, and other things in the themes… but my big problem:
    i would like replace the header (not only the image, then the all of header-area), and put into that place an image with clickable many (7 or 8) links - like imap (?)… and this hyperlinks are redirect me (and the visitors too - of course)to that posts in the blogsite what i want…

    i hope u can see my problem excatly :)

    thanks for help

    peter

  20. chickle on May 28th, 2009 7:05 pm

    Hi, I am tring to make only the text that I want to add to the header…a link. I followed the above directions and can make the entire image link…but I only want text to hyperlink.

    Any suggestions?

  21. Juliet on May 30th, 2009 4:24 am

    Hi Paul,

    I am desperately seeking resolution to the issue mentioned above - hyperlinking my custom header to return all pages to my home page.

    I am using WordPress, hosted by Yahoo, and my template is the WordPress default. I have tried following your steps above - by the way, they are the most thorough I’ve come across! This is clearly a problem with WordPress that so many users are struggling to tweak. Anyway, I end up with no header on my homepage and a slightly bumped up header on the post pages.

    I think where I’m struggling is what to do with some of the extra (un-referenced) code in my header.php file in the section.

    Can you help? Thanks so much!!! Juliet

    Here is the code as the site exists today.

    <a href=”/”>

  22. Juliet on May 30th, 2009 4:30 am

    Per my previous comment, here is the code:

    <a href=”/”>

  23. WPNinja on June 5th, 2009 12:43 pm

    Juliet,

    please email me your header.php file (zipped) to wpninja@wordpressninja.com and i will take a look.

    Is it the Urban Nest site you are referring to? I had a look and the header looks fine on the home page but is not clickable. Let me know in the email where you are at with it now.

    cheers,

    Paul.

  24. Juliet on June 8th, 2009 4:35 pm

    Paul, thank you for solving this for me! You have been sooooo helpful. I am very, very grateful for your willingness to support the code-challenged bloggers such as me!

    Cheers to you! Juliet

  25. Alisanta on June 9th, 2009 4:17 am

    many thanks, your solution works for my prosense theme.

  26. Karen on October 18th, 2009 1:53 am

    Dear Paul,

    Bravo! Wonderful! I just finished personalizing my blog and realized there was no way to get back to the home page from my comments page. I am full of joy that your directions fixed the problem by linking my header image. Thank you so very much.

    Cheerfully,
    Karen

  27. andrew on October 22nd, 2009 8:54 pm

    hi, but how can I add a mapped image to the header? the one with a hyperlink only in a certain part of the image. I know how to map it but have no idea how to put it in the css sheet and header.php

  28. Sergio on December 1st, 2009 3:45 pm

    Here I posted a short explanation of what matters when it comes to jpg compression, which also works for wordpress users, and gives you a few tips for really lower your bandwith: http://seosumo.com/right-compression-settings-to-save-jpg-images-for-wordpress

  29. jaime on December 4th, 2009 6:41 am

    You just totally made my night. Thank you so much!

  30. Amy Bleser on December 16th, 2009 10:06 pm

    Thank you very much! This was very helpful.

Leave a Reply




Ninja This!
Diggdel.icio.usFurlStumbleUponTechnorati

 

Related Posts:

    How To Add A Menu Navigation Bar To A Theme That Doesn't Have One

    Wordpress Theme Customizations - Removing The Sidebar Altogether

    Wordpress Theme Customizations For Beginners Pt 1 - The Layout

    Setting Up RSS Feeds With Wordpress