Hyperlinking your WordPress CSS header image

One question that I’ve been struggling with over the last week is how to make the WordPress header image hyperlink back to the site itself. Many WordPress themes use the CSS background-image properly to display the header image. Unfortunately, there’s no direct way to modify the CSS style sheet to turn the image into a link.

However, there is a way to edit the header.php to do it.

Many themes will have a link that looks like this:
<div class="header">

To make your header clickable, replace the above line in the header with this:

<div class="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">

Note that this makes the entire header area clickable, not just the image, which may be a subset of the header area.

Thanks to vkaryl on wordpress.org for the basis of this idea.

Also note: if your header.php uses a standard img html tag, just wrap a standard anchor tag around it:
<img src="pathtoheader">
becomes
<a href="<?php bloginfo('url'); ?>"><img src="pathtoheader"></a>

guest
Your email address will not be displayed
Find a mistake? Leave a comment above!
Correction-related comments will be deleted after processing to help reduce clutter. Thanks for helping to make the site better for everyone!
Avatars from https://gravatar.com/ are connected to your provided email address.
Notify me about replies:  
0 Comments
Inline Feedbacks
View all comments