3

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?

9
  • 1
    There are hundreds of slideshow plugins. I don’t see your problem?
    – fuxia
    Mar 24, 2012 at 7:45
  • My client demanded a custom slideshow plugin.... Mar 24, 2012 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. Mar 24, 2012 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... Mar 24, 2012 at 11:29
  • @OleHenrikSkogstrøm Looks like we were on the same boat, do you have any useful tutorial link for the slideshow plugin? Mar 24, 2012 at 11:35

2 Answers 2

2

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

3
  • Very cool implementation Ole!
    – David
    Mar 25, 2012 at 0:00
  • Thank you :) you actually save me a ton of work with the flexslider tip above. Mar 25, 2012 at 11:16
  • I found some bugs, so i updated my answer. Mar 25, 2012 at 13:13
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') );
8
  • Thanks! How do I create the administration (back-end) part so that users can select what image to post, etc? Mar 24, 2012 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. Mar 24, 2012 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, 2012 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, 2012 at 11:56
  • I've added the snippet for Custom Post Types and the needed changes to the WP_Query
    – David
    Mar 24, 2012 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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