WordPress Theme Customizer Sample

WordPress Theme Customizer Sample.php

<?php

function themename_customize_register($wp_customize){
    
    $wp_customize->add_section('themename_color_scheme', array(
        'title'    => __('Color Scheme', 'themename'),
        'priority' => 120,
    ));

    //  =============================
    //  = Text Input                =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[text_test]', array(
        'default'        => 'Arse!',
        'capability'     => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control('themename_text_test', array(
        'label'      => __('Text Test', 'themename'),
        'section'    => 'themename_color_scheme',
        'settings'   => 'themename_theme_options[text_test]',
    ));

    //  =============================
    //  = Radio Input               =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[color_scheme]', array(
        'default'        => 'value2',
        'capability'     => 'edit_theme_options',
        'type'           => 'option',
    ));

    $wp_customize->add_control('themename_color_scheme', array(
        'label'      => __('Color Scheme', 'themename'),
        'section'    => 'themename_color_scheme',
        'settings'   => 'themename_theme_options[color_scheme]',
        'type'       => 'radio',
        'choices'    => array(
            'value1' => 'Choice 1',
            'value2' => 'Choice 2',
            'value3' => 'Choice 3',
        ),
    ));

    //  =============================
    //  = Checkbox                  =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[checkbox_test]', array(
        'capability' => 'edit_theme_options',
        'type'       => 'option',
    ));

    $wp_customize->add_control('display_header_text', array(
        'settings' => 'themename_theme_options[checkbox_test]',
        'label'    => __('Display Header Text'),
        'section'  => 'themename_color_scheme',
        'type'     => 'checkbox',
    ));


    //  =============================
    //  = Select Box                =
    //  =============================
     $wp_customize->add_setting('themename_theme_options[header_select]', array(
        'default'        => 'value2',
        'capability'     => 'edit_theme_options',
        'type'           => 'option',

    ));
    $wp_customize->add_control( 'example_select_box', array(
        'settings' => 'themename_theme_options[header_select]',
        'label'   => 'Select Something:',
        'section' => 'themename_color_scheme',
        'type'    => 'select',
        'choices'    => array(
            'value1' => 'Choice 1',
            'value2' => 'Choice 2',
            'value3' => 'Choice 3',
        ),
    ));


    //  =============================
    //  = Image Upload              =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[image_upload_test]', array(
        'default'           => 'image.jpg',
        'capability'        => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_test', array(
        'label'    => __('Image Upload Test', 'themename'),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[image_upload_test]',
    )));

    //  =============================
    //  = File Upload               =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[upload_test]', array(
        'default'           => 'arse',
        'capability'        => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'upload_test', array(
        'label'    => __('Upload Test', 'themename'),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[upload_test]',
    )));


    //  =============================
    //  = Color Picker              =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[link_color]', array(
        'default'           => '000',
        'sanitize_callback' => 'sanitize_hex_color',
        'capability'        => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'link_color', array(
        'label'    => __('Link Color', 'themename'),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[link_color]',
    )));


    //  =============================
    //  = Page Dropdown             =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[page_test]', array(
        'capability'     => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control('themename_page_test', array(
        'label'      => __('Page Test', 'themename'),
        'section'    => 'themename_color_scheme',
        'type'    => 'dropdown-pages',
        'settings'   => 'themename_theme_options[page_test]',
    ));

}

add_action('customize_register', 'themename_customize_register');

How to use the 'select' in the theme?

//  =============================
//  = Select Box                =
//  =============================
    $wp_customize->add_setting( 'select_setting', array(
        'default'        => 'Choice 1',
    ) );
    $wp_customize->add_control( 'select_setting', array(
        'label'   => 'Select Dropdown Setting',
        'section' => 'dj_home_settings',
        'type'    => 'select',
        'choices' => array(
            'Choice 1' => 'Choice 1',
            'Choice 2' => 'Choice 2',
            'Choice 3' => 'Choice 3',
        ),
        'priority' => 4
    ) );

// In template file (Ex: header.php) add the below code-

Can we do radio images? so instead of simple radio buttons into picture options

I have a little bit of an issue... when is use themename_theme_options[link_color] it does not work.. when i change it to link_color it works..

is this a bug in wordpress?

i am using wordpress 3.5+

This is fantastic. Thank you.

So, can you please explain how to add another one section and show example for it. Thank you.

If anyone is wondering how to render theme mods with names like something[foobar], then check out get_theme_mods. You can see that those mods get unserialized, and to access them you have to use

<?php echo get_theme_mode('something')['foobar']; ?>

(this snippet is php >= 5.4 )

So far the best one is this :D i like it.

Thank you.

Hi,

The following code only leaves me with one single checkbox which has the label as name:

$wp_customize->add_setting('themename_theme_options[checkbox_test]', array(
'capability' => 'edit_theme_options',
'type' => 'checkbox',
));

$wp_customize->add_control('display_header_text', array(
    'settings' => 'themename_theme_options[checkbox_test]',
    'label'    => __('Display Header Text'),
    'section'  => 'social-icons',
    'type'     => 'checkbox',
    'choices'    => array(
        'value1' => 'Choice 1',
        'value2' => 'Choice 2',
        'value3' => 'Choice 3',
    ),
));

Any help would be much appreciated.

How can I get theme customizer options?

Very good sample code, thanks for sharing!

@Misiur

you have a typo there. Function should be get_theme_mod not get_theme_mode

Thanks for sharing! And how to "shift + click" to edit?

Okay, what am I doing wrong?! LOL. I'm trying to echo the "Arse!" on my homepage using <?php echo get_theme_mod('themename_theme_options')['text_test']; ?> and nothing is showing up. :( Everything shows up in the backend customizer but I can't get the values to show up on the front end. Is there something extra or something else I should be trying?

I simple remove 'type' => 'option', and works. My simple text input:

	$wp_customize->add_section('{themename}_themes', [
	    'title'      => __('Theme settings', '{themename}'),
	    'priority'   => 30,
	]);

	$wp_customize->add_setting('{themename}_theme[copyright]', [
		'default'        => 'Copyright %s',
		'capability'     => 'edit_theme_options',
	]);

	$wp_customize->add_control('{themename}_text', [
		'label'      => __('Copyright text', '{themename}'),
		'section'    => '{themename}_themes',
		'settings'   => '{themename}_theme[copyright]',
	]);

In theme output:
get_theme_mod('{themename}_theme') returned all options in array.

If anyone is wondering how to render theme mods with names like something[foobar], then check out get_theme_mods. You can see that those mods get unserialized, and to access them you have to use

<?php echo get_theme_mode('something')['foobar']; ?>

(this snippet is php >= 5.4 )

get_option("settings_name") work for me

Hi i would like to know how to make a section in theme customiser to edit footer content. also what code should i put in footer.php for using this customiser section

How we can populate select box by getting wordpress categories?

Hello,

In your Checkbox add control, change property name "display_header_text" to another because is doesn't work. (may be it's reserved by WP)

Regards

hello ,
how to create custom panel , section ?