WordPress Slideshow Implementation

jordanrodriguez

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!

Last updated by on .

2 thoughts on "WordPress Slideshow Implementation"

  1. Tim Barsness says:

    Who taught you to indent your code?

  2. Toby Cryns says:

    Fantastic use of Advanced Custom Fields here! #BestPluginEver!

What Are Your Thoughts?

Your email address will not be published. Required fields are marked *