theme options - Using jQuery to retrieve customizer value

admin管理员组

文章数量:1122832

I am trying to use jQuery to retrieve a theme options (customizer) value:

    $wp_customize->add_setting( 'header_fixed', array(
        'default'   => true,
    ) );
    $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_fixed', array(
        'label'     => __( 'Enable fixed navigation?', 'theme' ),
        'section'   => 'header_section',
        'settings'  => 'header_fixed',
        'type'      => 'checkbox',
        'priority' => 40,
    ) ) );

If the above value is true, then the header element will be fixed position. If not, it will be relative position (a class will be added, or not, with jQuery). I'm not terribly competent with jQuery, so the following is based on what comes in customizer.js, from _s:

    wp.customize( 'header_fixed', function( value ) {
    value.bind( function( to ) {
        if ( 'true' == to ) {
            $( '#header-inner' ).addClass( 'fixed' );
        }
    } );
} );

I've been placing this in customizer.js as doing so elsewhere results in an error: 'wp' is not defined.

Edit* I'm enqueuing the script as follows:

function theme_customize_preview_js() {
wp_enqueue_script( 'theme-customizer', get_template_directory_uri() .  '/js/customizer.js', array( 'customize-preview' ) );
} 
add_action( 'customize_preview_init', 'theme_customize_preview_js' );

Edit** This seems not to be quite possible at this time, so I ended up doing it with PHP:

<?php if ( '' != get_theme_mod( 'header_fixed') ) echo 'fixed'; ?>

Thanks!

I am trying to use jQuery to retrieve a theme options (customizer) value:

    $wp_customize->add_setting( 'header_fixed', array(
        'default'   => true,
    ) );
    $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_fixed', array(
        'label'     => __( 'Enable fixed navigation?', 'theme' ),
        'section'   => 'header_section',
        'settings'  => 'header_fixed',
        'type'      => 'checkbox',
        'priority' => 40,
    ) ) );

If the above value is true, then the header element will be fixed position. If not, it will be relative position (a class will be added, or not, with jQuery). I'm not terribly competent with jQuery, so the following is based on what comes in customizer.js, from _s:

    wp.customize( 'header_fixed', function( value ) {
    value.bind( function( to ) {
        if ( 'true' == to ) {
            $( '#header-inner' ).addClass( 'fixed' );
        }
    } );
} );

I've been placing this in customizer.js as doing so elsewhere results in an error: 'wp' is not defined.

Edit* I'm enqueuing the script as follows:

function theme_customize_preview_js() {
wp_enqueue_script( 'theme-customizer', get_template_directory_uri() .  '/js/customizer.js', array( 'customize-preview' ) );
} 
add_action( 'customize_preview_init', 'theme_customize_preview_js' );

Edit** This seems not to be quite possible at this time, so I ended up doing it with PHP:

<?php if ( '' != get_theme_mod( 'header_fixed') ) echo 'fixed'; ?>

Thanks!

• jquery
• theme-options
• theme-customizer

Share Improve this question edited Dec 17, 2014 at 14:16 S.K. asked Dec 14, 2014 at 23:28 S.K.S.K. 2133 bronze badges 2

• 1 Please show us how you register the script and when (as in action/filter) you are calling it. If it's not defined, it's too early. – kaiser Commented Dec 15, 2014 at 0:58
• Thanks for your reply. I've edited the above accordingly (hopefully I've understood you). – S.K. Commented Dec 15, 2014 at 2:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Use that JQuery code from your question in customizer preview for real time update. Your transport should be set to 'postMessage'. In your website you can add body class in function.php:

function theme_prefix_body_class( $classes ) {

    if ( get_theme_mod('header_fixed', 0 ) == true  ) {

        $classes[] = 'fixed-header';
    }

    return $classes;
}
add_filter( 'body_class', 'theme_prefix_body_class' ); 

本文标签： theme optionsUsing jQuery to retrieve customizer value