2

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' );
        }
    });
});
  • did my answer helped you? – Carl Willis Dec 5 '16 at 20:43
0

Try this function, why going through js when you can just do it with php inside your same file customizer.php

/*
** show site title or hide it
*/

function showtitle_slogan() {
$showttlslogan = get_theme_mod('display_site_title');
    if ($showttlslogan == true) {
        ?>  
        <style type="text/css">
        .site-title { display:none;}
        </style>
    <?php
    }
}
add_action('wp_head', 'showtitle_slogan');

And do the same for everything else.

0

Remove site title and site description if a custom logo has been set - Wordpress

Use the_custom_logo() when you want to print/echo the results. Use get_custom_logo() when you want to return the results (for instance, when you want to assign it to a variable or use in a conditional).

<?php
    if( get_custom_logo() ) {
        the_custom_logo();
    } elseif ( 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
        $description = get_bloginfo( 'description', 'display' );
    } else {
        ?>
        <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
        <?php
        $description = get_bloginfo( 'description', 'display' );
    }

    if ( ( isset($description) && $description) || is_customize_preview() ) {
        ?>
        <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
        <?php
    }
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.