How do I create a custom wordpress slideshow plugin? I've been looking for the tutorials on google but I couldn't find one, would you guys mind giving a tutorial here or link to some other custom slideshow plugin tutorials?

  • 1
    There are hundreds of slideshow plugins. I don’t see your problem? – fuxia Mar 24 '12 at 7:45
  • My client demanded a custom slideshow plugin.... – Mouse Hello Mar 24 '12 at 11:22
  • I have had this problem before, the are a million of them, but they are all so stuffed up with extra functionality that the they loose their purpose. I ended up making a custom one myself for my last job. – Ole Henrik Skogstrøm Mar 24 '12 at 11:23
  • Exactly, why do people not want to create a really simple plugin where in the administration panel we can style and design the whole thing by ourselves because of our lacking in knowledge for wordpress plugin API. Would've been really nice... – Mouse Hello Mar 24 '12 at 11:29
  • @OleHenrikSkogstrøm Looks like we were on the same boat, do you have any useful tutorial link for the slideshow plugin? – Mouse Hello Mar 24 '12 at 11:35

So... this is my slide show implementation:

This is the code i use to create a slideshow based on the flexslider JQuery plugin (Thank you David!). It also gives the user a checkbox so he can chose what pictures to include in the slideshow, and what pictures to skip. The images are taken form the post attachments, if you want a general slideshow unrelated to any post you need to implement the solution David gave :)

This is the function/filter i use to add a checkbox inside the media uploader to let the client choose if he wants to include a picture in the slideshow or not.

    //      Adding a custom checkbox to the Media Uploader
function monster_image_attachment_slideshow($form_fields, $post) {
    $foo = (bool)get_post_meta($post->ID, "rt-image-link", true);

    $form_fields["rt-image-link"] = array(
        "label" => __("Include in gallery?"),
        'input' => 'html',
        'html' => '<label for="attachments-'.$post->ID.'-foo"> ' . '<input type="checkbox" id="attachments-'.$post->ID.'-foo" name="attachments['.$post->ID.'][rt-image-link]" value="1"'.($foo == true ? ' checked="checked"' : '').' /> Yes</label>  ',
        "value" => $foo,
        "helps" => __("Check this if you want to include this image in your gallery"),
   return $form_fields;
// now attach our function to the hook
add_filter("attachment_fields_to_edit", "monster_image_attachment_slideshow", null, 2);

// Saving the media field
function monster_image_attachment_slideshow_to_save($post, $attachment) {
    // $attachment part of the form $_POST ($_POST[attachments][postID])

        update_post_meta($post['ID'], 'rt-image-link', $attachment['rt-image-link']);

    return $post;
// now attach our function to the hook.
add_filter("attachment_fields_to_save", "monster_image_attachment_slideshow_to_save", null , 2);

then i use this function also in my function file (both of these can be included in a plugin if you wish so):

    //      This is the funcion that rolls out my slideshow html
function m_slideshow_outputter( $post_id ,$size = 'large', $thumbnail_size = '') {
    global $post;
    $got_slides = false;

    $args = array(
        'post_type' => 'attachment',
        'numberposts' => -1,
        'post_status' => null,
        'post_parent' => $post_id,
        'order' => 'ASC', 
        'orderby' => 'menu_order'

    //      Getting attachmentes (images)
    $attachments = get_posts( $args );

    if ( $attachments ) {
        $cm_output = '<div class="flex-container"><div class="flexslider"><ul class="slides">';

        //  looping through each attachment for the given post
        foreach ( $attachments as $attachment ) {
            $image_attributes = wp_get_attachment_image_src( $attachment->ID, $size  );

            $cm_src = $image_attributes[0];
            $cm_width = $image_attributes[1];
            $cm_height = $image_attributes[2];

            //  This part gets custom metainformation about the attachement. 
            //  I have made a custom checkbox inside the media uploader. If the checkbox is checked the image is included. See the checkbox code above :) 
            $gallery_check_array = get_post_meta($attachment->ID, "rt-image-link");
            $gallery_check = $gallery_check_array[0];

            //  So just include the picture if the checkbox in checked :)
            if ( $gallery_check == 1) {
                $got_slides = true;
                $cm_output .= '<li><img class="picture-'.$post_id.'-'.$attachment->ID .'" src="'.$cm_src.'" alt="Slideshow" width="'.$cm_width.'" height="'.$cm_height.'"/></li>';

        $cm_output .= '</ul></div></div><!-- End flexslider -->';
        //  Outputting the thumbnails if a thumbnail size has been entered. Ignore this or delete this part if you dont need thumbnails
        if ($thumbnail_size) {
            $cm_output .= '<div class="slideshow-thumbails"><ul>';

            foreach ( $attachments as $attachment ) {
                $thumbnail_attributes = wp_get_attachment_image_src( $attachment->ID, $thumbnail_size  );

                $cm_tumb_src = $thumbnail_attributes[0];
                $cm_tumb_width = $thumbnail_attributes[1];
                $cm_tumb_height = $thumbnail_attributes[2];

                                $thumbnail_check_array = get_post_meta($attachment->ID, "rt-image-link");
            $thumbnail_check = $thumbnail_check_array[0];

            // doing the same check as above for each thumbnail.
            if ( $thumbnail_check == 1) {
                    $cm_output .= '<li><img class="picture-'.$post_id.'-'.$attachment->ID .'" src="'.$cm_tumb_src.'" alt="Slideshow" width="'.$cm_tumb_width.'" height="'.$cm_tumb_height.'" /></li>';
            $cm_output .= '</ul></div>';
        //If there are images in the slidehow return them, else return nothing.
        if ($got_slides) {
        } else {
    // if the post has no images return nothing.
    } else {

Then you need to include the jquery:

    //      How to add custom js to Front end
add_action('wp_print_scripts', 'monster_front_js');
function monster_front_js(){    
    wp_register_script('flexslider', get_template_directory_uri() . '/js/jquery.flexslider-min.js', array('jquery'), '1.0' );
    wp_register_script('monster_front', get_template_directory_uri() . '/js/monster_front.js', array('jquery', 'flexslider'), '1.0' );

This is inside the custom jquery adjust the slidehow:

      jQuery(window).load(function() {
        controlsContainer: ".flex-container", 
        controlNav: false, 
        directionNav: true

And the css related to the slideshow:

add_action('wp_print_styles', 'monster_front_styles');
function monster_front_styles() {
    wp_register_style( 'flexslider_style', get_template_directory_uri() . '/css/flexslider.css');

And Finaly! The slideshow code ready to insert into your theme front end. :)

<?php echo m_slideshow_outputter( $post->ID ,'large', 'thumbnail'); ?><!-- This is the slideshow :) -->

The only required parameter is the post id. The second parameter is set to large by default, but you can choose what image size to return. The last parameter sets the thumbnail image size, if this is left empty no thumbnails will be returned.

Hope this isn't overkill. :)

  • Very cool implementation Ole! – David Mar 25 '12 at 0:00
  • Thank you :) you actually save me a ton of work with the flexslider tip above. – Ole Henrik Skogstrøm Mar 25 '12 at 11:16
  • I found some bugs, so i updated my answer. – Ole Henrik Skogstrøm Mar 25 '12 at 13:13

Because your question is a little too far fetched here is an easy implementation of WP_Query, a simple to install Javascript Slider, and Post Thumbnails.

Add this snippet of code to your page you'd like your Slider

function blogSlider() {

// The Query 
$the_query = new WP_Query( 'posts_per_page=5' );

// The Loop 
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'large-thumb' ); } ?>
    <div class="flex-caption">
      <h3 class="larger"><?php the_title(); ?></h3>

      <?php the_excerpt(); ?> // This is really dealers choice, however for this purpose it should show you a good example of how the data is being iterated through.

<?php endwhile;

// Reset Post Data

Add these to your functions.php:

//Enqueue Slider Script
wp_enqueue_script( 'slider', get_template_directory_uri() . '/xxx/jquery.flexslider-min.js', 'jquery' );
//Enqueue Slider Style
wp_enqueue_style( 'slider', get_template_directory_uri() . '/xxx/flexslider.css' );

As Well as:

//Add the Thumbnail Image size 
if ( function_exists( 'add_image_size' ) ) { 
  add_image_size( 'large-thumb', 960, 276, true );

You'll want to make sure to download and extract Flexslider or any other slider script you prefer.

Once you have extracted Flexslider you'll put this piece into your Header/Page with Slider/Yepnope:

//Scripts to place
 <script type="text/javascript">
   jQuery(window).load(function() {
      controlsContainer: "#none",

Once you're ready to output your Slider paste this code wherever you'd like your Slider to be Output:

<div class="flexslider">
  <ul class="slides">
    <?php blogSlider(); ?>

Good luck, I hope this gets you on a good enough path :)

Here's the snippet for Adding a Custom Post Type that the function can loop through

//Generic CPT Snippet 
function 46685_slider_type() {
    register_post_type( 'slider',
            'labels' => array(
                'name' => __( 'Featured Images' ),
                'singular_name' => __( 'Featured Image' ),
                'add_new' => __( 'Add Another Featured Image' ),
                'add_new_item' => __( 'Add New' ),
                'edit_item' => __( 'Edit Featured Image' ),
                'new_item' => __( 'New Featured Image' ),
                'view_item' => __( 'View Featured Image' ),
                'search_items' => __( 'Search Featured Image' ),
                'not_found' => __( 'No Featured Image found' ),
                'not_found_in_trash' => __( 'No Featured Images found in trash' )
            'public' => true,
            'supports' => array( 'title', 'editor', 'thumbnail' ),
            'capability_type' => 'page',
            'rewrite' => array("slug" => "slider"), // Permalinks format
            'menu_position' => 9 // int
//Add CPT to System some systems may require a rewrite flush.
add_action( 'init', '46685_slider_type' );

You'd also need to change your $the_query to:

$the_query = new WP_Query( array('posts_per_page' => '5', 'post_type' => 'slider') );
  • Thanks! How do I create the administration (back-end) part so that users can select what image to post, etc? – Mouse Hello Mar 24 '12 at 11:24
  • I can show you how i do this when i post my answer. the short answer is that i loop through all the images that are associated with the post, and output them. I also add an extra checkbox to the media uploader to let my client choose if he wants to include a picture in the slideshow or not. If you have mulitple slideshows on one post you could use a numberfield to chose what slideshow id the picture belongs to. – Ole Henrik Skogstrøm Mar 24 '12 at 11:51
  • Ole, the Flexslider script also has CSS files included, it looks pretty sharp with their Default theme. Mouse, there's no Admin UI for this, this function uses WP_Query to get the 5 newest posts from your blogroll or these functions: post_thumbnail(), the_excerpt(), the_title() You might want to look into Custom Metaboxes. – David Mar 24 '12 at 11:52
  • You could take a simpler approach to that even as well utilizing the same code and adding a Custom Post Type and just having it loop through that post type. – David Mar 24 '12 at 11:56
  • I've added the snippet for Custom Post Types and the needed changes to the WP_Query – David Mar 24 '12 at 12:06

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.