Create A New WordPress Customizer Theme Section and fields

This code snippet is for WordPress theme customization. Here’s what it does:

It first checks whether a function named theme_customize_register exists. If not, it proceeds with declaring this function.
Inside the theme_customize_register function, it utilizes WordPress’s Customizer API to add a new section called “Store Details” with a priority of 30.
Within this section, it adds various controls such as ‘website_url’, ‘website_name’, ‘website_address’, ‘website_phone’, ‘website_phone_link’, ‘website_email’, ‘website_starting_price’, ‘website_financing_link’, ‘website_action’, ‘website_state’, ‘website_facebook’, ‘website_youtube’, ‘website_instagram’, ‘financing_url’, ‘website_slogan’, ‘facebook_app_id’, ‘twitter_username’, ‘website_solutions’, ‘website_submitemail’, ‘staff_website_url’, ‘website_footer_text’, and ‘uploads_dir’. These controls allow the user to customize different aspects of the theme, such as URLs, contact information, social media links, and more.
Each control is added using add_setting to define the setting and add_control to define how it appears in the Customizer.
Finally, it hooks the theme_customize_register function to the customize_register action, ensuring that the customizations are registered when the Customizer is initialized.

// Check if the function doesn't exist before declaring it
if ( ! function_exists( 'theme_customize_register' ) ) {
    // Register custom control section
    function theme_customize_register($wp_customize) {
        // Add a new section
        $wp_customize->add_section('custom_section', array(
            'title' => __('Store Details', 'puppies'), // Section title
            'priority' => 30, // Priority of the section
        ));

        // Add control for 'website_url'
        $wp_customize->add_setting('website_url', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_url', array(
            'label' => __('Website URL', 'puppies'),
            'section' => 'custom_section',
            'type' => 'url',
        ));

        // Add control for 'website_name'
        $wp_customize->add_setting('website_name', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_name', array(
            'label' => __('Website Name', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_address'
        $wp_customize->add_setting('website_address', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_address', array(
            'label' => __('Website Address', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_phone'
        $wp_customize->add_setting('website_phone', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_phone', array(
            'label' => __('Website Phone', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_phone_link'
        $wp_customize->add_setting('website_phone_link', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_phone_link', array(
            'label' => __('Website Phone Link', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

                // Add control for 'website_phone_link'
        $wp_customize->add_setting('website_email', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_email', array(
            'label' => __('Website Email', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_starting_price'
        $wp_customize->add_setting('website_starting_price', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_starting_price', array(
            'label' => __('Website Starting Price', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_financing_link'
        $wp_customize->add_setting('website_financing_link', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_financing_link', array(
            'label' => __('Website Financing Link', 'puppies'),
            'section' => 'custom_section',
            'type' => 'url',
        ));

        // Add control for 'website_action'
        $wp_customize->add_setting('website_action', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_action', array(
            'label' => __('Website Action', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Repeat the process for each option in the list
        // Add controls for other options similarly
        // Remember to replace 'puppies' with your actual theme's name
        
        // Add control for 'website_state'
        $wp_customize->add_setting('website_state', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_state', array(
            'label' => __('Website State', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_facebook'
        $wp_customize->add_setting('website_facebook', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_facebook', array(
            'label' => __('Website Facebook', 'puppies'),
            'section' => 'custom_section',
            'type' => 'url',
        ));

        // Add control for 'website_youtube'
        $wp_customize->add_setting('website_youtube', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_youtube', array(
            'label' => __('Website YouTube', 'puppies'),
            'section' => 'custom_section',
            'type' => 'url',
        ));

        // Add control for 'website_instagram'
        $wp_customize->add_setting('website_instagram', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_instagram', array(
            'label' => __('Website Instagram', 'puppies'),
            'section' => 'custom_section',
            'type' => 'url',
        ));

        // Add control for 'financing_url'
        $wp_customize->add_setting('financing_url', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('financing_url', array(
            'label' => __('Financing URL', 'puppies'),
            'section' => 'custom_section',
            'type' => 'url',
        ));

        // Add control for 'website_slogan'
        $wp_customize->add_setting('website_slogan', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_slogan', array(
            'label' => __('Website Slogan', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'facebook_app_id'
        $wp_customize->add_setting('facebook_app_id', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('facebook_app_id', array(
            'label' => __('Facebook App ID', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'twitter_username'
        $wp_customize->add_setting('twitter_username', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('twitter_username', array(
            'label' => __('Twitter Username', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_solutions'
        $wp_customize->add_setting('website_solutions', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_solutions', array(
            'label' => __('Website Solutions', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'website_submitemail'
        $wp_customize->add_setting('website_submitemail', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_submitemail', array(
            'label' => __('Website Submit Email', 'puppies'),
            'section' => 'custom_section',
            'type' => 'email',
        ));

        // Add control for 'staff_website_url'
        $wp_customize->add_setting('staff_website_url', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('staff_website_url', array(
            'label' => __('Staff Website URL', 'puppies'),
            'section' => 'custom_section',
            'type' => 'url',
        ));

        // Add control for 'website_footer_text'
        $wp_customize->add_setting('website_footer_text', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('website_footer_text', array(
            'label' => __('Website Footer Text', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));

        // Add control for 'uploads_dir'
        $wp_customize->add_setting('uploads_dir', array(
            'default' => '', // Default value
            'type' => 'theme_mod', // Type of setting
        ));
        $wp_customize->add_control('uploads_dir', array(
            'label' => __('Uploads Directory', 'puppies'),
            'section' => 'custom_section',
            'type' => 'text',
        ));
    
    }
}

// Hook the function to the customize_register action
add_action('customize_register', 'theme_customize_register');

To display the information set in the WordPress customizer on the frontend of your website, you’ll need to retrieve these values and output them where you want them to appear. You can do this using WordPress template tags. Here’s how you can call these information on the frontend:

Add this to your functions.php file


// Website URL
$website_url = get_theme_mod('website_url');

// Website Name
$website_name = get_theme_mod('website_name');

// Website Address
$website_address = get_theme_mod('website_address');

// Website Phone
$website_phone = get_theme_mod('website_phone');

// Website Phone Link
$website_phone_link = get_theme_mod('website_phone_link');

// Website Email
$website_email = get_theme_mod('website_email');

// Website Starting Price
$website_starting_price = get_theme_mod('website_starting_price');

// Website Financing Link
$website_financing_link = get_theme_mod('website_financing_link');

// Website Action
$website_action = get_theme_mod('website_action');

// Website State
$website_state = get_theme_mod('website_state');

// Website Facebook
$website_facebook = get_theme_mod('website_facebook');

// Website YouTube
$website_youtube = get_theme_mod('website_youtube');

// Website Instagram
$website_instagram = get_theme_mod('website_instagram');

// Financing URL
$financing_url = get_theme_mod('financing_url');

// Website Slogan
$website_slogan = get_theme_mod('website_slogan');

// Facebook App ID
$facebook_app_id = get_theme_mod('facebook_app_id');

// Twitter Username
$twitter_username = get_theme_mod('twitter_username');

// Website Solutions
$website_solutions = get_theme_mod('website_solutions');

// Website Submit Email
$website_submitemail = get_theme_mod('website_submitemail');

// Staff Website URL
$staff_website_url = get_theme_mod('staff_website_url');

// Website Footer Text
$website_footer_text = get_theme_mod('website_footer_text');

// Uploads Directory
$uploads_dir = get_theme_mod('uploads_dir');

Now you can use this to display on the front end of your theme

<!-- Example Usage: Displaying Website URL -->
<p>Website URL: <a href="<?php echo esc_url($website_url); ?>"><?php echo esc_html($website_url); ?></a></p>

<!-- Repeat the above pattern for other settings you want to display -->

Create A New WordPress Customizer Theme Section and fields

Leave a Reply Cancel reply

Some Guy

Leave a Reply Cancel reply

Related Posts