How to get a custom field in theme customizer to live update the element in preview window?

admin管理员组

文章数量:1288010

I created a custom field for theme customizer, and all works fine to display the field, save the value to the DB and retrievable via get_theme_mod(), but it does not live update in the preview window. I have to reload the page to see the change.

The preview does refresh on each change of the fields and the Publish button is activated, but now I need the change to be detected and processed by the wp.customize javascript API.

The result from the custom field coding

Based on multiple searches, I have tried the following methods without success. Note this is just part of the code. The retrieved value uses the respective ID for each field setting which are head1font and head1size but the below is just of one. The code shows the two methods tried, but note that both are not used at the same time.

add_action('customize_controls_print_scripts', function() 
{
  echo'
  <script>
    jQuery(function($) {
     // setting.bind method
      wp.customize("head1font", function(setting) {
        setting.bind(function(value) {
            $("h1.pagetitle").css("font-family",value);
        });
      });

    // other method tried value.bind
      wp.customize("head1font", function(value) {
        value.bind(function(newval) {
            $("h1.pagetitle").css("font-family",newval);
        });
      });
    });
  </script>
 ';
});

The console note does not seem applicable. The following is the notice when a change action occur.

Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.

I am now at a loss for a solution so I am seeking tips to make this work.

I created a custom field for theme customizer, and all works fine to display the field, save the value to the DB and retrievable via get_theme_mod(), but it does not live update in the preview window. I have to reload the page to see the change.

The preview does refresh on each change of the fields and the Publish button is activated, but now I need the change to be detected and processed by the wp.customize javascript API.

The result from the custom field coding

Based on multiple searches, I have tried the following methods without success. Note this is just part of the code. The retrieved value uses the respective ID for each field setting which are head1font and head1size but the below is just of one. The code shows the two methods tried, but note that both are not used at the same time.

add_action('customize_controls_print_scripts', function() 
{
  echo'
  <script>
    jQuery(function($) {
     // setting.bind method
      wp.customize("head1font", function(setting) {
        setting.bind(function(value) {
            $("h1.pagetitle").css("font-family",value);
        });
      });

    // other method tried value.bind
      wp.customize("head1font", function(value) {
        value.bind(function(newval) {
            $("h1.pagetitle").css("font-family",newval);
        });
      });
    });
  </script>
 ';
});

The console note does not seem applicable. The following is the notice when a change action occur.

Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.

I am now at a loss for a solution so I am seeking tips to make this work.

• theme-customizer

Share Improve this question asked Sep 8, 2021 at 2:35 NadalNadal 8966 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I have defined a solution. The transport type had to be changed from default refresh to postMessage to use the custom JS instruction.

add_action('customize_register', function($mgr) 
{
  //load the custom field class file
  include_once LIBPATH.'/classTplFormat.php';

  // moved the JS into a file and loaded via enqueue
  // ASSETURL is a constant that holds theurl to the assets folder
  add_action('customize_preview_init', function() {
    wp_enqueue_script('tpl-customizer', ASSETURL.'/tpl-customizer.js',[],'',true);
  });

  // the fields are in the custom class and too much to post but it follows
  // similar method as the core customizer eg: add_panel(), add_section(), add_setting()
  $mgr->add_control(new TplFormat($mgr, 'tplformat',[]));
  //set the transport method to the specific field
  $mgr->get_setting('head1font')->transport = 'postMessage';
});

JS

(function($) {
    "use strict";
    wp.customize("head1font", function(value) {
        value.bind(function(value) {
            $("h1.pagetitle").css("font-family",value);
        });
    });
})(jQuery);

本文标签： How to get a custom field in theme customizer to live update the element in preview window