Skip to main content

Screen Shot 2013-04-18 at 10.32.26 AM
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.'">';
echo '</div>';

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

    /* Prevents slides from flashing */
    #slides {
        width: 940,
        height: 528

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.

Janes Oosthuizen

Author Janes Oosthuizen

Programmer and Tech Junky from Cape Town, South-Africa. I have been programming for more than 15 years in various languages including ( CSS, HTML, javascript, PHP, MySQL, Wordpress and many other ).

More posts by Janes Oosthuizen

Leave a Reply