800,000+ WordPress sites are already using MetaSlider!

How to Use Advanced Custom Fields (ACF) With MetaSlider

Advanced Custom Fields (ACF) is a really popular WordPress plugin, with over 2 million active installs. It allows users to create custom fields, as you would expect from the plugin’s name. However, the plugin has expanded in recent years and now also allows you to create post types and taxonomies. ACF provides a user-friendly interface to define and manage custom data without writing any code. The plugin is now owned and developed by WPEngine, the large hosting company.

If you use ACF to add fields to your content, it’s possible to use MetaSlider Pro to show those fields in a slideshow. In this guide, I’ll show you how to connect ACF and MetaSlider. We also have a guide on using the default WordPress custom fields with MetaSlider.

Using ACF and MetaSlider Together

This screenshot below shows an example of fields I’ve created using ACF. There’s a field group called “Photo Details” and there are three text fields:

  • Photographer
  • Photo Agency
  • Camera
Advanced Custom Fields dummy fields

I’ve added those fields to the default posts in WordPress. You can see an example in this next screenshot. The ACF fields are below the content and there’s a Featured Image to use in the slideshow.

Advanced Custom Fields in a WordPress post

Using MetaSlider Pro, you can create a slideshow using a “Post Feed” slide type. When you first add a Post Feed slide, it will look like the image below.

First slide for a slideshow with Advanced Custom Fields and MetaSlider

Click on the “Insert Tag” dropdown and you can choose your fields from ACF. In this next screenshot, I’m choosing the “Camera” field.

Adding field to a slideshow with Advanced Custom Fields and MetaSlider

You can use the HTML area to control how your fields display. In this screenshot below, I’ve added three fields called {photographer} and {photo_agency} and {camera}.

Creating a slideshow with Advanced Custom Fields and MetaSlider

When you show this slideshow on your site, all the custom ACF fields will be displayed, using the HTML you created:

Completed slideshow with Advanced Custom Fields and MetaSlider

Using MetaSlider and ACF Together with Custom Post Types

The process we described above will work with posts but also other post types. One customer asked us about using WooCommerce, ACF and MetaSlider together. In this screenshot below, I have attached the same three ACF fields (Photographer, Photo Agency, Camera) to a WooCommerce product. There is also a “Product image” that we can use in the slideshow.

Preparing slideshow of WooCommerce products

This screenshot below shows the MetaSlider “Post Feed Slider” that we’ll use for the slideshow. Click the “Post Types” tab and choose your custom post type. In this screenshot, I’ve chosen only “Products”.

Creating a slideshow of WooCommerce products

This screenshot below shows a complete slideshow of WooCommerce products. We’ve added the three custom ACF fields and have also chosen the “Simply Dark” theme from MetaSlider. Click here to see how to choose MetaSlider themes. Click here for more on WooCommerce with MetaSlider.

Completed slideshow of WooCommerce products

Leave a Comment

Start Using Your Slider Today!

Create and publish WordPress slideshows in minutes… What are you waiting for?