Make header background image link to home page WordPress
- SOLVED
Here's the site: [[LINK href="http://www.spamdiary.com/"]]www.spamdiary.com[[/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » 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";
</script>
<![endif]-->
<?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(); ?>
</head>
<body>
<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>
<div id="menu_items">
<div id="mainmenu">
</div>
</div>
</div>
<div id="header_title">
<h1>
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a><span class="description"><?php bloginfo('description'); ?></span>
</h1>
</div>
<div id="main_search">
<form method="get" id="searchform_top" action="<?php bloginfo('url'); ?>/">
<div>
<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>
</form>
</div>
</div>
</div>
<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; "> </a></p>
let me know how it goes
-wjm
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.
done.
If you post specific code, I can show you exactly.
flashingcursor comments:
Actually,
#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 xyz.com 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.