The WordPress customizer has been actively developed since its inception. APIs are constantly evolving, including JavaScript APIs. However, it is one of the least documented APIs in the WordPress Codex. As a result, there are only a few detailed records showing how to actually exploit the JavaScript API.
Taking advantage of the JavaScript API in the WordPress Customizer actually allows us to provide a more compelling real-time experience when customizing a theme, rather than just casting changes from the control to the preview window.
You may be familiar with how to use the Customizer JavaScript API to cast changes to the preview window in real time. To do this, we set the transport
mode to postMessage
and add the corresponding JavaScript code as shown below.
wp.customize( 'blogname', function( value ) { value.bind( function( to ) { $( '.site-title a' ).text( to ); } ); } );
However, we can also extend the API further, such as hiding, showing or moving parts, panels, controls, changing the value of a setting based on the value of another setting, and interconnecting previews and control interactions. These are what we will look at in this tutorial.
Quick Start
We’ve covered the WordPress Customizer quite extensively over several articles and series, covering the details of the Customizer API.
I think you have grasped the core concepts of the WordPress Customizer and components such as panels, sections, settings, and controls. Otherwise, I highly recommend you spend some time studying our tutorials and video courses on the topic before going any further.
- WordPress Theme Customizer Guide
- WordPress Theme Customizer
- Writing a WordPress theme that can be used by customizers
Settings and Controls
First we will examine the Settings and Controls added in the Customizer for this tutorial. We'll also look at the code to put them in place.
In this tutorial, we will focus on the website "Site Title". As you can see above, we have two controls: the native WordPress “Site Title” input field and a custom checkbox to enable or disable the “Site Title”. These two controls are located in the Site Identification section. To the right of the image is a preview where you can see the "Site Title" being rendered.
Additionally, as you can see below, we have two controls located in the Colors section for changing the Site Title color and its hover
status color.
Underlying code
Our theme is based on underscore, where all customizer related code is placed in the /inc/customizer.php
file.
function tuts_customize_register( $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; $wp_customize->get_control( 'blogdescription' )->priority = '12'; $wp_customize->get_setting( 'header_textcolor' )->default = '#f44336'; $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage'; // Checkbox to Display Blogname $wp_customize->add_setting( 'display_blogname', array( 'transport' => 'postMessage', ) ); $wp_customize->add_control( 'display_blogname', array( 'label' => __( 'Display Site Title', 'tuts' ), 'section' => 'title_tagline', 'type' => 'checkbox', 'priority' => 11, ) ); // Add main text color setting and control. $wp_customize->add_setting( 'header_textcolor_hover', array( 'default' => '#C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_hover', array( 'label' => __( 'Header Text Color: Hover', 'tuts' ), 'section' => 'colors', 'priority' => '11' ) ) ); } add_action( 'customize_register', 'tuts_customize_register' );
As you can see above, we made some modifications to the code to meet the needs of this tutorial.
- We lowered the WordPress built-in setting
blogdescription
to12
so that the checkbox settingdisplay_blogname
appears below the "Site Title" input field. - We create a new control named
display_blogname
. We setpriority
to11
, which in our example is between the Site Title and Tagline input fields. - Set the
header_text
default color to#f44336
and thetransport
type topostMessage
. - We also created a new setting,
header_text_color
. Likewise, we'll also set the priority to11
so that it appears below theheader_textcolor
setting.
All these settings are set via postMessage
, not via refresh
. The postMessage
option allows values to be transferred asynchronously and displayed in the preview window in real time. However, we also have to write our own JavaScript to handle the changes.
Load JavaScript
We need to create two JavaScript files: one file customizer-preview.js
to handle the preview, and another file customizer-control.js
to handle the inside of the customizer panel of controls.
js ├── customizer-preview.js // 1. File to handle the Preview ├── customizer-control.js // 2. File to handle the Controls ├── navigation.js └── skip-link-focus-fix.js
Include the following code in customizer-preview.js
.
( function( $ ) { // Codes here. } )( jQuery );
It is currently an empty enclosing JavaScript function. We'll discuss more specifically how to preview changes in the preview window in the next tutorial in this series.
In another file customizer-control.js
, we add the following code:
(function( $ ) { wp.customize.bind( 'ready', function() { var customize = this; // Codes here } ); })( jQuery );
As you can see above, we will wrap this code in this file in the customizer ready
event. This will ensure that everything in the customizer, including settings, panels, and controls, is completely ready before we start executing any custom functionality.
Finally, after adding the code, we will load these two JavaScript files in two different locations.
// 1. customizer-preview.js function tuts_customize_preview_js() { wp_enqueue_script( 'tuts_customizer_preview', get_template_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview' ), null, true ); } add_action( 'customize_preview_init', 'tuts_customize_preview_js' ); // 2. customizer-control.js function tuts_customize_control_js() { wp_enqueue_script( 'tuts_customizer_control', get_template_directory_uri() . '/js/customizer-control.js', array( 'customize-controls', 'jquery' ), null, true ); } add_action( 'customize_controls_enqueue_scripts', 'tuts_customize_control_js' );
customizer-preview.js
文件将通过 customize_preview_init
操作挂钩加载到定制器预览窗口中。 customizer-control.js
文件将加载到定制程序后端,其中的设置和控制元素可通过 customize_controls_enqueue_scripts
操作挂钩访问。
下一步是什么?
WordPress 自成立以来一直在 PHP 方面进行了大量投资。因此,支持该生态系统的大多数开发人员对 PHP API 比 JavaScript API 更加熟练和熟悉也就不足为奇了。
直到最近,它才通过定制器和 WP-API 广泛集成了 JavaScript。掌握 WordPress 定制器中的 JavaScript API 可能是一个相当大的挑战。如前所述,WordPress 的这一面目前记录最少。因此,我们将彻底讨论这个主题。
同时,如果您正在寻找其他实用程序来帮助您构建不断增长的 WordPress 工具集,或者学习代码并更加精通 WordPress,请不要忘记查看我们提供的内容可在 Envato 市场购买。
在此,我们已准备好使用 WordPress JavaScript API 的所有基本元素。我们就到此结束。在本系列的下一部分中,我们将揭示 WordPress 中 JavaScript API 背后的更多内容,并开始编写可立即在主题中实现的功能脚本。
敬请期待!
The above is the detailed content of Getting Started: Understanding the WordPress Customizer JavaScript API. For more information, please follow other related articles on the PHP Chinese website!

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

This article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

Notepad++7.3.1
Easy-to-use and free code editor

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
