Skip to content

Instantly share code, notes, and snippets.

@Abban
Created June 21, 2012 21:09
Show Gist options
  • Save Abban/2968549 to your computer and use it in GitHub Desktop.
Save Abban/2968549 to your computer and use it in GitHub Desktop.
WordPress Theme Customizer Sample
<?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');
@iamdipankarj
Copy link

How to use the 'select' in the theme?

@dibakarjana
Copy link

//  =============================
//  = 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-

@royalcreed1
Copy link

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

Copy link

ghost commented Aug 2, 2013

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+

@mcmullengreg
Copy link

This is fantastic. Thank you.

@toropanov
Copy link

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

@Misiur
Copy link

Misiur commented Aug 17, 2013

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 )

@astrit
Copy link

astrit commented Jan 22, 2014

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

@sinanisler
Copy link

Thank you.

@fynbo
Copy link

fynbo commented Apr 3, 2014

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.

@skylarkcob
Copy link

How can I get theme customizer options?

@htmgarcia
Copy link

Very good sample code, thanks for sharing!

@viruthagiri
Copy link

@Misiur

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

@levantoan
Copy link

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

@stupendousdev
Copy link

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?

@icetee
Copy link

icetee commented Jun 9, 2018

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.

@coder618
Copy link

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

@chrisspeaks
Copy link

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

@ayoubkhan558-zz
Copy link

How we can populate select box by getting wordpress categories?

@zebulondev
Copy link

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

@mehditayebi
Copy link

hello ,
how to create custom panel , section ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment