How can I use WP_Customize_Image_Control to edit an Image Slider?

This is my first post here, but I’ve been doing a bit of searching. I want to use the Custom Theme API to create add a customized theme control to add a new Image to a slider. Here is some of the code:

functions.php

Read More
// *** THIS IS THE CUSTOM IMAGE SLIDER SECTION

// Add section for Image Slider Settings
$wp_customize->add_section('image_slider_settings', array(
    // Visible title of section
    'title'       => 'Image Slider Settings', 
    // Visible Description of what the section is supposed to do
    'description' => 'Here you can set up the Image Slider for specific Images,
                      without code! Select your Image, then add the URL so the new
                      Image shows on the Image Slider.'
));

// Select an Image
$wp_customize->add_setting('select_image', array(
    'default'        => null,
    'capability'     => 'edit_theme_options',
    'type'           => 'theme_mod',

));

$wp_customize->add_control('select_image_option', array(
    'label'      => 'Select Image',
    'section'    => 'image_slider_settings',
    'settings'   => 'select_image',
    'type'       => 'checkbox', //********I Don't know what other types there are, but I want to be able to select the image from a dropdown
));

// URL Setting - this is for the Image URL
// so that when the Image is clicked, it routes to the correct page.
$wp_customize->add_setting('image_url', array(
    'default'        => null,
    'capability'     => 'edit_theme_options',
    'type'           => 'theme_mod',

));

$wp_customize->add_control('input_image_url', array(
    'label'      => 'Image URL',
    'section'    => 'image_slider_settings',
    'settings'   => 'image_url',
));

// *** THIS IS THE END OF THE CUSTOM IMAGE SLIDER SECTION

Additionally, I suppose I’d need to be pulling in an array of the images loaded in the slider so that the user could select one of the images from the slider, use a button to change the image, and add the new URL that would be mapped to the Image. Here is what has already been build in the Theme for this:

homepage.php

<?php 
        $folder = '/wp-content/uploads/slides/';
        $pictures = array(/*array of pictures*/);
        $links    = array(/*array of links*/);
    ?>
    <a id='slideshow_link' target="_blank">
    <?php foreach($pictures as $pic=>$src){
        ?>
        <img id='slideshow_<?php echo $pic ?>'  width='976' height='400' style='border:solid 12px #d6d7d4;display:none;' src='<?php echo $src ?>'>
        <?php
    }
    ?>

and

var pics_array = new Array (<?php
        foreach($pictures as &$pic){
            echo " '$pic',";
        }
        ?> null);

        var links_array = new Array (<?php
        foreach($links as &$l){
            echo " '$l',";
        }
        ?> null);

        //init slideshow
        showPicture(0);

So ultimately, what I’m asking is this:

  1. Can I use the Custom Theme API to create an Image Slider section?
  2. If so, can I pull in an array of Images and their URL routes to the section?
  3. If yes to that, is there a way to allow the user to select an image from media (whether already loaded into WordPress or right there in the section) so that the user can see the new Image Slider look?

I know this is a lot, but I’m new to WordPress and I’m trying to figure out what it can and cannot do. I’ve done a lot of looking, and just couldn’t seem to find what I was looking for in questions asked by others.

Please let me know if there is anything I can clear up that I haven’t made clear already. I tried to be as concise as possible, and I’m sure I’ll get better over time doing this, but for now hopefully this will do.

-Stu.

P.S.: Thanks to anyone who can help me!

Related posts

Leave a Reply

1 comment

  1. So I figured this out. I needed to use get_theme_mod to hook the Custom Image Slider into the actual Image Slider (written in plain ol’ JS).

    the key was simply to do:

    $my_array = array(get_theme_mod(*name_of_setting*), etc);
    

    That was it. So simple, yet it wasn’t really that clear that get_theme_mod allowed a hook without any extra details involved.