Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Make header background image link to home page WordPress


Here's the site: [[LINK href=""]][[/LINK]]
I want the header background image to link back to the index page. That's it. I've tried every trick I can think of and none of it worked. I want you to implement it and I'll give you the login and pass.

Header PHP Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" <?php language_attributes(); ?>>

<head profile="">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<!--[if IE]>

<link rel="stylesheet" href="<?=bloginfo('template_url')?>/style-ie.css" type="text/css" media="screen" />

<script type="text/javascript">

var png_blank = "<?=bloginfo('template_url')?>/images/transparent.gif";



<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<!-- Main Menu -->

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.1.2.6.js"></script>

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jqueryslidemenu/jqueryslidemenu.js"></script>

<!-- /Main Menu -->

<?php wp_head(); ?>



<div id="header">

<div id="header_inner">

<div id="menu">

<div id="header_link">

<p><a href="<?php echo get_option('home'); ?>/"><?php echo get_option('home'); ?></a></p>


<div id="menu_items">

<div id="mainmenu">




<div id="header_title">


<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a><span class="description"><?php bloginfo('description'); ?></span>



<div id="main_search">

<form method="get" id="searchform_top" action="<?php bloginfo('url'); ?>/">


<input type="text" value="Type your search here..." name="s" id="searchform_top_text" onclick="this.value='';" />

<input type="image" src="<?php bloginfo('template_url')?>/images/button_go.gif" id="gosearch" />






<div id="page">

<div id="body">

<div id="body_top">

<div id="body_left">

<div id="body_left_content">

Answers (3)


wjm answers:

please post the header.php
in your theme folder (wp-content/themes/YOURTHEMENAME/header.php)

wjm comments:

add at the end of wp-content/themes/nature_wdl/style.css
the following css code,

it should work

#header_link {
width: 600px !important;
height:150px !important;

Clay Butler comments:

Alas, it did not work.

wjm comments:

replace in header.php

this line
<p><a href="<?php echo get_option('home'); ?>/"><?php echo get_option('home'); ?></a></p>

with this one
<p><a href="<?php echo get_option('home'); ?>/" style="width: 520px; height:135px; display:block; ">&nbsp;</a></p>

let me know how it goes

wjm comments:

do that but also remove the changes i told you to apply to style.css

wjm comments:

i see you have fixed it,
please remove the changes to style.css as that size is wider and higher than needed


flashingcursor answers:

Create an 1px transparent image
Create a link in the DIV with the background using a 1px transparent image.
Adjust it's size to the size of your header background.


If you post specific code, I can show you exactly.

flashingcursor comments:


#header_link a {

width: 600px !important;

height:150px !important;



Eddie Moya answers:

you should be able to do something like this...

<div id="header_inner">
<a href="<?php bloginfo('url'); ?>" style="display: block; width: 100%; height: 100%;">
.......... the rest of you header_inner........

If part of the problem is that you arent sure how to get just the without the /blogname... then do this...

<?php global $current_site; /* do this line anywhere before the link where its being used */ ?>

<div id="header_inner">
<a href="<?php echo $current_site->domain; ?>" style="display: block; width: 100%; height: 100%;">
.......... the rest of you header_inner........

What this does is create an anchor, but instead of your normal text or image link, it forces it to be a block level element. So you can sort of treat it like a div... sort of.