I am having a little trouble binding the theme customizer live preview javascript to an HTML <img src>- more specifically it is my logo.

Here how the html looks on the page(which is fine and dandy):

<a class="footerlogo" href="#top"><img src="<?php echo mytheme_theme_mod( 'footer_logo' ); ?>" /></a> </div>

Now my problematic part is the JS - Here are my first two attempts. Both not working.

Attempt 1:

    /** Footer logo */
wp.customize( 'mytheme_footer_logo', function( value ) {
    value.bind( function( to ) {
        $( '.footerlogo img src' ).html( to );
    } );
} );

Attempt 2:

/** Footer logo */
wp.customize( 'mytheme_footer_logo', function( value ) {
    value.bind( function( to ) {
    var footer = $( '.footerlogo img' );

     footer.attr( 'href', to );

    } );
} );

Can anyone give me assistance on this?

I am having a little trouble binding the theme customizer live preview javascript to an HTML <img src>- more specifically it is my logo.

Here how the html looks on the page(which is fine and dandy):

<a class="footerlogo" href="#top"><img src="<?php echo mytheme_theme_mod( 'footer_logo' ); ?>" /></a> </div>

Now my problematic part is the JS - Here are my first two attempts. Both not working.

Attempt 1:

    /** Footer logo */
wp.customize( 'mytheme_footer_logo', function( value ) {
    value.bind( function( to ) {
        $( '.footerlogo img src' ).html( to );
    } );
} );

Attempt 2:

/** Footer logo */
wp.customize( 'mytheme_footer_logo', function( value ) {
    value.bind( function( to ) {
    var footer = $( '.footerlogo img' );

     footer.attr( 'href', to );

    } );
} );

Can anyone give me assistance on this?

• theme-development
• themes
• javascript
• html
• theme-customizer

1 Answer 1

Oops, it seems that I accidentaly used the wrong tag, I used href instead of src. Simple fix:

/** Footer logo */
    wp.customize( 'mytheme_footer_logo', function( value ) {
        value.bind( function( to ) {
        var footer = $( '.footerlogo img' );

         footer.attr( 'src', to );

        } );
    } );