How do I turn my Header image into a clickable link?

Viewing 8 replies - 1 through 8 (of 8 total)

  • Basically, you need to surround the header image in a hyperlink <a ... tag.

    You should create a Child theme to make your changes. If you do not, all of your changes will be lost if you update your theme.

    Please try this. Copy header.php into your child theme folder and change this:

    // Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID , array(1102,350), array('class' => 'headerimage'));
						elseif ( get_header_image() ) : ?>
						<img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><!-- end headerimage -->
					<?php endif; ?>

    to this:

    // Houston, we have a new header image!
						?>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?>
						<?php
						echo get_the_post_thumbnail( $post->ID , array(1102,350), array('class' => 'headerimage'));
						echo '</a>';
						elseif ( get_header_image() ) : ?>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?>
   						<img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><!-- end headerimage -->
						</a>
					<?php endif; ?>
    Thread Starter ruben5

    (@ruben5)

    Thanks but I noticed in the code there is no place to put in a link to my sales page..

    Heres the code to my header.. I know if I make changes it could mess my header changes but I need the link to work for now.. Later Im just going to buy a professional word press theme…

    <?php
/**
 * @package WordPress
 * @subpackage Yoko
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<div id="header" onclick="location.href='https://www.my7daydetox.com/detox-cures-recipes-ebook/';" style="cursor: pointer;"></div>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;
	wp_title( '|', true, 'right' );
	bloginfo( 'name' );
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'yoko' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="clearfix">
	<header id="branding">
		<nav id="mainnav" class="clearfix">
			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
		</nav><!-- end mainnav -->

		<?php global $yoko_options;
		$yoko_settings = get_option( 'yoko_options', $yoko_options ); ?>

		<hgroup id="site-title">
		<?php if( $yoko_settings['custom_logo'] ) : ?>
			<a href="<?php echo home_url( '/' ); ?>" class="logo"><img src="<?php echo $yoko_settings['custom_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a>
		<?php else : ?>
			<h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
		<?php endif; ?>
		</hgroup><!-- end site-title -->

        <?php
		// The header image
		// Check if this is a post or page, if it has a thumbnail, and if it's a big one
			if ( is_singular() &&
				current_theme_supports( 'post-thumbnails' ) &&
				has_post_thumbnail( $post->ID ) &&
				( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
				$image[1] >= HEADER_IMAGE_WIDTH ) :
				// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID , array(1102,350), array('class' => 'headerimage'));
						elseif ( get_header_image() ) : ?>
						<img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><!-- end headerimage -->
					<?php endif; ?>
					<div class="clear"></div>

		<nav id="subnav">
			<?php
			if (is_nav_menu( 'Sub Menu' ) ) {
			wp_nav_menu( array('menu' => 'Sub Menu' ));} ?>
		</nav><!-- end subnav -->
</header><!-- end header -->
<center><script type="text/javascript"><!--

</script><center>

    Sorry, most people want the header to link to the Home page and that is what I showed. If https://www.my7daydetox.com/ is your sales page, try this:

    // Houston, we have a new header image!
   ?>
   <a href="https://www.my7daydetox.com/" title="My 7 Day Detox" >
   <?php
   echo get_the_post_thumbnail( $post->ID , array(1102,350), array('class' => 'headerimage'));
   echo '</a>';
elseif ( get_header_image() ) : ?>
   <a href="https://www.my7daydetox.com/" title="My 7 Day Detox" >
      <img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><!-- end headerimage -->
   </a>
<?php endif; ?>

    BTW, you are only allowed to post 10 or fewer lines of code in a post here. If you need to post more, put it in a pastebin and post a link to it here.

    Thread Starter ruben5

    (@ruben5)

    Thanks but it didnt work.. Can you please tell me what I should put in the header.php Later on I plan on buying a proffesional theme but I just want the link to work for now..

    Was the code you showed for header.php the code from your main site? Is https://my7daydetox.com the URL for the sales page?

    If so, then I showed you what to put in the header.

    If not, please tell me the correct code and sales page URL.

    Thread Starter ruben5

    (@ruben5)

    Thanks my home page is https://www.my7daydetox.com/ and the sales page is https://www.my7daydetox.com/detox-cures-recipes-ebook/ and when I put your code into the header.php my whole website went white.. Everything disapeared..

    I just tried the code again and it works for me.

    Don’t know what to tell you other than that.

    ruben5 –

    Thanks, this helped me, too. But now the title of my page is above the header image, where I had managed to eliminate it before. My site is: https://marybethandeddie.com/

    Can you help me figure out what in your code would have caused that?

    Thank you!
    Eddie

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How do I turn my Header image into a clickable link?’ is closed to new replies.