Link the Custom Header Image to the home page

Hi,
You can do this by modifying your theme’s header.php file. Open the file in edit mode and look for the section called <div class="site-branding">...</div>. Wrap this section with the following:

<a href="/">..</a>, so that it now looks like:

<a href="/">
   <div class="site-branding">
   </div>
</a>

The reason you need to wrap the section with an anchor because header image actually renders as a background image, for which you cannot use a href property.

Hope this helps

• This reply was modified 7 years, 6 months ago by Subrata Sarkar.

Thank you for your reply. I did as you suggested, and it doesn’t appear that anything changed. Here is exactly what I ended up with in header.php in my child theme:

`<a href=”/”>
<div class=”site-branding”>
<?php sela_the_site_logo(); ?>
<h1 class=”site-title”><a>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
<?php
$description = get_bloginfo( ‘description’, ‘display’ );
if ( $description || is_customize_preview() ) : ?>
<h2 class=”site-description”><?php echo $description; /* WPCS: xss ok. */ ?></h2>
<?php
endif; ?>
</div><!– .site-branding –>
</a>`

Did I do something wrong or miss something? Thanks again! Jessi

Thanks in advance for your help!

Hi Jessi,

It’s best to make changes like these in a Child Theme:

https://codex.www.ads-software.com/Child_Themes
?https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

The reason is that if you update the core theme, any changes to those files will be lost. Changes to a child theme will not be lost.

Using this example:

<a href="/">..</a>

You will need to replace the / character between the quotes with the full URL to your site.

Thank you. I made the changes in my child theme, but it still didn’t work. I ended up selecting ‘Display Title and Tagline’ in the Theme Customization options and then setting the site title font color to transparent using the following code (could be done in the child theme’s style.css or the additional css section of the Theme Customization):

.site-title a {
    color: #ffffff;
    opacity: 0;
}

It’s kind of hacky, but it does the trick and looks like my image is linked!

Thanks for sharing your solution!