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?

  • 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

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/

|improve this answer|||||
  • I would like to add another setting for the number of slides and a loop to register them all but when I change the number of slides and click "publish" the page is not refreshed and the editor still have the same number of slide settings until I press F5. Is it possible to update the customizer sidebar client side or us a controller that handle all this at once? – RafaSashi Oct 30 '19 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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