Some WordPress themes automagically have a clickable header image – others do not.
The good news is that it is really easy to create a clickable header image on your blog. Once you have a clicakable header image your users can click the header to return to the home page of your site so it is a great navigation tool for your blog. There are two ways to make the image clickable. The method that you choose depends on the way that the theme that you are using has been created.
Method 1
First of all go to Appearance/Editor and locate your your header.php page and have a look for this code:
Method 2
If your theme is using a html tag you will need to have a look for a code that will look something like this:
* replace “headerimage” with whatever the path is to your header image
Make sure before you make any changes to your theme files that you keep a copy of them in case something goes weird 
Once you have made your changes give it a test out and enjoy your new clickable header.
Thank you for answering! I am using Abundance Theme from Kriesi along with a WooCommerce Plugin. I asked on their forum but they said it wasn’t a proper question to them. I guess I have to give up on the idea as I don’t know how to do it and cannot find a plugin for what I want. Sorry I wasn’t clearer – I am trying to make 3 different links on 3 different images.
Hi Sandy, I haven’t used Abundance before myself but having a quick look at it – it doesn’t appear to have inbuilt templates for what you want. Simply put this means that if you really want those images in the header linking to different urls (rather than the one url) then you would need to tweak the theme to add the code or create a child theme in that style. If it was really important to you, you could get someone at Freelancer, Vworker or Scriptlance (or even Fiverr) to do this for you. If it is just a new site that you are building I would suggest that you concentrate more on getting traffic to your site than the look. Once you have traffic your customers can tell you what look they like and your tracking on your site will show which part of the site they are moving on and where it might be better to put your images on.
I have been working on a wordpress website and trying to get three images in my header to be clickable. Is this possible? I am new to this so how could I accomplish this?
You haven’t mentioned what theme you are using so difficult to answer this one. Some themes allow a number of images in the header and have an inbuilt system for linking them. Others don’t. If your theme is not already set up for that you could either create your own code for doing so and add it or just create a header with a transparent background and add the three images there and link it (presuming you want them to look floating and they are all linking to the one url). If neither of those options address your needs then try contacting the theme developer via their help desk or forum and asking them.
Thanks, works a treat, thank you Leanne for posting.
It works well but it overlaps the search form… when I click in the search box it loads my home page before I can even enter a search term…. mmm… too bad… so how do I change the z-index of the search form?
@sam it same as giving hover to normal html page but weird bugs in ie is the problem … better avoid hover unless it comes with WP.
Forgot to ask but how do I make it hover saying its a link or show its a link in the bottom left hand corner of browsers?
(dofollow)
Sam recently posted..What Is Seo
Hey Dude,
Cheers for this. Went to a few other places first but they showed the code only for when the header image was called for by the header and not when the image was in the css.
you forgot a ” rendering your code useless
You need to add a ” after the ‘ after your domain to close the onclick.
For people that wanna c & p use this:
onclick=”location.href=’http://www.yourdomain.com’”; style=”cursor:pointer;”
(dofollow)
Sam recently posted..What Is Seo
Hi Rob, your comment seems to have been cut off but glad you got it sorted.
Leanne
Just found the problem – there should be a quotation mark immediately before “style”. The code should read;
Rob
This isn’t working for me – I’m using this Flex theme with a custom header. Any idea why?
Many thanks,
Rob