How do I create a custom wordpress slideshow plugin?

Question

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?

Answer 1

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) {
            return($cm_output);
        } else {
            return("");
        }
    // if the post has no images return nothing.
    } else {
        return("");
    }   
}

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' );
    wp_enqueue_script('monster_front');
    wp_enqueue_script('jquery.flexslider-min.js');
}

This is inside the custom jquery adjust the slidehow:

      jQuery(window).load(function() {
    jQuery('.flexslider').flexslider({
        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');
    wp_enqueue_style('flexslider_style');
}

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. :)

Answer 2

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(); ?>
  <li>
    <?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.

    </div>
  </li>
<?php endwhile;

// Reset Post Data
wp_reset_postdata();
}

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() {
    jQuery('.flexslider').flexslider({
      controlsContainer: "#none",
    });
 </script>

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(); ?>
  </ul>
 </div>

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',
        array(
            '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') );