Wordpress | 242 Views

How to Add the Same Logo in Multiple Locations on Your Website

's Gravatar
May 16, 2021

As we see, In a WordPress Site, there is only a option to attached a logo through the customizer, but what if you need to add a logo in multiple place like,

In Header with different class name,
In mobile devices with different class name,
In footer with different class name.

To solve this, I have created a function in which the logo can be attached to the multiple places,

function custom_header_logo_modified(){ 
$custom_logo_id = get_theme_mod( 'custom_logo' ); 
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' ); 
$link = get_home_url(); 
$second_logo = get_site_icon_url(); 
echo '<div class="img"><a href="'. $link .'">';
 
if ( has_custom_logo() ) { 
echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">'; } echo '</a></div>'; 
}
}

In this custom_header_modified() function we have generate a logo for the header part. in these  get_theme_mod('') we call the customizer logo image id and for a link we generate the home_url link of the homepage.

To call the function in your header.php or any file just add custom_header_logo_modified();  in your file.

Example

<div class="header-logo"> <?php echo custom_header_logo_modified(); ?> </div>

For the mobile or any other place where the same logo is there we can add through this functions

function other_logo_modified(){

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
$link = get_home_url();
$second_logo = get_site_icon_url();

echo '<a href="'. $link .'" class="logo-text">';

if ( has_custom_logo() ) {

echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';

}
echo '</a>';

}

for displaying call the function name like this.

<div class="other-logo"> <?php echo other_logo_modified(); ?> </div>