Customizer fields

What are customizer fields?

Customizer fields in WordPress refer to the settings and controls available in the WordPress Customizer. The Customizer is an integral part of WordPress, providing a user-friendly interface for adjusting various aspects of your website without requiring any coding knowledge. You can imagine that this is really useful for your clients. Now, with wp-lemon you can easily add your own customizer fields.

Examples of usage

Custom fields in the WordPress Customizer can be incredibly useful for adding flexible, client-specific features to a website. For example, if you have a client who needs a a unique disclaimer or footer text. By creating a custom field for this purpose, clients can easily update settings like disclaimers, legal notices, cookiebar text or any other text element directly from the WordPress dashboard.

In the code example we've used a bit further down you can see what this would look like in wp-lemon.

Adding your own customizer fields in wp-lemon

Start of by navigating to libary/models, in this folder you can create a new file named customizer.php.

Now you can add your own custom fields with a setting and control, the setting handles live-previewing, saving, and sanitization of your customizer objects. Each setting is managed by a control object, 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).

Want to take a look yourself at the WordPress documentation for settings and controls? You can do that right here.

Below is an example of how this will look in case of making a customizer field for an unique disclaimer text.

Copy
<?php

/**
 *Customizer
 *
 * @package WordPress
 * @subpackage WP_Lemon\Child
 */

namespace WP_Lemon\Child\Models;

/**
 * Register customizer fields via native api.
 *
 * @param \WP_Customize_Manager $wp_customize  The cutomizer object we are going to extend.
 * @return void
 */
function customize_register(\WP_Customize_Manager  $wp_customize)
{
   $wp_customize->add_section(
        'my-custom-section',
        [
            'title'    => _x('Custom settings', 'Backend - Customizer section title', 'wp-lemon-child'),
            'priority' => 30,
            'panel'    => 'lemon_customizer',
        ]
    );

   $wp_customize->add_setting(
      'disclaimer',
      [
         'validate_callback' => '',
         'sanitize_callback' => 'wp_kses_post',
      ]
   );

   $wp_customize->add_control(
      'disclaimer',
      [
         'label'       => _x('Disclaimer footer text', 'Backend - Customizer field label', 'wp-lemon-child'),
         'section'     => '-custom-section',
         'type'        => 'textarea',
      ]
   );
}
add_action('customize_register', __NAMESPACE__ . '\\customize_register');

The most important parameter when adding a control is its type — this determines what type of UI the Customizer will display.

• <input>
• checkbox
• textarea
• radio
• select

For any input type supported by the html input element, simply pass the type attribute value to the type parameter when adding the control. This allows support for control types such as text, hidden, number, range, url, tel, email, search, time, date, datetime, and week, pending browser support.

Using your own customizer field

After adding your content trough the WordPress customizer you can now use the value from your customizer field in any twig file. To use the disclaimer text example from above this would look like this:

Copy
$disclaimer_text = get_theme_mod('disclaimer') ;

or in a twig file:

Copy
<p>
   {{ get_theme_mod('disclaimer') }}
</p>