Create a responsive jquery slideshow in WordPress

One of the most used elements in Web Design is the slideshow.  Using jquery and WordPress ( Custom post types ) I will show you how to easily create your responsive slideshow.

Using the plugin made by the guys from SLIDEJS.

So first off all. Download the script package over here. and Download jQuery over here ( if you dont have this in your project already )

Add the scripts to your head section of your project.

Open your functions.php and add the following to your code at the bottom.

function codex_custom_init() {
    $args = array( 'public' => true, 'label' => 'slides', 'supports' => array( 'title', 'thumbnail') );
    register_post_type( 'slides', $args );
}
add_action( 'init', 'codex_custom_init' );

The location of the slider is entirely up to you. In this case we want it on the home page.
So if you have a home.php set we will add it in there else we will add it in your index.php.

Open the relative file and add the following in the spot where you want to add the slideshow

echo '<div id="slides">';
$args = array( 'post_type' => 'slides', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
	$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
	echo '<img src="'.$full_image_url.'">';
endwhile;
echo '</div>';

Lastly you want to add the following javascript and css to your project:

<style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
    }
</style>
<script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>

Now if you browse to your site admin , you will find a new post type called slides.
Add some slides and your project should show them.