How To Create a Custom Slider Using Advanced Custom Fields (ACF)

Introduction

In this article, you will learn in detail how to create a slider with several blocks in one slide using Advanced Custom Fields Pro (or, as we call it, ACF).

The goal of this method is to add several courses or lessons to one slide to add course presentations to pages.

Our example will be quite simple, but it will show the principle of building this kind of slider.

Note that you can achieve virtually any design you want using this approach.

What you will need

1 – Advanced Custom Fields (ACF) Pro Plugin for WordPress

Note that ACF PRO is a paid premium plugin and requires a license in order to access the plugin files.

2 – Slick Slider (free code from GitHub)

File creation and dependency configuration

1 – Create a file where the layout of the slider will be located, for example slider.php

2 – Copy and paste the code below:

<div class="slider-wrap">   
<div class="card-slider">   
<?php   
query_posts(array( 'showposts'    
=> 12,'post_type'    
=> 'page','tag'           
=> 'lesson','meta_key'     
=> 'priority-field','orderby'    
=> 'meta_value_num','order'         
=> 'ASC'   ));   
while (have_posts()) { the_post(); ?>       
<a href="<?php echo get_permalink();?>" class="card">           
<img src="<?php echo get_the_post_thumbnail_url();?>" alt="">        
<h3><?php the_title();?></h3></a>       
<?php   }   wp_reset_query();   ?>   
</div>
</div>

3 – Description of the code in blocks:

3.1 – Creating separate page output sequence:

'meta_key' => 'priority-field', 
'orderby' => 'meta_value_num', 
'order' => 'ASC'

– ‘meta_key’ – hereinafter ACF field ID
– ‘orderby’ – Digit Sort
– ‘order’ – Consistency (from smaller to larger)

3.2 – Displaying some information on slides from pages. (image and title in example):

<img src="<?php echo get_the_post_thumbnail_url();?>
<h3><?php the_title();?></h3>

3.3 – Making the slides clickable.

<a href="<?php echo get_permalink();?>" class="card">
Here we display everything you want to display in the slide</a>

4 – To display specific pages (by tag, category), add this option to pages in function.php

<?php//Add category and tag to pagefunction my_settings() {   
// Add tag metabox to page   register_taxonomy_for_object_type
('post_tag', 'page');   // Add category metabox to page   
register_taxonomy_for_object_type('category', 'page');}
add_action( 'init', 'my_settings' );?>

In this example we added a tag to the selected page (in the admin panel in the page editor) by which it will display in the slider.

Installing and Activating ACF Pro

1 – Purchase a license for Advanced Custom Fields Pro.

2 – Log into your ACF account and download the ACF PRO plugin .zip file to your desktop.

3 – Log into your WordPress website and use the Plugins > Add New to upload and activate the ACF PRO plugin.

4 – Lastly, jump back over to your ACF account and copy your ACF PRO license into the Custom Fields > Updates page to enable plugin updates.

Defining the modules in the WordPress panel using ACF Flexible Content

1 – Go to Custom Fields Tab:

2 – Click on it and then choose Add New:

3 – Add a new Field group (I used Priority Fields title for example).

This can be a regular text / numbering field in which you can specify a digit or create a list field.

Connecting the necessary scripts and styles

1 – Add following code to the function.php file:

function add_custom_script(){wp_enqueue_style('page-slider-styles', 
get_stylesheet_directory_uri(). '/style.css');
wp_enqueue_style('land-slick', 
'//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
wp_enqueue_style('land-font-awesome', 
'//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/
font-awesome.min.css');wp_enqueue_script('land-slick-js', 
'//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js',
 array('jquery'));add_action( 'wp_enqueue_scripts', 'add_custom_script' 
); }

2 – Code description

2.1 – Connecting file styles for slider:

wp_enqueue_style('page-slider-styles', get_stylesheet_directory_uri()
 . '/css/styles.css');

2.2 – Connecting slick slider styles:

//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

2.3 – Connecting font-awesome:

wp_enqueue_style('land-font-awesome', 
'//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
);

2.4 – Connecting file script for slick.js:

//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js

Activating slider script

1 – Add script code to slider.php file:

<script>   $(".card-slider").slick(
{       dots: false,       
speed: 500,       
arrows: true,       
slidesToShow: 3,       
slidesToScroll: 3,       
autoplay: true,       
autoplaySpeed: 8000,       
nextArrow: '<i class="fa fa-arrow-right"></i>',       
prevArrow: '<i class="fa fa-arrow-left"></i>',       
       
responsive:    });
</script>

Creating shotcode

1 – Add the following code to the function.php file:

//Slider shortcodeadd_shortcode
('slickslider', 'slick_slider');function slick_slider(
){   ob_start();   require_once (
 plugin_dir_path(__FILE__) . '/slider.php'); 
  $content = ob_get_clean();  
return $content;}add_filter ("the_content", "do_shortcode");

Where ‘slickslider’ is the name of shortcode.

To display your slider on the page, specify the name of the shortcode in square brackets in the Page Editor – [slickslider]

To add shortcode to template code, use this option:

<?php echo do_shortcode('[slickslider]');?>

2 – Add the following styles code to styles.css

.slider-wrap {   
margin: 0 auto;   
padding: 0;   
max-width: 1060px;}.card-slider .card {   
position: relative;   
margin: 10px;   
font-family: Quicksand !important;   
background-color: #fdfdfd;   
min-height: 440px;   
box-shadow: 0px 6px 15px -13px rgba(0,0,0,0.9);}
.card-slider .card h3 {   
padding: 10px 5px;   
margin: 0 !important;   
font-size: 26px !important;   
color: #424242!important;}.card-slider a.card {   
text-decoration: none;}.card-slider i {   
position: absolute;   
font-size: 25px;   
background: #629d45;   
width: 30px;  
height: 30px;   
color: #fff;   justify-content: center;   
align-items: center;   
top: 50%;   
padding-bottom: 2px;}.card-slider i:first-child {   
left: -50px;   
transform: translate(0, -50%);}
.card-slider i:last-child {   
right: -50px;   transform: translate(0, -50%);}

Adding pages and slider shortcode

1 – Adding Lessons page with images and tags:

2 – Adding order of Pages in slider in Custom Fields and on the page:

3 – Adding shortcode [slickslider] to the page:

In conclusion

Using this article, you will be able to create a slider with lesson pages for clients for convenient use.

Style can be very different and depends only on your imagination!

If you will have some troubles, please, write into the comment and we will help you.