WordPress.org

Forums

How do I turn my Header image into a clickable link? (9 posts)

  1. ruben5
    Member
    Posted 3 years ago #

    HI I want to turn my header on my web pages into a clickable link.. That links to my sales page.. http://www.my7daydetox.com/

    Please show me how I would greatly appreciate it..

  2. vtxyzzy
    Member
    Posted 3 years ago #

    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; ?>
  3. ruben5
    Member
    Posted 3 years ago #

    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='http://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="http://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>
  4. vtxyzzy
    Member
    Posted 3 years ago #

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

    // Houston, we have a new header image!
       ?>
       <a href="http://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="http://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.

  5. ruben5
    Member
    Posted 3 years ago #

    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..

  6. vtxyzzy
    Member
    Posted 3 years ago #

    Was the code you showed for header.php the code from your main site? Is http://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.

  7. ruben5
    Member
    Posted 3 years ago #

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

  8. vtxyzzy
    Member
    Posted 3 years ago #

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

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

  9. eddiecox
    Member
    Posted 2 years ago #

    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: http://marybethandeddie.com/

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

    Thank you!
    Eddie

Topic Closed

This topic has been closed to new replies.

About this Topic