In this article, we’ll delve into the world of WordPress Theme Customizer and learn how it can be utilized to create your own customizations. So far, we’ve understood what the Theme Customizer is, how it operates, and its unique components. We’ve also discussed serializing options for storage in the Database. It’s now time to put this knowledge into practice by creating our own customizations using the Theme Customizer.
First, let’s discuss transports – the method through which the Theme Customizer sends data to your theme for displaying changes. There are two mAIn ways to transfer data:
1. Refresh – This is the default method, where the theme frame refreshes when a user makes changes in the customizer before the updated appearance is displayed.
2. postMessage – This method must be explicitly set and offers a better user experience. With postMessage, an asynchronous request is made, allowing the theme’s appearance to update based on user settings without reloading the page.
We’ll implement two versions of a new theme customization: one using the Refresh transport and another using the postMessage transport. By the end, you’ll have access to both code versions for testing on your local setup.
Let’s start by adding a new setting that allows users to change the color of all anchors in their theme. This specific example might not be a common requirement, but it will teach you how to:
1. Integrate a new setting into an existing section.
2. Use `WP_Customize_Color_Control`.
3. Work with both Refresh and postMessage transports.
First, add a simple anchor to your `index.php` template:
“`htML
“`
Next, introduce a function hooked to the `customize_register` Action in your `functions.php` file:
“`php
function tcx_register_theme_customizer($wp_customize) {
// More code to come…
}
add_action(‘customize_register’, ‘tcx_register_theme_customizer’);
“`
Inside `tcx_register_theme_customizer`, use the predefined `Colors` section to add a new setting:
“`php
$wp_customize->add_setting(‘tcx_link_color’, array(‘default’ => ‘#000000’));
“`
Then, add a color control:
“`php
$wp_customize->add_control(new WP_Customize_Color_Control(
$wp_customize,
‘link_color’,
array(
‘label’ => __(‘Link Color’, ‘tcx’),
‘section’ => ‘colors’,
‘settings’ => ‘tcx_link_color’,
)
));
“`
Your final `tcx_register_theme_customizer` function should look like this:
“`php
function tcx_register_theme_customizer($wp_customize) {
$wp_customize->add_setting(‘tcx_link_color’, array(‘default’ => ‘#000000’));
$wp_customize->add_control(new WP_Customize_Color_Control(
$wp_customize,
‘link_color’,
array(
‘label’ => __(‘Link Color’, ‘tcx’),
‘section’ => ‘colors’,
‘settings’ => ‘tcx_link_color’,
)
));
}
add_action(‘customize_register’, ‘tcx_register_theme_customizer’);
“`
Now, when you test the customizer, you’ll see the color picker, but the link color won’t change on the frontend. To fix this, add the following function to `functions.php`:
“`php
function tcx_customizer_CSS() {
?>
a { color:; }
<?php
}
add_action('wp_head', 'tcx_customizer_css');
“`
After saving your changes, the link color will update in real-time within the customizer, but the page will flicker when changing other settings. To improve the user experience, we'll switch to the postMessage transport.
Update your `footer.php` to include a call to `wp_footer()`:
“`html
“`
Then, modify the `add_setting` call in `functions.php` to use the `postMessage` transport:
“`php
$wp_customize->add_setting(‘tcx_link_color’, array(‘default’ => ‘#000000’, ‘transport’ => ‘postMessage’));
“`
Create a `js` folder in your theme’s root directory and add a `theme-customizer.js` file. Inside, add the following JavaScript:
“`javascript
(function($) {
“use strict”;
wp.customize(‘tcx_link_color’, function(value) {
value.bind(function(to) {
$(‘a’).css(‘color’, to);
});
});
})(jQuery);
“`
Queue the JavaScript file in `functions.php`:
“`php
function tcx_customizer_live_preview() {
wp_enqueue_script(‘tcx-theme-customizer’, get_template_directory_uri().’/js/theme-customizer.js’, array(‘jquery’, ‘customize-preview’), ‘0.3.0’, true);
}
add_action(‘customize_preview_init’, ‘tcx_customizer_live_preview’);
“`
Now, you should be able to change the link color, title, tagline, and static front page options without refreshing the page.
For more advanced usage, stay tuned for the next article, where we’ll explore introducing our own custom sections, settings, and controls. In the meantime, experiment with the code provided to prepare for the upcoming installment!
相关文章
