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.
Table of Contents for this post
Video Guide to ACF and 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
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.
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.
Click on the “Insert Tag” dropdown and you can choose your fields from ACF. In this next screenshot, I’m choosing the “Camera” field.
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}.
When you show this slideshow on your site, all the custom ACF fields will be displayed, using the HTML you created:
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.
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”.
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.
