tags:

views:

95

answers:

2

How do you make a Wordpress header image clickable so that it navigates to the the home page.

Here is my header.php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11"&gt;
    <title><?php
        if ( is_single() ) { single_post_title(); }      
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
        elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
        else { bloginfo('name'); wp_title('|'); get_page_number(); }
    ?></title>

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

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

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

 <?php wp_head(); ?>

 <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
 <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>

<body>
<div id="wrapper" class="hfeed">
 <div id="header">
  <div id="masthead">

   <div id="branding">
      <a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?> | <?php bloginfo('description'); ?>"></a>
      </a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
       <a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?> | <?php bloginfo('description'); ?>"></a>
<?php } else { ?>
        <a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?> | <?php bloginfo('description'); ?>"></a>
<?php } ?>
   </div><!– #branding –>

   <div id="access">
   </div><!– #access –>

  </div><!– #masthead –>
 </div><!– #header –>

 <div id="main">

Thanks for any help!

+2  A: 

To whichever div you want to be clickable, add onclick="window.location.href='/'". You'll want to style it so it has cursor:pointer too, so people will know it's a link.

Skilldrick
Why not use <a>...</a>?
Andreas Bonini
I assumed that the header image would be the background of a div, rather than in an img tag. You can't put `a` round a `div`, because `a` isn't a block-level element.
Skilldrick
Yes but doing this is generally a bad idea for SEO and people without javascript enabled.
Andreas Bonini
No, but you can place an empty `a` in the `div` that has `display: block` and a width/height that of the image set, which'll work without javascript and for search engines.
ceejayoz
A: 
<a href="<?php bloginfo('home'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/header.png"></a>
konzepz