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.

Comments

7 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

Leave a Reply




Ninja This!
Diggdel.icio.usFurlStumbleUponTechnorati

 

Related Posts:

    Wordpress Theme Customizations - Removing The Sidebar Altogether

    Wordpress Theme Customizations For Beginners Pt 1 - The Layout

    Why Do Wordpress Themes Sometimes Not Display Properly?

    Wordpress - A Beginners Guide Part 3 - “Choosing Themes And Plugins”