Dynamic WordPress Slideshow without plugin

With the addition of the Menu’s feature in wordpress it allowed us to use pages for a little more than its obvious purpose.. A Simple example for this is to create a front end slideshow without having to add a special plugin or tons of code that make everything seem super complicated. All you would have to do is browse to the page, click on add media, upload the photos to the page and thats it.

Most of the cases they use either custom post types or they pull it from the blog via a specific category. But this can be a hassle if all you want is generic images rotating.

So here is how to do it..

in this example we will use the slidesjs script ( which is by far my favorite because it is responsive and quick to implement ).

Download this from their site and upload the jquery.slides.min.js to your themes folder

Lets add the slides script to your theme.

In your functions.php add the following

function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/jquery.slides.min.js',
		array( 'jquery' )
	);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );</pre>

Now lets add the photos by creating the page in pages. Decide on the dimensions for the photos. Upload them to the page and publish the page.

Next in the spot where you want to add the slideshow ( normally in the header.php )

<div id="slides">
?>
$pageID = 10 // This is must be replaced with your page ID
$args = array(
	'post_type' => 'attachment',
	'numberposts' => null,
	'post_status' => null,
	'post_parent' => $pageID
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		$imageAlt = $attachment->post_title;
                $attachment_id = $attachment->ID; // attachment ID
                $image_attributes = wp_get_attachment_image_src( $attachment_id , 'full' ); // returns an array
                echo '<img src="'.$image_attributes[0].'" alt="'.$imageAlt.'"/>';
 }
}
?>
</div>

Now in your stylesheet add the following

/* Prevents slides from flashing */
    #slides {
      display:none;
    }

Lastly to make the slideshow work add the following in your head section before the closing head  tag.

<script type="text/javascript">
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
</script>

Thats it.. That should give you a working slideshow with photos that is pulled from a page. if you want to change the photos, edit the page delete and upload.

If you have any enquiries or improvements.. please leave a comment.