Header Logo - Image Icon and Anchor Text?

I would like to change the Anchor Text from my Logo in the header.

If you click on it, the anchor text is the Domain/URL.
I would like to change that to a specific anchor text.

How can you do that?

Hello there,

To change it, you will need to edit the header.php file in child theme mode. If haven’t yet created a child theme, you can use our premade one. Copy the header.php file from main theme folder to child theme. Edit the header.php file in your child theme with your prefered code editor program. Then find these lines:


<?php if ( get_theme_mod('site_logo') ) : ?>
 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php else : ?>

Change the title attribute value to any text of your choice. You’ll change this part:


title="<?php bloginfo('name'); ?>"

to:


title="Your Text"

And also change the image logo alt attribute from:


alt="<?php bloginfo('name'); ?>"

to:


alt="Your Text"

Once you’re done, install and activate your child theme. If your settings you’ve done in the customizer can’t be instantly transferred, use this plugin to manually sync it.

Other easier solution is to use jQuery code without a child theme, which can be done by doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){
      
    "use strict"

    if( $('.site-logo').length ) {
        $('.site-logo').parent('a').attr('title', 'Your Text');
        $('.site-logo').attr('alt', 'Your Text');
    }

})(jQuery);

  1. Update

Regards,
Kharis

Thank you worked!

one more thing. I am using a logo for the header. Additional to the logo, I also… would like to show the TITLE and TAGLINE.

At this point… it’s not visible. As soon as the Logo is uploaded… the TITLE and TAGLINE is invisible.

Where and how to change that?

Thank you!

You’re welcome!

Please follow this instruction. To display the site title, your final code will look like this:


<div class="col-md-4 col-sm-8 col-xs-12">
    <?php if ( get_theme_mod('site_logo') ) : ?>
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
  <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
  <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>	        
		<?php else : ?>
	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
	<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>	        
    <?php endif; ?>
</div>

Regards,
Kharis