Featured post slideshow using php and jQuery.

Post date: Jul 26, 2011 4:02:04 AM

One of my assignment related to wordpress, there we used php to do coding for that website. We were used Arras theme, as you know it provide only one slide show. But we required 2 slide show for our featured posts.

I searched for a lot plugins, but nothing is work. Finally i decide to do coding by using jQuery scripts.

You can download jQuery from here.

Then i open my header.php and add following js files

<?php

   wp_enqueue_script('jquery.cycle.all.min', 

'/wp-content/themes/andrewhavens/js/jquery.cycle.all.min.js', array('jquery'));

   wp_enqueue_script('featured-work-slideshow', 

'/wp-content/themes/andrewhavens/js/featured-work-slideshow.js');

   wp_head();

?>

I have uploaded those two js files to my theme's directory.

I manually create only .js file and put into the same directory.

In featured-work-slideshow.js I have:

jQuery(document).ready(function($) {

    $('#featured-works').cycle('fade');

});

You can write following code where ever you want to show the slideshow.

<div id="featured-works">

        <?php query_posts('category_name=featured-work&showposts=5'); ?>

        <?php while (have_posts()) : the_post(); ?>

                <div class="featured-work">

                        <div class="featured-work-image-container" style="float:left; 

                                width:600px;">

                                <?php $image = get_post_meta($post->ID, 

                                'homepage-image', true); ?>

                                <img src="<?php echo $image; ?>" width="500" height="300"

                                 style="margin-left:30px;">

                        </div>

                        <p style="float:left; width:300px;">

                                <?php the_title(); ?><br />

                                <a href="<?php the_permalink() ?>">Read More!</a>

                        </p>

                </div>

        <?php endwhile;?>

</div>