Using Advanced Custom Fields: Repeater

Advanced Custom Fields are a great way of adding content to a WordPress site that can be easily edited in the Admin section, without the need to touch the markup/PHP pages.

In this guide, I’ll quickly show you how I created a carousel/image slider using Advanced Custom Fields repeater. I wanted to use one for a site that I was building for my band, Luna Noise. Because of the Covid-19 lockdown in 2020, I thought why not start to build our online presence. We are a new project afterall.

The url if you are interested is http://lunanoise.joshlister.com/

Depending on when you visit it, will most likely depend on how finished the site is.

Anyways, so this is how I created the animated image scroller in WordPress.

For this tutorial, I will be using Visual Studio Code as my code editor. You can use whatever is best for you.

Go to your theme directory – wp-content\themes\themename

If you already have a page ready then skip the next few steps

Next, create a new PHP page, for example page-home.php

Within your PHP file, add the markup and styling, as you normally would. Save.

FlexSlider

Next, download the FlexSlider library from http://flexslider.woothemes.com/index.html

Extract the contents of the zip folder into your themes directory and add the jquery-flexslider.min.js file to your JS folder, and then add the flexslider.css file to the CSS folder.

Within your Functions.php file add the following:

function loadjs()
{
	wp_register_script( 'customjs', get_template_directory_uri() . '/js/jquery.flexslider-min','', 1,true);
	wp_enqueue_script('customjs');
}
function load_stylesheets()
{
	wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css', array(),false, 'all' );
	wp_enqueue_style('flexslider');
}

And then add references to the JS and CSS files like so

 <?php loadjs(); ?>

Also, you might also want to add a reference to the latest jQuery library too as I did come across issues loading the carousel and using the latest version helped.

Install Advanced Custom Fields

In your WordPress Admin menu, go to Plugins and search, install and activate the Advanced Custom Fields (ACF) plugin.

Next, add a new Custom Field.

Create an Advanced Custom Fields repeater field with the label Slides. Then just below add two sub-fields; image, header.

Next, go to your home page within the Pages menu in the WordPress Admin. Add the content – images and text.

Adding Advanced Custom Fields data to your page

Back to your PHP file. Add the following PHP while loop and div tags to whether you wish to display the carousel on the page.

<?php if( have_rows('slides') ): ?>
  <div class="flexslider">
    <ul class="slides">
    <?php while( have_rows('slides') ): the_row(); 
        $image = get_sub_field('image');
        $imageurl = $image['sizes']['slider'];
        $title = get_sub_field('header');

        ?>
         <li> <img src="<?php echo $imageurl; ?>" > 
         <p class="flex-caption"> <?php echo $title; ?>; </p>
        </li>
    <?php endwhile; ?>
    </ul>
  </div>
<?php endif; ?>

And within your JS file or within script tags add the following:

$(window).load (function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

And lastly test it and it should be working as you expect.

If you wish to change things, then do so. Reference the FlexSlider page for additional help.