WordPress Slideshow Implementation

June 4, 2013

So lets talk about a good, user proof wordpress slideshow.

This offers the ability to upload different slideshow images, the option to link to different pages on each image, and the option to have as many images as you want.

The plugins we are going to install into WordPress are Advanced Custom Fields and their Repeater Field.

After you install the plugins load and install a good jQuery slideshow plugin called Slides.js.

Now your groundwork is laid out. You can read tutorials on how to use and set up both of those. But what I really want you to see is how to combine the two into a really nice customizable slideshow.

The PHP code is.

<? if( get_field('images') ): ?>
	<div id="slides">
	<? while( has_sub_field('images') ): ?>
		<? $image = wp_get_attachment_url(get_sub_field('image')); ?>
		<? if(get_sub_field('link')) : ?>
			<a href="<?= the_sub_field('link'); ?>"><img src="<?= $image ?>" /></a>
		<? else: ?>
			<img src="<?= $image ?>" />
		<? endif; ?>
	<? endwhile; ?>
	</div>
	<div class="clear"></div>
<? endif; ?>

This allows you to combine those two plugins. Fairly simple.

Then make a Custom Field called “images” which was a repeater field.

Inside that field  put two fields, one called “image” the other called “link”.

Link can be left blank if need be. You cannot leave the image blank.

There you have it, basic WordPress Slideshow!

Stay in Touch!

Stay in Touch!
Solutions Architecture

browse through our blog articles

Blog Archive