0

How to add shortcode support in Customizer live preview. I have implemented the live preview using transport postMessage but, It just reflect the HTML as it is.

I think I need to use selective_refresh to work shortcode in customizer preview.

I have no idea how to get current HTML in selective_refresh.

Check below code snippet.


Step: 1 - Add panel, section, setting ( with 'transport' => 'postMessage' ) and control.

/**
 * Add panel
 */
$wp_customize->add_panel( 'my-sample-panel', array(
    'title'    => __( 'Sample Panel', 'next' ),
) );

/**
 * Add section
 */
$wp_customize->add_section( 'my-sample-section', array(
    'title'    => __( 'Sample Section', 'next' ),
    'panel'    => 'my-sample-panel',
) );

/**
 * Add setting
 */
$wp_customize->add_setting( 'my-sample-text-option', array(
    'default'   => '',
    'type'      => 'option',
    'transport' => 'postMessage',
) );

/**
 * Add control
 */
$wp_customize->add_control( 'my-sample-text-option', array(
    'section'        => 'my-sample-section',
    'label'          => __( 'Text / HTML', 'next' ),
    'type'           => 'textarea',
) );

Step: 2 - Customizer customizer-preview.js.

( function( $ ) {

    /**
     * Text / HTML
     */
    wp.customize( 'my-sample-text-option', function( value ) {
        value.bind( function( new_value ) {
            jQuery( '.custom-html-section' ).html( new_value );
        } );
    } );

} )( jQuery );

Step: 3 - Front end HTML

<div class="custom-html-section"></div>

Above code snippet replace HTML as it is in the target selector.

I'm tried Partial support by avoiding Step: 2

Partial support

/**
 * Add partial refresh
 */
if ( isset( $wp_customize->selective_refresh ) ) {

    $wp_customize->selective_refresh->add_partial( 'my-sample-text-option', array(
        'selector'            => '.custom-html-section',
        'container_inclusive' => false,
        'render_callback'     => function() {
            return get_bloginfo( 'name', 'display' );
        },
    ) );
}

Here, I use the get_bloginfo( 'name', 'display' ) It's showing the blog name as expected.

But, How can I get the current HTML and from the setting and apply do_shortcode?

Expected like this:

'render_callback'     => function() {
    return do_shortcode( $UPDATED_CONTROL_CONTENTS ); // Expect like this to work shortcode in customizer.
    // return get_bloginfo( 'name', 'display' );
},
0

Recently, I was not understand how to get the updated customizer contents in $UPDATED_CONTROL_CONTENTS variable within the selective_refresh.


I used type => option for the setting. So, It store the date in option name my-sample-text-option.

So, Using get_option() I'm able to get the update options from customizer.


Solution:

/**
 * Add partial refresh
 */
if ( isset( $wp_customize->selective_refresh ) ) {

    $wp_customize->selective_refresh->add_partial( 'my-sample-text-option', array(
        'selector'            => '.custom-html-section',
        'container_inclusive' => false,
        'render_callback'     => function() {

            // Get update data from option `my-sample-text-option` using funcition get_option()
            $options = get_option( `my-sample-text-option` );
            return do_shortcode( $options );

        },
    ) );
}

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.