How to add options to the WordPress Customizer

By /

The WordPress Customizer is a powerful tool that allows you to customize your theme’s appearance without needing to touch any code.

It’s a fantastic way to give your site a unique look and feel without having to learn complex coding languages.

One of the most popular ways to extend the Customizer’s functionality is by adding custom options and that’s what I’m going to talk about today.

Let’s dive in and explore how to add options to the WordPress Customizer.

Want to make your WordPress site truly unique? 🤩 Learn how to add custom options to the WordPress Customizer and take control of your theme’s design. No coding experience needed!

Getting Started with Customizer Options




Want to make your WordPress site truly unique? 🤩 Learn how to add custom options to the WordPress Customizer and take control of your theme’s design. No coding experience needed!

The first thing to know is that we’re going to be working with the Theme Customization API.

It’s essentially the foundation of the WordPress Customizer and provides all the tools we need to create and manage custom options.

The API is very well-documented and you’ll find tons of examples online.

To get started we need to register our custom settings and controls.

This is done using the customize_register hook which is triggered when the Customizer is loaded.

You’ll need to create a function that will be called by this hook.

Important: Always make sure you’re working on a development site. Never make changes directly on your live site.

Adding a Custom Logo

A common example is adding a custom logo to your theme.

By default the Customizer includes a Site Identity panel.

We’ll be working within that panel to add a logo upload field.

Here’s how it works:

  • Setting Up Your Theme: In your theme’s functions.php file (or a separate file if you’re organizing your theme functions) add the following code:

     function my_theme_customize_register( $wp_customize ) {
     // Add a new setting for the logo
     $wp_customize->add_setting( 'logo_image' array(
         'default'           => ''
         'sanitize_callback' => 'esc_url_raw'
         'transport'         => 'refresh'
     ) );

     // Add a new control for the logo
     $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize 'logo_image' array(
         'label'    => __( 'Logo' 'my-theme' )
         'section'  => 'title_tagline'
         'settings' => 'logo_image'
     ) ) );
 }
 add_action( 'customize_register' 'my_theme_customize_register' );

  • Explanation:

    • my_theme_customize_register is the function we’ll use to register our setting and control.
    • add_setting registers a new setting with the logo_image name.
    • sanitize_callback is a function used to sanitize the input (in this case making sure the URL is valid).
    • transport determines how the changes are handled. refresh means the whole page needs to refresh.
    • add_control creates the control itself. In this case we’re using a WP_Customize_Image_Control to create a logo upload field.
    • section indicates the section where the control should appear.
    • settings tells the control which setting it should be associated with.

Displaying the Logo in Your Theme

Now you’ll need to add the code to display the logo in your header template (header.php). Replace this:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Site Logo" />

with this:

<?php if ( get_theme_mod( 'logo_image' ) ) : ?>
    <img src="<?php echo esc_url( get_theme_mod( 'logo_image' ) ); ?>" alt="Site Logo" />
<?php else : ?>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Site Logo" />
<?php endif; ?>

This code checks if a logo image has been uploaded using the get_theme_mod function.

If there is one it’s displayed.

Otherwise the default image from your theme is shown.

Creating Custom Panels and Sections

The WordPress Customizer has a handful of pre-defined sections like ‘title_tagline’ and ‘colors’. But you can organize your settings better by creating custom panels and sections.

Let’s create a new panel called “Footer Options”.

  1. Adding a Custom Panel:

    function my_theme_customize_register( $wp_customize ) {
    // ... previous code ...

    // Add a new panel for footer options
    $wp_customize->add_panel( 'footer_options' array(
        'title'    => __( 'Footer Options' 'my-theme' )
        'priority' => 160 // Adjust the priority to control the panel's position
    ) );

    // ... subsequent code ...
}
add_action( 'customize_register' 'my_theme_customize_register' );

  2. Adding a Section:

    function my_theme_customize_register( $wp_customize ) {
    // ... previous code ...

    // Add a new section for footer text
    $wp_customize->add_section( 'footer_text' array(
        'title'    => __( 'Footer Text' 'my-theme' )
        'panel'    => 'footer_options'
        'priority' => 10 // Adjust the priority within the panel
    ) );

    // ... subsequent code ...
}
add_action( 'customize_register' 'my_theme_customize_register' );
    • priority controls the order of sections within a panel.

  3. Adding a Setting and Control for Footer Text:

    function my_theme_customize_register( $wp_customize ) {
    // ... previous code ...

    // Add a new setting for footer text
    $wp_customize->add_setting( 'footer_text' array(
        'default'           => __( 'Copyright &copy;  Your Site Name' 'my-theme' )
        'sanitize_callback' => 'wp_kses_post' // Sanitize HTML
        'transport'         => 'refresh'
    ) );

    // Add a new control for footer text
    $wp_customize->add_control( 'footer_text' array(
        'label'    => __( 'Footer Text' 'my-theme' )
        'section'  => 'footer_text'
        'settings' => 'footer_text'
        'type'     => 'textarea' // Use a textarea for multiline input
    ) );

    // ... subsequent code ...
}
add_action( 'customize_register' 'my_theme_customize_register' );

  4. Displaying Footer Text in Your Theme:

     <footer>
     <p><?php echo wp_kses_post( get_theme_mod( 'footer_text' ) ); ?></p>
 </footer>
    • This code retrieves the footer text from the Customizer using get_theme_mod and displays it in your footer.

Additional Tips

  • Sanitize Input: When working with custom options it’s crucial to sanitize user input to prevent security vulnerabilities. You can use functions like esc_url_raw wp_kses_post or sanitize_text_field to sanitize input based on its type.
  • Customize the Customizer: You can further customize the look and feel of the Customizer by adding custom CSS using the wp_add_inline_style function.
  • Custom Controls: While the default controls (text textarea image etc.) are sufficient for basic needs you can create custom controls for more complex options.

Exploring More Advanced Customization

As you become more familiar with the Customizer you can explore other advanced customization options:

  • Customizer Previews: You can use the customize_preview_init action to add JavaScript to improve the Customizer’s real-time preview.
  • Customizer Panels and Sections: You can add custom panels and sections to organize your options and make the Customizer more user-friendly.
  • Customizer Settings: You can use the customize_save_after action to perform additional actions after the Customizer is saved like clearing caches or updating other settings.

The Power of Customization

The WordPress Customizer provides a powerful and flexible way to customize your WordPress themes.

It’s a great way to create unique and personalized designs while still taking advantage of the ease of use and extensibility of WordPress.

Don’t hesitate to experiment and explore the various options available.

You can create themes that truly stand out from the crowd.

Just remember to always work on a development site and you’ll be well on your way to becoming a WordPress customization expert!




Want to make your WordPress site truly unique? 🤩 Learn how to add custom options to the WordPress Customizer and take control of your theme’s design. No coding experience needed!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top