Theme customizer in Wordpress - Mini Project: Build & Apply

Theme customizer

📖 Scenario: You are building a simple WordPress theme that allows users to customize the site title color using the Theme Customizer. This helps site owners easily change the look of their site without editing code.

🎯 Goal: Build a WordPress theme customizer feature that adds a setting and control for the site title color, and applies the chosen color to the site title in the theme.

📋 What You'll Learn

Create a function to register the customizer setting and control

Add a setting called site_title_color with default #000000

Add a color picker control for site_title_color

Output the chosen color in the site title CSS style

💡 Why This Matters

🌍 Real World

Many WordPress themes let users customize colors and styles easily through the Theme Customizer. This project shows how to add such options.

💼 Career

WordPress developers often create themes with customizable options to improve user experience and theme flexibility.

1

Create the customizer function and add a setting

Create a function called mytheme_customize_register that accepts $wp_customize as a parameter. Inside it, add a setting named site_title_color with a default value of #000000 using $wp_customize->add_setting().

Wordpress

<?php
// Your code here

Need a hint?

Use $wp_customize->add_setting() inside your function to add the setting with the exact name site_title_color and default #000000.

2

Add a color picker control for the site title color

Inside the mytheme_customize_register function, add a color picker control for the site_title_color setting using $wp_customize->add_control() with WP_Customize_Color_Control. Set the label to 'Site Title Color' and the section to 'colors'.

Wordpress

add_setting('site_title_color', [
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);
    // Your code here
}

Need a hint?

Use new WP_Customize_Color_Control with the correct parameters inside $wp_customize->add_control().

3

Hook the customizer function to customize_register

Add an action hook to connect the mytheme_customize_register function to the customize_register action using add_action().

Wordpress

add_setting('site_title_color', [
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'site_title_color', [
        'label' => 'Site Title Color',
        'section' => 'colors',
        'settings' => 'site_title_color'
    ]));
}

// Your code here

Need a hint?

Use add_action('customize_register', 'mytheme_customize_register') to register your function.

4

Output the custom color in the site title style

Create a function called mytheme_customize_css that outputs a <style> block in the site header. Use get_theme_mod('site_title_color', '#000000') to get the color and apply it to the CSS selector .site-title a. Hook this function to wp_head using add_action().

Wordpress

add_setting('site_title_color', [
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'site_title_color', [
        'label' => 'Site Title Color',
        'section' => 'colors',
        'settings' => 'site_title_color'
    ]));
}

add_action('customize_register', 'mytheme_customize_register');

// Your code here

Need a hint?

Use get_theme_mod to get the color and echo it inside a <style> block hooked to wp_head.