« return to hot glue media

Link the WordPress Header Image to your Main Site

Last night, Brian Holt (@brian_holt), who blogs at The Work is Never Done, asked for help making his WordPress blog header link to his main page.

I commented with a quick fix, but thought I’d share my method, with a bit of explanation, here as well. To start with, here’s the code:

View Code

1. <div class="header">
2. <a href="<?php bloginfo('url'); ?>">
3. <img alt="The Work Is Never Done" height="100px" src="<?php bloginfo('template_directory'); ?>/images/header.png" width="748px" />
4. </a></div>

And now for a quick and dirty look at the parts:

  • Line 1 opens the header div.
  • Line 2 links the image (a href) to the main url of the blog using a WordPress call (bloginfo (‘url’)).
  • Line 3 specifies the image that will function as the clickable linked image; in order: alt text, height, location (using another WordPress call to insert the URL of the template directory), width.
  • Line 4 closes the open link tag from line 2 and the header div from line 1.

Depending on the site’s existing CSS, he may need to add a line to his CSS file to eliminate margins and padding from the image:

View Code

.header img { margin: 0; padding: 0; }

There are several other CSS items that may need to be addressed, again depending on the existing CSS, such as borders around the hyperlinked image. If you don’t have primary header text elsewhere on the site, I would also recommend wrapping the link with H1 tags and adding text using your preferred CSS image text replacement technique. I offer this blog’s header as a convenient example:

View Code

1. <div id="menu"><h1> <a href="http://hotgluemedia.com/blog">
2. <img alt="creative grease: stains on the driveway of hot glue media" height="234px" src="<?php bloginfo('template_directory'); ?>/img/creativegreaselogo.png" width="277px" />
3. <span>creative grease: stains on the driveway of hot glue media</span>
4. </a></h1></div>

In this case, the span element is set to display:none in the CSS.

dani made this mess on January 21st, 2010

discuss