Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Customizer API Native WordPress Customizer Settings Site Title and Tagline

Ulises Calvo
Ulises Calvo
2,233 Points
Posted by Ulises Calvo
Ulises Calvo
2,233 Points

Does this Javascript enqueueing conflict in any way with bootstrap.min.js?

I know this question may sound silly but I have been trying to make the postMessage method to work on my project (same as the example on this video) even copying and pasting the code as it is in the downloads and nothing, the live preview simply does not work. The only thing I am doing differently is I am creating my own theme, so so far I have another JS script enqueued which is the bootstrap.min.js I was wondering what could have gone wrong? is it that I am enqueuing all unproperly and creating some conflict? And if so, why? I am basically copying and pasting this video's downloadable scripts, (obviously not using the 'wpt' but my theme's name), so it should work. Or is it that there has been a new WP update that makes all this stuff deprecated? Thank you if anyone can help.

3 Answers

Ulises Calvo
Ulises Calvo
2,233 Points
Ulises Calvo
Ulises Calvo
2,233 Points

I think I figured it out, I was not adding the class .site-title within the HTML document. The video does not mention that at all and I not being too proficient at connecting all the dots was missing that important detail. Thank you Adam for your time.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

It's hard to diagnose the issue without seeing your code and a link to the videos you're following. I don't think Bootstrap is the issue here. But as I say you would need to post your code so we can have a look what the issue is.

Ulises Calvo
Ulises Calvo
2,233 Points
Ulises Calvo
Ulises Calvo
2,233 Points

Thank you Adam, the video is this one: https://teamtreehouse.com/library/wordpress-customizer-api/native-wordpress-customizer-settings/site-title-and-tagline

I hope this code renders ok in this window....

This is my theme-customizer.js code

(function( $ ) {
    // Update the site title in real time...
    wp.customize( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '.site-title a' ).text( to );
        } );
    } );
    // Update the site description in real time...
    wp.customize( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '.site-description' ).text( to );
        } );
    } );
})( jQuery );

This is what's in my functions.php

function namaste_register_theme_customizer( $wp_customize ) {

    // Customize title and tagline sections and labels
    $wp_customize->get_section('title_tagline')->title = __('Site Name and Description', 'namastethemecustomizer');  
    $wp_customize->get_control('blogname')->label = __('Enter Your Site Name', 'namastethemecustomizer');  
    $wp_customize->get_control('blogdescription')->label = __('Enter A Short Description Of Your Site', 'namastethemecustomizer');  
    $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
    $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
}

add_action( 'customize_register', 'namaste_register_theme_customizer' );

// Custom js for theme customizer
function namaste_customizer_js() {
  wp_enqueue_script(
    'namaste_theme_customizer',
    get_template_directory_uri() . '/js/theme-customizer.js',
    array( 'jquery', 'customize-preview' ),
    '',
    true
);
}
add_action( 'customize_preview_init', 'namaste_customizer_js' );

Thanks in advance

Ulises Calvo
Ulises Calvo
2,233 Points
Ulises Calvo
Ulises Calvo
2,233 Points

Im sorry about the code, when I hit post comment it brakes the formatting of it

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Ulises Calvo I have edited your post with the correct markdown. I will try have a look at your code and the course shortly and get a reply to you. :)

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

What error messages do you get if any? Can you view the console (inside inspect) and see any errors? Did you clear your cache before you were finished? Also is jQuery referenced?

Ulises Calvo
Ulises Calvo
2,233 Points
Ulises Calvo
Ulises Calvo
2,233 Points

Hi Adam, when I inspect the console I don't see errors. I did clean the cache but still the postMessage live preview does not work. How does JQuery should look like when referenced in the markup? Thank you for your time and help.