How do I create a custom wordpress slideshow plugin?

1 Views

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?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. If you don’t mind using a jQuery plugin, rather than write it from scratch, might I suggest .cycle().

    I’m going to assume you are not familiar with the WP loop either. If you’re not you really should check out the WP Codex (here).

    PHP – (put this in functions.php)

    <?php add_action('wp_enqueue_scripts', 'my_scripts_method'); ?>
<?php function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
    wp_deregister_script( 'jqueryui' );
    wp_register_script( 'jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js');
    wp_enqueue_script( 'jqueryui' );
    wp_register_script( 'slideshow', get_bloginfo('stylesheet_directory').'js/slideshow.js');
    wp_enqueue_script( 'jqueryui' );
} ?>

<?php add_action('hook_name', 'my_slideshow'); ?>
<?php function my_slideshow() { ?>
    <?php if(is_page('page_name')) : ?>
    <div id="SlideShow">
    <?php $my_query = new WP_Query('category_name=my-slideshow$post_per_page=5'); ?>
    <?php if ($my_query->have_posts()) : ?>
        <?php while ($my_query->have_posts()) : ?>
        <div id="slide">
            <div class="wrapper">
                         <?php if (has_post_thumbnail()) : ?>
                              <?php the_post_thumbnail() ?>
                         <?php else : ?>
                              <?php echo (get_bloginfo('stylesheet_directory').'/images/default.png'); ?>
                         <?php endif; ?>
            </div><!-- end .wrapper -->
        </div><!-- end #slide -->
        <?php endwhile; ?>
    <?php else : ?>
        <span>Sorry, there is no content at this time.</span>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>
    </div><!-- end #slideshow -->
    <?php endif; ?>
<?php } ?>

    replace ‘hook_name’ with the hook where you want to plug in the slideshow.
    replace ‘page_name’ with the slug of the page where you want the slideshow to appear. If you want it to show up on all pages, remove the <?php if(is_page('page_name')) : ?> and the <?php endif; ?> at the end.
    replace ‘my-slideshow’ in $my_query to the name of the category that you want in the slideshow.
    You can change ‘5’ to any number of slides you want to show in the slideshow.
    the_post_thumbnail is the featured image of the post. It is checking if the post has a featured image, if not, it relys on default.png found in the theme’s images folder.

    jQuery – (put this in its own file in the theme dir in a /js dir. Call the file slideshow.js)

    var $j = jQuery.noConflict();

$j(document).ready(function() {
    $j('#slideshow').cycle({
        // options here.
    });
});

    There are many options you can define found here.

    This pretty much sums up the custom slideshow. If you want to package it up as a modularized plugin you will want to reference the Codex here.