Customizer Show/Hide Logo and Site Title

Question

I’ve setup checkbox controls in my theme Customizer to show/hide the Logo and Site Title when they are checked/unchecked. By default, I want the Logo to display and the Site Title to be hidden.

Everything is working as it should except the Site Title won’t display in the live preview when the checkbox is checked, unless settings are saved in the Customizer first. However, the logo does display by default and disappears when unchecked. This leads me to believe there is a problem with the javascript and/or if statement for the Site Title.

This is the code I have in my template file:

<?php if( get_theme_mod( 'display_logo' , '1' ) == '1') { ?>
    <?php if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) : ?>
        <?php the_custom_logo(); ?>
    <?php else : ?> 
        <h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" title="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" width="100" height="50" /></a></h1>
    <?php endif; ?>
<?php } ?>  

<?php if( get_theme_mod( 'display_site_title' , '0' ) == '1') { ?>
    <?php if ( is_front_page() && is_home() ) : ?>
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <?php else : ?>
        <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
    <?php endif; ?>
<?php } ?>  

This is the code I have in my customizer.php file:

// Display Logo    
$wp_customize->add_setting( 'display_logo', array(
    'default'           => true,
    'transport'         => 'postMessage'
) );
$wp_customize->add_control( 'display_logo', array(
    'label'             => __( 'Display Logo', 'myTheme' ),
    'type'              => 'checkbox'
) );

// Display Site Title
$wp_customize->add_setting( 'display_site_title', array(
    'default'           => false,
    'transport'         => 'postMessage'
) );
$wp_customize->add_control( 'display_site_title', array(
    'label'             => __( 'Display Site Title', 'myTheme' ),
    'type'              => 'checkbox'
) );

This is the code I have in my corresponding customizer.js file:

// Display Logo     
wp.customize( 'display_logo', function( value ) {
    value.bind( function( to ) {
        if ( true === to ) {
            $( '.site-logo' ).removeClass( 'hidden' );
        } else {
            $( '.site-logo' ).addClass( 'hidden' );
        }
    });
});

// Display Site Title           
wp.customize( 'display_site_title', function( value ) {
    value.bind( function( to ) {
        if ( true === to ) {
            $( '.site-title' ).removeClass( 'hidden' );
        } else {
            $( '.site-title' ).addClass( 'hidden' );
        }
    });
});
0
, , Troy Templeman 2 years 2020-01-12T08:42:26-05:00 0 Answers 75 views 0

Leave an answer

Browse
Browse