CODEWITHSUNDEEP
phpwordpresswordpress-theming
Tom Groot
Tom Groot

Reputation: 1190

Show partial edit button in own Wordpress theme

The basic Wordpress themes show this edit button in the customizer:

enter image description here

I want to add that to my own theme as well. According to this post, it is necesarry to turn on selective refresh.

I tried to do this with my custom section. Take a close look at add_theme_support('customize-selective-refresh-widgets'); and selective_refresh->add_partial() as I thought these were the only things I had to add:

  function toorgmot_customize_register($wp_customize){

    add_theme_support( 'customize-selective-refresh-widgets' );

    $wp_customize->add_section('toorgmot-welcome-message-section',array(
      'title' => 'Welcome Message'
    ));

    $wp_customize->add_setting('toorgmot-welcome-message-text',array(
      'default' => 'Hallo en welkom!'
    ));

    $wp_customize->add_control( new WP_Customize_Control($wp_customize,                                              
      'toorgmot-welcome-message-control', array(
      'label' => 'Text',
      'section'=> 'toorgmot-welcome-message-section', 
      'settings' => 'toorgmot-welcome-message-text'
    )));

    $wp_customize->selective_refresh->add_partial( 'toorgmot-welcome-message-text',  array(
        'selector' => '.welcome-message',
        'render_callback' => function() { 
          echo get_theme_mod('toorgmot-welcome-message-text'); 
        },
    ));
  }

  add_action('customize_register','toorgmot_customize_register');

It doesn't return errors. The extra section is editable inside the customizer, just as I want it. However, the selective refresh does not work and neither does the edit button show.

Upvotes: 3

Views: 964

Answers (2)

B.Pukhalskyi
B.Pukhalskyi

Reputation: 51

Call wp_head() inside the <head> tag and just after the <body> and wp_footer() just before the </body>. Just like that

<!DOCTYPE html>
<html>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php wp_head(); ?>
    </head>
    <body>
        <?php wp_head(); ?>

and

<?php wp_footer(); ?>
</body>
</html>

Upvotes: 1

user771417
user771417

Reputation: 31

You need to add the code:

$setting = $wp_customize->get_setting( 'toorgmot-welcome-message-text' );
$setting->transport = 'postMessage';

or just:

$wp_customize->get_setting( 'toorgmot-welcome-message-text' )->transport = 'postMessage';

Upvotes: 1

Related Questions