how to add second logo in wp customizer

Some websites have a corporate partner and want a second logo, but all of you know WordPress has only a primary logo and want to find a tip to solve this issue.

To add a second logo in the WordPress Customizer, follow these steps:

1. Using customize_register in functions.php
   register second logo in function.php

   function mytheme_customize_register( $wp_customize ) {
   
       // Add setting for the secondary logo
   
       $wp_customize->add_setting( 'secondary_logo' );
   
       // Add control for the secondary logo
   
       $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'secondary_logo', array(
   
           'label'    => __( 'Secondary Logo', 'mytheme' ),
   
           'section'  => 'title_tagline',
   
           'settings' => 'secondary_logo',
   
       ) ) );
   
   }
   
   add_action( 'customize_register', 'mytheme_customize_register' );

2. Display Primary logo and second logo together
   add function to get logo in function.php
   Now, you can put this logo in the place you need by calling mytheme_display_logos(); in footer.php, header.php, or whatever.

   function mytheme_display_logos() {
   
       // Display the primary logo
   
       echo '<a class="logo-container" href="' . esc_url(home_url('/')) . '" rel="home">';
   
       $custom_logo = wp_get_attachment_image_src(get_theme_mod('custom_logo'),'full');
   
   if ($custom_logo) {
   
       echo '<img class="custom-logo" src="' . esc_url($custom_logo[0]) . '" width="100" height="100" alt="' . esc_attr(get_bloginfo('name')." Primary Logo") . '">';
   
   }
   
   // Display the secondary logo
   
   $secondary_logo = get_theme_mod('secondary_logo');
   
   if ($secondary_logo) {
   
       echo '<img class="custom-logo secondary-logo" src="' . esc_url($secondary_logo) . '" width="100" height="100" alt="' . esc_attr(get_bloginfo('name')." Second Logo") . '">';
   
   }
   
       echo '<span class="fs-4">'.esc_html(get_bloginfo('name')).'<span>';
   
   echo '</a>';
   
   }

3. Upload logo
   • Go to Appearance > Customize.
   • Find the second logo option and upload an image.
   • Save changes and preview your site.
     

     But, If you don’t upload Primary or Second logo, It is going to show only your site name.

4. Final Preview shown as below and hope this content help you
   

Category :

Tags :