you're reading:
Blog title, Header customization, Home/Front/Blog tab, Html & inline css codes, Position absolute, Themes

Clickable header image in Clean Home

In all themes the blog title or the header image works as a link back to your homepage.

Some themes allow you to hide the regular blog title and tagline (see list in my post Header images). That’s useful if you wish to add your own header image with the blog title incorporated in it as a graphic.

Clean Home doesn’t support hiding the title for free, but you can do it if you have the paid Custom Design upgrade.

(Note: hiding the title via CSS editing is ok; deleting it in Settings > General is bad for search engines).

If you hide the title in Clean Home, you’re left with no home link on or near the header (as a rule, the header image acts as a home link only when the regular blog title is inside the image area).

The most reasonable solution is to add a Home tab in the top nav menu by creating and loading a custom top nav menu.

If you don’t want to do that, or if you wish to have a linking header image anyway, there are two solutions:

Solution A

Go to Appearance>Widgets, drag a text widget to Sidebar and paste this into it:

<div align="center" style="width:100%;top:128px;left:0;position:absolute;z-index:11;">
<a href="BLOG URL HERE"><div style="width:900px;height:172px;background-color:#f00;"></div></a>

You’ll see a red rectangle in front of your header image. The top:128px part of the code is calculated for a version of the theme with no regular title and tagline plus one row of top nav tabs: you may need to change the number, to make the rectangle start exactly where your header image starts.
Don’t change it’s height: it’s purposefully shorter than the header image, because of a problem with the grey admin bar (for logged-out users or non users the rectangle will show up 28px lower).

Once you make sure the rectangle starts where it should, delete this from the code:


and you’ll have an invisible linking rectangle in front of (most of) your header image.

Solution B

Go to Appearance > Header and remove your header image.
Go to Media > Library and copy the URL of your header image (assuming you had uploaded a 900×200 one – otherwise create such an image, upload it via Media > Add New and copy its URL).
Go to Appearance > Widgets, open the Header widget area, drag a text widget to it, and paste this into it:

<a href="BLOG URL HERE"><img style="border-top:5px solid #333;margin:-39px 0;" src="IMAGE URL HERE" alt="BLOG TITLE HERE" title="BLOG TITLE HERE" /></a>

(I’ve made that identical to the actual header image – complete with the dark grey line above it. But of course you can modify it.)

Please don’t paste code in comments – see comment guidelines.


2 thoughts on “Clickable header image in Clean Home

  1. Thank you so much for this! I just did it, and the instructions were very easy to follow, and it worked!

    Posted by jane | November 27, 2011, 18:52
  2. You’re welcome. You’re not using Clean Home, but the trick works in Bold Life (and a few other themes) as well.

    Posted by Panos | November 28, 2011, 22:34


author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.


  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: