Customizer: When to use customize_preview_init VS customize_controls_enqueue_scripts

As the names themselves seem to state, one of those hooks to the customize-controls, the other to the customize-preview. They are not the same and you could in fact use them both, for different purposes.

  • If you’re hooking in JS code to affect the controls in the customizer, then you would want to use customize_controls_enqueue_scripts.

  • If you’re hooking in JS code to be in the preview frame and possibly to receive events from the controls via postMessage, and thus able to dynamically change the contents of the preview frame rapidly, you would use customize_preview_init.

Twenty Fourteen actually uses them both. The first one is used to add a featured-content-suggest script to the custom controls in the customizer. The second is used for all the postMessage code in the preview frame.

Specifically, the customize_preview_init hook is fired from the wp_loaded action when the customizer is_preview() returns true and is_admin() returns false… so only in the preview window, not on the admin side of things… which is where you want to enqueue scripts that adjust the preview frame only.

Related Posts:

  1. Customizer JS API
  2. Is it Possible to Extend WP Customize JS Methods?
  3. wp.customize.bind ready event not fired
  4. Detecting WordPress Customizer Panel
  5. WP Customizer set a value via javascript (to create presets)
  6. wp_customize_support_script – do I need it?
  7. Customizer – instantiating settings and controls via javascript
  8. Customizer JS API: Defining control settings
  9. Customizer JS API: Adding Setting Dynamically Not Working
  10. How to overwrite JS variable with wp_localize _script?
  11. Theme Customiser not live previewing changes on pseudo elements
  12. the Customizer – proper way to instantiate an image upload control via javascript
  13. Preserve Javascript Through Customizer Preview Navigation
  14. How to check if customize previewer is refreshing?
  15. JavaScript in WordPress Customizer
  16. Customizer JS API: Adding a “dropdown-pages” control
  17. Accessing customizer values in javascript
  18. Running JS after theme customizer finished initialization
  19. customize_preview_init: listening for any changes from Customizer preview area
  20. How to conditionally show/hide controls & sections in WordPress customizer?
  21. Multiple Conditional Controllers
  22. WordPress customizer get control
  23. Using webpack to add customizer live preview functionality – wp.customize is not a function
  24. Adding and removing hidden buttons from WordPress Customizer Tinymce widget editor using javascript API
  25. Get a default value of the Customizer setting using wp.customize API (JS)
  26. How to add customizer control via javascript ( wp.customizer.control.add )
  27. Load page in customizer preview on panel click?
  28. Customizer JS API: Defining active_callback for a section
  29. Adding Code into Theme Customizer Header
  30. Custom JS text area in customizer is being formatted wrong in document
  31. customize-controls.js – extend api.previewer
  32. Multiple jQuery inputs or binds in Customizer Control Javascripts
  33. Show sections based on a control in WordPress Customizer using JS API
  34. How do I add a class to Customizer preview based on class of Customizer control? (Customizer Javascript API)
  35. LayersWP Customizer White Blank Screen
  36. Get a default customizeAction text for a section using Customizer JS API
  37. Receive “menu-toogle” event from section menu in customizer
  38. Dynamically creating charts of each row in an HTML table with chart.js
  39. How do you reverse a string in-place in JavaScript?
  40. How to set NODE_ENV to production/development in OS X
  41. Uncaught TypeError: Cannot read property ‘length’ of undefined
  42. Python to JavaScript converter
  43. Set style using pure JavaScript
  44. Check if element exists in jQuery
  45. Checking a Url in Jquery/Javascript
  46. Usage of the backtick character (`) in JavaScript
  47. AJAX response error: net::ERR_EMPTY_RESPONSE
  48. TypeError: Cannot Set property ‘onclick’ of null
  49. Sorting strings in descending order in Javascript (Most efficiently)?
  50. Mismatched anonymous define() module
  51. Function is not defined – Uncaught ReferenceError
  52. Convert UTC date time to local date time
  53. How can I convert a string to boolean in JavaScript?
  54. “.addEventListener is not a function” why does this error occur?
  55. Textarea Auto height
  56. Angular 2 – Using ‘this’ inside setTimeout
  57. Download data URL file
  58. Why use Redux over Facebook Flux?
  59. What language is JavaScript written in?
  60. How to output numbers with leading zeros in JavaScript?
  61. Remove not alphanumeric characters from string
  62. Scroll to bottom of div?
  63. Detect a finger swipe through JavaScript on the iPhone and Android
  64. How to use onBlur event on Angular2?
  65. img onclick call to JavaScript function
  66. Bootstrap Collapse not Collapsing
  67. How to scroll to top of page with JavaScript/jQuery?
  68. Check if a JavaScript string is a URL
  69. Submit form without reloading page [duplicate]
  70. “React.Children.only expected to receive a single React element child” error when putting and in a
  71. What is the difference between Bower and npm?
  72. How to embed an autoplaying YouTube video in an iframe?
  73. Cannot read property ‘style’ of undefined — Uncaught Type Error
  74. clearInterval() not working [duplicate]
  75. How to use Head JS with all enqueued scripts?
  76. Switch to the library tab in the media uploader
  77. Correctly handling WordPress core data retrieval in Gutenberg
  78. Javascript not included
  79. Hide/show customizer controls based on other settings in Customizer
  80. How to use wp.hooks.addAction() in React JS/Gutenberg?
  81. How to run JavaScript function in WooCommerce checkout?
  82. How do display simple page for printing product info? [closed]
  83. What is the “proper” way to generate a javascript variable depending on a custom field value?
  84. Adding nonce or hashes to inline scripts
  85. WordPress Media Library: Custom tab content displayed in “Media Library” tab
  86. Manually mark imported photo as selected in media library
  87. How to retrieve data from database, then pass it to Javascript?
  88. Weird links found in wordpress footer
  89. Add script to page at certain location in wordpress
  90. Absolutely print script in footer
  91. How do you create your own link preview for my website?
  92. Can’t get rid of JQMIGRATE: Migrate is installed, version 3.3.2. Manually updated all the libralies and site. 5.8.2
  93. Redirect to homepage if attmpting to leave intranet [closed]
  94. Twenty seventeen theme dropdown menu issue
  95. How to correctly load this jquery script through the file functions.php?
  96. customizer live preview layout picker
  97. Unserialize WP_Options options programatically?
  98. javascript errors on mobile browser, not on desktop
  99. Javascript file not included only on home page
  100. Get current day using javascript [closed]

Leave a Comment