How to create custom controls for the WordPress theme customizer?

How to create custom controls for the WordPress theme customizer?

In order to generate a custom control, you need to create a new class and extend it using the WP_Customizer_Control class. This class uses the “$wp_customize->add_control()” method to add your own custom control to your WordPress site theme customization screen.

Where do I find the Customizer in WordPress?

This hook gives you access to the $wp_customize object, which is an instance of the WP_Customize_Manager class. It’s this class object that controls the Customizer screen. Whenever you add your Panels, Sections, Settings or Controls (including Custom Controls), they need to be within a function used by this hook.

Which is the primary customizer object in WordPress?

Controls are the primary Customizer object for creating UI. Specifically, every control must be associated with a setting, and that setting will save user-entered data from the control to the database (in addition to displaying it in the live-preview and sanitizing it).

What are the custom input attributes in WordPress?

List of custom input attributes for control output, where attribute names are the keys and values are the values. Not used for ‘checkbox’, ‘radio’, ‘select’, ‘textarea’, or ‘dropdown-pages’ control types. Default empty array.

What does the customize API do in WordPress?

The Customize API (Customizer) is a framework for live-previewing any change to WordPress. It provides a unified interface for users to customize various aspects of their theme and their site, from colors and layouts to widgets, menus, and more.

How to use the Customizer in WordPress core?

This is used in WordPress core to add a link on the widgets admin page to link directly to the widgets panel within the customizer, as well as to connect visible edit shortcuts in the customize preview with the associated controls in the customize pane. When registering a panel, section, or control in PHP, you can supply a priority parameter.

Where is the JavaScript API in WordPress 4.1?

In WordPress 4.1, newly-expanded JavaScript APIs were introduced for all customizer objects. The entire JavaScript API is currently located in a single file, wp-admin/js/customize-controls.js, which contains models for all objects, core custom controls, and more.

How to add checkbox field to WordPress customizer?

In WordPress Customizer, you can add different types of HTML input fields and checkbox is one of them. To add a checkbox with WordPress customizer all you have to set the type of customizer control to the checkbox. Let me show you what I am talking about.

How to add a control to a WP manager?

(array) (Optional) Array of properties for the new Control object. See WP_Customize_Control::__construct () for information on accepted arguments. ( WP_Customize_Control) The instance of the control that was added. Return added WP_Customize_Control instance.

What are the different types of customizer objects?

There are four main types of Customizer objects: Panels, Sections, Settings, and Controls. Settings associate UI elements (controls) with settings that are saved in the database. Sections are UI containers for controls, to improve their organization. Panels are containers for sections, allowing multiple sections to be grouped together.

Which is the default setting for the Customizer?

It is usually most important to set the default value of the setting as well as its sanitization callback, which will ensure that no unsafe data is stored in the database. Typical theme usage: Note that the Customizer can handle options stored as keyed arrays for settings using the option type.

How do I add a customizer to WP?

To add anything to the Customizer, you need to use the customize_register action hook. This hook gives you access to the $wp_customize object, which is an instance of the WP_Customize_Manager class. It’s this class object that controls the Customizer screen.

What are the Customizer panels in WordPress 4.0?

The Customizer Panels API was introduced in WordPress 4.0, and allows developers to create an additional layer of hierarchy beyond controls and sections. More than simply grouping sections of controls, panels are designed to provide distinct contexts for the Customizer, such as Customizing Widgets, Menus, or perhaps in the future, editing posts.

How to add custom header and custom background in WordPress?

Once you add_theme_supports in your themes function.php file for custom-header and custom-background you get three more panels; Colors, Header Image and Background Image. You will find reference to the Customizer panels in WordPress core at /wp-includes/class-wp-customize-manager.php

How to add custom sections to the Customizer?

* * Add custom sections and settings to the Customizer. * * @package twentytwelve-child * @copyright Copyright (c) 2016, Nose Graze Ltd. * @license GPL2+ */ class Twenty_Twelve_Child_Customizer { // All our future code will go in here. } You don’t have to use a class, but I prefer it since I think it makes things feel a bit more organized.