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

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
}

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

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

Hint

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

Practice

1. What is the main purpose of the WordPress Theme Customizer?

easy

A. To manage user roles and permissions

B. To install new plugins automatically

C. To allow users to change site appearance with a live preview

D. To create new posts and pages

Solution

1. Step 1: Understand the role of the Theme Customizer

   The Theme Customizer is designed to let users modify the look and feel of their site and see changes immediately.

2. Step 2: Compare options with this purpose

   Options B, C, and D relate to plugins, user management, and content creation, which are not the Customizer's function.

3. Final Answer:

   To allow users to change site appearance with a live preview -> Option C

4. Quick Check:

   Theme Customizer = live preview appearance changes [OK]

Hint: Customizer = live preview for appearance changes [OK]

Common Mistakes:

• Confusing Customizer with plugin installer
• Thinking it manages users or content
• Assuming it edits posts directly

2. Which function is used to add a new section in the WordPress Theme Customizer?

easy

A. add_section()

B. add_control()

C. add_setting()

D. register_section()

Solution

1. Step 1: Identify the function for adding sections

   The function add_section() is specifically used to add a new section in the Theme Customizer.

2. Step 2: Differentiate from other functions

   add_setting() adds settings, add_control() adds controls, and register_section() is not a valid function.

3. Final Answer:

   add_section() -> Option A

4. Quick Check:

   Section addition = add_section() [OK]

Hint: Sections use add_section(), settings use add_setting() [OK]

Common Mistakes:

• Using add_setting() to add sections
• Confusing add_control() with add_section()
• Using non-existent register_section()

3. Given this code snippet in a Theme Customizer setup:

 $wp_customize->add_setting('header_text', [
  'default' => 'Welcome!',
  'sanitize_callback' => 'sanitize_text_field'
]);
$wp_customize->add_control('header_text', [
  'label' => 'Header Text',
  'section' => 'title_tagline',
  'type' => 'text'
]);

What will get_theme_mod('header_text') return if the user has not changed the setting?

medium

A. An empty string

B. null

C. An error message

D. 'Welcome!'

Solution

1. Step 1: Check the default value in add_setting()

   The setting 'header_text' has a default value of 'Welcome!'.

2. Step 2: Understand get_theme_mod behavior

   If the user has not changed the setting, get_theme_mod() returns the default value.

3. Final Answer:

   'Welcome!' -> Option D

4. Quick Check:

   Default value returned by get_theme_mod() = 'Welcome!' [OK]

Hint: get_theme_mod returns default if no user change [OK]

Common Mistakes:

• Assuming it returns null if unset
• Expecting empty string instead of default
• Thinking it throws an error without user input

4. Identify the error in this Theme Customizer code snippet:

 $wp_customize->add_setting('footer_text', [
  'default' => 'Footer here',
  'sanitize_callback' => 'sanitize_text_field'
]);
$wp_customize->add_control('footer_text', [
  'label' => 'Footer Text',
  'section' => 'footer_section',
  'type' => 'textarea'
]);

Assuming 'footer_section' was never added, what issue will occur?

medium

A. The control will not display because the section does not exist

B. The setting will fail to save user input

C. The sanitize_callback will cause a fatal error

D. The default value will be ignored

Solution

1. Step 1: Check if the section exists

   The control references 'footer_section', but this section was never added with add_section().

2. Step 2: Understand control behavior without a valid section

   Controls must belong to existing sections; otherwise, they won't display in the Customizer UI.

3. Final Answer:

   The control will not display because the section does not exist -> Option A

4. Quick Check:

   Control needs valid section to display = true [OK]

Hint: Controls need existing sections to show [OK]

Common Mistakes:

• Assuming setting fails to save without section
• Thinking sanitize_callback causes error here
• Believing default value is ignored

5. You want to add a color picker in the Theme Customizer for the site background color. Which sequence of actions is correct?

hard

A. Use add_control() first, then add_setting(), then add_section()

B. Use add_setting() with default color, add_section() for background, then add_control() with type 'color'

C. Only add_setting() is needed with type 'color'

D. Add_section() with type 'color', then add_setting(), then add_control()

Solution

1. Step 1: Add a section for background settings

   First, create a section using add_section() to group background options.

2. Step 2: Add a setting with a default color

   Use add_setting() to define the background color setting and provide a default value.

3. Step 3: Add a color picker control linked to the setting and section

   Use add_control() with type => 'color' to let users pick a color.

4. Final Answer:

   Use add_setting() with default color, add_section() for background, then add_control() with type 'color' -> Option B

5. Quick Check:

   Section, setting, control in order with color type [OK]

Hint: Add section, then setting, then color control [OK]

Common Mistakes:

• Adding control before section or setting
• Skipping add_section()
• Using wrong control type for color picker