0

So its been days since i've been looking into this and still found zero clue as to how to do it in my own custom theme. I've also had a look at this, but nothing. I had a look at the customizer of twenty-seventeen and found that the code responsible was

$wp_customize->selective_refresh->add_partial( 'blogname', array(
    'selector' => '.site-title a',
    'render_callback' => 'twentyseventeen_customize_partial_blogname',
) );

I tired the same with my customizer in my custom theme but it didn't work at all.

MY CODE

$wp_customize->add_section( 'footer_section', array(
    'title' => __( 'Footer Section', 'healthtech' ),
    'panel' => '',
) );
/*
* Settings for copyright text
*/
$wp_customize->add_section( 'footer_section', array(
    'title' => __( 'Footer Section', 'healthtech' ),
    'panel' => '',
) );
/*
* Settings for copyright text
*/
$wp_customize->add_setting( 'copyright_text', array(
    'default' => '',
) );
$wp_customize->add_control( new WP_Customize_Control(   $wp_customize,  'copyright_text',   array(
            'label'    => __( 'Copyright Text', 'healthtech' ),
            'section'  => 'footer_section',
            'settings' => 'copyright_text',
        )
    )
);
$wp_customize->selective_refresh->add_partial( 'copyright_text', array(
    'selector' => 'span#copy-write', // You can also select a css class
    'render_callback'     => 'check_copy_right_text',
) );

Callback function for the render_callback

function check_copy_right_text(){
   echo get_theme_mod('copyright_text');
 }
1

Your code is good i think you are missing the front-end part, here is the complete code for functions.php:

/* Customizer fields */

function your_customizer_settings($wp_customize) {
    $wp_customize->add_section('footer_section', array(
        'title' => __('Footer Section', 'healthtech'),
        'panel' => '',
    ));
    /*
     * Settings for copyright text
     */
    $wp_customize->add_section('footer_section', array(
        'title' => __('Footer Section', 'healthtech'),
        'panel' => '',
    ));
    /*
     * Settings for copyright text
     */
    $wp_customize->add_setting('copyright_text', array(
        'default' => '2342',
        'transport' => 'postMessage'
    ));
    $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'copyright_text', array(
        'label' => __('Copyright Text', 'healthtech'),
        'section' => 'footer_section',
        'settings' => 'copyright_text',
            )
            )
    );
    $wp_customize->selective_refresh->add_partial('copyright_text', array(
        'selector' => 'span#copy-write', // You can also select a css class
        'render_callback' => 'check_copy_right_text',
    ));
}
// Customizer action
add_action('customize_register', 'your_customizer_settings');

function check_copy_right_text(){
   echo get_theme_mod('copyright_text');
 }

and put this in the front-end since its a copyright text lets assume footer.php:

<span id="copy-write"><?php check_copy_right_text(); ?></span>

if you go to the customizer you should see the Edit Shortcut Button like this:

enter image description here

if not you will have to add a bit of CSS to position better the button, you can add that CSS to style.css or create a CSS file only for correcting the buttons if you have more buttons that need CSS, remember to use add_action( 'customize_preview_init', 'my_function_with_wp_enqueue_with_my_css_only_for_the_customizer' );

i added an extra value in your setting:

$wp_customize->add_setting('copyright_text', array(
        'default' => '2342',
        'transport' => 'postMessage' //this one
    ));

if you dont set transport to postMessage the entire preview will reload since it will default to refresh, this way only that placement (that is what is called the part of a selective refresh) will update.

I recommend you to read this and this.

Dont hesitate to ask, this feature is kind of new and i am adding Selective Refresh Partials to all my theme options too.

By the way for options that render a Google Map (or similar) you will need to add JavaSCript.

  • Thank you for the reply. It helped a lot. It wasn't exactly what I was looking for but, it turned out to be even better :) . However my other question is that, is it possible to add the pencil icon that we see with the twentyseventeen theme? If so could you tell me how to? Thank you :) – bagpipper Feb 14 '17 at 4:53
  • Its not showing the Edit Shortcut Button (the pencil icon) ? it should be there, maybe something is overlapping it, i edited my answer with a screenshot of it, it should be there in the HTML at least, maybe it needs a bit of CSS. – David Lee Feb 14 '17 at 5:47
  • Well actually im not seeing the button tag at all prntscr.com/e8hghf Im, using a blank theme from underscore.me – bagpipper Feb 14 '17 at 5:56
  • Expand that <span> tag above "test" it should be inside that one. – David Lee Feb 14 '17 at 6:04
  • You were correct Thank you so much. :) Hope its OK if i add this to my blog :) – bagpipper Feb 14 '17 at 6:08

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.