WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

So I'm learning WP and I want to create a rotating image slider for the header (like in this) using Theme Customization API. But I can't figure out how to and what setting should I use to take the images and store it for later animation in HTML/JS. Help?

share|improve this question
I'm not sure I understand correctly what you want. Do you just want to add the image slider or do you want a image slider preference pane in the Theme Customizer? If you just want the slider it's probably the best to create custom post type and display those in your theme. But if you want that in the Theme Customizer that will require some extra work since you'll have to deal with lots of fallbacks. – Miha Rekar Nov 3 '12 at 10:39
up vote 3 down vote accepted

We can do that! First, you'll need to add a custom section on the Theme Customizer, containing all the image uploads (we'll use 3 for this example):

add_action( 'customize_register', 'themename_customize_register' );
function themename_customize_register($wp_customize) {  

$wp_customize->add_section( 'slides', array(
    'title'          => 'Slides',
    'priority'       => 25,
) );

$wp_customize->add_setting( 'first_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'first_slide', array(
    'label'   => 'First Slide',
    'section' => 'slides',
    'settings'   => 'first_slide',
) ) );

$wp_customize->add_setting( 'second_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'second_slide', array(
    'label'   => 'Second Slide',
    'section' => 'slides',
    'settings'   => 'second_slide',
) ) );

$wp_customize->add_setting( 'third_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'third_slide', array(
    'label'   => 'Third Slide',
    'section' => 'slides',
    'settings'   => 'third_slide',
) ) );

Using that code will add a new section, containing 3 file uploads. For now, we're just using images. Later, you can go back and add descriptions, target URLs, etc. Once you've uploaded three slides, all you need to do is call them in your templates.

Calling a theme option is pretty dang easy, using the function get_theme_mod(). To call the first slide, for instance, you just need to use:

echo get_theme_mod('first_slide')

So if you wanted to place a slider on your homepage, for instance, you might open index.php and add some markup like this:

<ul class="slider">
    <li><img src="<?php echo get_theme_mod('first_slide') ?>" height="" width=""></li>
    <li><img src="<?php echo get_theme_mod('second_slide') ?>" height="" width=""></li>
    <li><img src="<?php echo get_theme_mod('third_slide') ?>" height="" width=""></li>

Of course, you'll still need a healthy dose of CSS and JS to make the actual slider, but that's the basics of uploading, storing, and calling images with the Theme Customizer.

If you're still a bit hazy, Otto has written a perfect introduction on the rest of the functionality: http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.