How to make a clickable WordPress header

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:

 

 

• replace the url http://yourdomain/ with the name of your website

 

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.

 

 


About Leanne

My name is Leanne King and I'm an Australian internet marketer and WordPress fanatic. I share my knowledge of WordPress here on my blog, through my products, private coaching and in private forums. In my spare time I like to develop products for WordPress users that are easy to use.Find me on Google+

, , , ,

12 Responses to How to make a clickable WordPress header

  1. Sandy June 14, 2012 at 1:45 pm #

    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.

    • admin June 14, 2012 at 3:22 pm #

      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.

  2. Sandy June 14, 2012 at 6:23 am #

    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?

    • admin June 14, 2012 at 11:55 am #

      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.

  3. Charlie Fryer April 16, 2012 at 12:23 pm #

    Thanks, works a treat, thank you Leanne for posting.

  4. fkapnist December 27, 2011 at 1:13 pm #

    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?

  5. webdesigner99 August 3, 2010 at 2:37 pm #

    @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.

  6. Sam July 14, 2010 at 11:05 am #

    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?

  7. Sam July 14, 2010 at 11:04 am #

    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 :P

    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;”

  8. admin January 7, 2010 at 10:15 pm #

    Hi Rob, your comment seems to have been cut off but glad you got it sorted.

    Leanne

  9. Rob January 6, 2010 at 10:56 am #

    Just found the problem – there should be a quotation mark immediately before “style”. The code should read;

    Rob

  10. Rob January 6, 2010 at 10:46 am #

    This isn’t working for me – I’m using this Flex theme with a custom header. Any idea why?

    Many thanks,

    Rob

Click on a tab to select how you'd like to leave your comment

Leave a Reply