Make header image a link?

• 

  nmarnie · Member · Jul 25, 2011 at 10:55 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  Just wondering how I can make my header image a link to lead people back to my home page?
  I’ve realised this can be achieved in wordpress.org by editing the PHP files but not sure how to get round this in wordpress.com . . .

  Many thanks in advance.

  The blog I need help with is: (visible only to logged in users)

• 

  panaghiotisadam · Member · Jul 25, 2011 at 11:01 pm

  • Copy link

  The blog linked to your username has been deleted.

• 

  nmarnie · Member · Jul 26, 2011 at 10:29 am

  • Copy link

  Apologies, I recently started a new blog:

  http://www.space-between-spaces.com

• 

  panaghiotisadam · Member · Jul 26, 2011 at 11:12 am

  • Copy link

  a) Why don’t you just add a Home link to your top menu? It will be more obvious to visitors than a header image link.
  http://en.support.wordpress.com/menus/

  b) If you insist on making the header image a link, I can work out a code for you. Do you want the whole header area to be clickable or the logo only?

• 

  nmarnie · Member · Jul 26, 2011 at 11:30 am

  • Copy link

  Thanks Panaghiotisadam,

  I thought about this but I would prefer the whole header to be clickable – Suppose I’m juts use to a websites logo/icon taking one back to the home page.

  :)

• 

  panaghiotisadam · Member · Jul 26, 2011 at 1:13 pm

  • Copy link

  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:172x;background-color:#f00;"></div></a>
  </div>

  You’ll see a red rectangle in front of your header image. Change top:128px, if necessary, 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 for logged-out WP.com users or non WP.com users it’ll show up 28px lower.)
  Then delete this:
  background-color:#f00;
  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. Then go to Appearance>Widgets, drag a text widget to Header 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="Space Between Spaces" title="Space Between Spaces" /></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.)

• 

  panaghiotisadam · Member · Jul 26, 2011 at 1:15 pm

  • Copy link

  Note, in case others visit this: all the above are tailored for the Clean Home theme (plus with its regular title and tagline hidden).

• 

  nmarnie · Member · Jul 26, 2011 at 3:06 pm

  • Copy link

  Thanks for your time Panaghiotisadam – Solution A worked a treat.

  :)

• 

  panaghiotisadam · Member · Jul 26, 2011 at 11:30 pm

  • Copy link

  You’re welcome!

  (PS Solution B would work also a treat!)