ACF – create flexible content and display in template

This is a simple example of how to create a variety of content types, and display them in a WordPress php template.
The content can be displayed in any order using drag and drop from the WP administration.

  • This uses plugin Advanced custom fields PRO, and this example is based on the documentation demo. They have good documentation for displaying other content types on http://www.advancedcustomfields.com/.
  • Create a custom field group and create a field of type flexible content.
  • From there you can create layouts for each type of content you’ll want displayed.
  • I’ve created four layouts – text (includes option to create 1, 3 or 3 columns of text), text with image on the right, image with caption, and gallery slider image.
  • This example uses the flickity touch responsive slider to display the image slider. You’ll need to reference flickity js and css in your theme.
  • We’re not showing all the css needed, and we’re using bootstrap for the layout.
  • I’m new to flexbox and am still learning about it, but I’m using it to center the content vertically in each container.

The following code will loop through all rows of our flexible content, and display based on the layout of each content type.
I’m using a template file for each content type, and each file is in a partials folder.

For this section, I’ll display one, two or three columns, depending on how many columns were selected.

For the gallery section, initialize flickity slider using jQuery.

I’m wrapping the gallery with a class=”main-gallery”, and each image in a class=”gallery-cell”. The flickity code will display this as a gallery.

The result looks something like this.
screenshot-njedesign.com 2015-08-17 12-16-10

Facebooktwitterlinkedinmail

by Norm Euker