0

I tried several plugins posted by Weston Ruter for jQuery created controls for the WP Customizer. They work but are different from those created via PHP. For example, controls created with PHP (customizer.php) respond normally to code in customize-controls.js or in customize-previews.js:

api( 'tzkmx_test_control', function( value ){
    value.bind( function( to ) {
        var answer = to;
    });
});

Controls created with jQuery do not respond to binding! Does anyone know how to bind them?

2
  • 1
    I do not see any jQuery controls in your question to debug, can you update your question using the edit link?
    – Tom J Nowell
    Nov 9, 2020 at 1:01
  • Did you also create the setting? Creating a controls is one thing, but binding to a value only works if you've first created the setting itself.
    – Aristeides
    Nov 9, 2020 at 10:06

2 Answers 2

0

Thanks Tom,

Example:

  1. Just download the plugin WPSE 286375: A dynamic dropdown-pages control from here:

  2. Extract next two files in the wp plugin folder: (wp-contents/plugins)

    wpse-286375-controls.js and 
    wpse-286375.php
    
  3. Activate WPSE 286375 plugin

  4. Go to wp dashboard/Customize/Homepage Settings

    there are 2 controls - Homepage and Posts Page with control's IDs "page_on_front" and "page_for_posts"

    and

    third control - Featured Page (it is from the activated plugin) with control ID "special_page"

    It is created with jQuery in wpse-286375-controls.js via:

    component.addControl = function() {
    api.control.add( new api.Control( 'special_page', _.extend(
      {},
      component.defaultParams,
      {       type: 'dropdown-pages',
              section: 'static_front_page',
      }) ) );};
    
  5. Copy next code in your working project in your file customize-controls.js and debug it with chrome/firefox:

    wp.customize('page_on_front', function( value ) {
              // Listen to value changes.
                       value.bind( function( to ) {
                                var answer = to;
                 });});
    

    Try to change something in Homepage control and voila the bind works and in var answer we can see the page ID of Home page.

  6. Now change the ID of Featured Page only:

       wp.customize('special_page', function( value ) {                                
    // Listen to value changes.                                                       
         value.bind( function( to ) {                                                 
                  var answer = to;                                                     
       });});
    

Try to change something in Featured Page control -> No bind and Nothing happen!

1
  • Aristeides, Weston did it in the plugin file wpse-286375.php. The name of the setting is "favorite_page".
    – Lingo
    Nov 9, 2020 at 17:19
0

Here's the 5ervant's solution that I found:

     parent.wp.customize.control( 'special_page', function( control ) {
             control.setting.bind( function( to ) {
                                var answer = to;
     });});

Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.