Adding Theme Options – Because Users Love Choices

Why Theme Options? 🎨

Imagine giving users the ability to control the look and feel of your theme without ever touching code! Theme options are all about user empowerment. From changing the site’s colors to selecting custom fonts or adding a custom logo—theme options allow site admins to personalize their site, and we developers get to provide them with a fun interface to do it!

In this chapter, we’ll walk through the process of adding a theme options panel to WordPress using the Customizer API (because it’s fancy and modern, and we like fancy and modern).

Step 1: Introducing the WordPress Customizer API

The WordPress Customizer allows users to live-preview changes before saving them. Want to change the background color or upload a custom logo? With the Customizer, users can tweak settings and see the results instantly without breaking anything! 🚀

Let’s start by adding basic support for the Customizer.

In your theme’s functions.php, let’s hook into the Customizer API.

function my_noob_theme_customize_register($wp_customize) {
    // Add sections, settings, and controls here
}
add_action('customize_register', 'my_noob_theme_customize_register');

What did we just do? 👇

• customize_register: This is the hook that we use to add custom sections, settings, and controls to the WordPress Customizer.

Step 2: Adding Theme Options (Colors, Logos, and More!) 🎨

Let’s create some basic customization options. How about giving users the ability to change the background color of their site and upload a custom logo?

Step 2.1: Adding a Background Color Option

Add this code inside the my_noob_theme_customize_register function:

function my_noob_theme_customize_register($wp_customize) {
    // Background color setting
    $wp_customize->add_setting('background_color', array(
        'default' => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport' => 'postMessage', // Enables live preview
    ));

    // Background color control
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'background_color_control', array(
        'label' => __('Background Color', 'mytheme'),
        'section' => 'colors', // Adds it to the existing "Colors" section
        'settings' => 'background_color',
    )));
}

What’s happening here? 🤓

• add_setting(): This creates a new setting (background color in this case) that will be stored in the database.
• add_control(): This creates the actual interface that users will interact with, in this case, a color picker.
• transport: This tells WordPress whether the change should be applied instantly (postMessage) or after refreshing (refresh). We’re using postMessage for a live preview.

Step 2.2: Adding a Custom Logo Option

Let’s add a setting to allow users to upload their own logo:

$wp_customize->add_setting('site_logo', array(
    'default' => '',
    'sanitize_callback' => 'absint', // Sanitizes ID of attachment
));

$wp_customize->add_control(new WP_Customize_Media_Control($wp_customize, 'site_logo_control', array(
    'label' => __('Site Logo', 'mytheme'),
    'section' => 'title_tagline', // Adds it to the "Site Identity" section
    'settings' => 'site_logo',
)));

This code adds a media uploader where users can upload their custom logo. Pretty slick, huh? 🤘

Step 3: Displaying Custom Theme Options in the Theme

Now that we’ve added the settings and controls to the Customizer, we need to use these values in our theme’s templates.

For example, let’s use the background color option in our theme’s header.php:

<style>
    body {
        background-color: <?php echo get_theme_mod('background_color', '#ffffff'); ?>;
    }
</style>

And let’s display the custom logo in the theme. Replace the existing site title or logo code in header.php with this:

<?php
$site_logo = get_theme_mod('site_logo');
if ($site_logo) : ?>
    <img src="<?php echo wp_get_attachment_url($site_logo); ?>" alt="<?php bloginfo('name'); ?>">
<?php else : ?>
    <h1><?php bloginfo('name'); ?></h1>
<?php endif; ?>

Boom! Now users can change their background color and logo right from the Customizer.

Step 4: Making Theme Options Even Fancier with Live Preview ✨

Remember the postMessage transport we used earlier? It allows live updates without page refresh. To make live previews work, we need to add some JavaScript magic.

Create a file called customizer.js in your theme’s js/ directory, and add this code:

(function($) {
    wp.customize('background_color', function(value) {
        value.bind(function(newval) {
            $('body').css('background-color', newval);
        });
    });
})(jQuery);

Now enqueue this script in functions.php:

function mytheme_customize_preview_js() {
    wp_enqueue_script('mytheme-customizer', get_template_directory_uri() . '/js/customizer.js', array('customize-preview'), null, true);
}
add_action('customize_preview_init', 'mytheme_customize_preview_js');

This script listens for changes to the background color in the Customizer and updates the background color live on the page without needing to refresh! Smooth, right? 😎

Step 5: Adding More Customizer Options

Feel free to get creative here! You can add settings for typography (like Google Fonts), layout choices (like full-width vs boxed layout), and even color schemes.

Here’s how you could add a font size option:

$wp_customize->add_setting('font_size', array(
    'default' => '16px',
    'sanitize_callback' => 'sanitize_text_field',
));

$wp_customize->add_control('font_size_control', array(
    'label' => __('Font Size', 'mytheme'),
    'section' => 'typography',
    'settings' => 'font_size',
    'type' => 'text',
));

And then apply the custom font size in your template:

<style>
    body {
        font-size: <?php echo get_theme_mod('font_size', '16px'); ?>;
    }
</style>

Up Next: Internationalization – Making Your Theme Speak Multiple Languages! 🌍🗣️

Next, we’ll explore how to make your theme multilingual, so users from around the world can enjoy your creation! Let’s globalize this masterpiece!