How to use ACF Pro Flexible Content with Pinegrow WP

Notice: The following requires a good knowledge of Pinegrow Web Editor as well as a medium knowledge of WordPress themes development.

Introduction

In this post, we are going to discover how to add PHP code to your Pinegrow WP templates and how to create a basic loop for ACF Pro Flexible Content. (available only in the Pro Version of the plugin).

To illustrate the process, let’s have a look at a basic Page Builder project that you can use on your site homepage.

Please download the Demo project on Github so you can easily follow and understand the current document.

With this project, the purpose is to be able to Add/Edit/Remove/Order 3 predefined sections created in Pinegrow and which will be available from the homepage edit menu in WordPress.

These 3 sections are:

1. A Jumbotron
2. A section with a 3 Columns
3. A section with a Call to Action

Note: You can see the result at the end of the post.

Prerequisites

• Read the Codex about Conditionals in WordPress.

The Conditional Tags will be used in your Template files to change which content is displayed and how that content is displayed depending on specific conditions.

• Purchase, Download, Install and Activate ACF Pro on your local WordPress setup.
• Setup the Flexible Content in ACF Pro.

We do not provide a step by step tutorial about how to proceed to create the fields as the demo project comes with an automatic setup (using local JSON file). The data are immediately available from ACF after your first export of the Demo theme.

On the PHP code actions, we use fields/sub fields names from the ACF Flexible content settings. It’s a manual operation as there is currently no automatic process to retrieve these settings from WordPress to Pinegrow.

• On your local WordPress, from the menu Pages >Create a new page and name it Home
• Still on WordPress, from the menu Settings > Reading > Set the Front page display to A static page and the Front page to your Home page

• From Pinegrow load the demo project and open the front-page.html page so you will be able to examine the structure of the document.
• Before exporting the demo theme to your local WordPress Setup, please change the Theme Folder in the WordPress site action at the top of the tree.

Document structure

For the sake of the clarity, we set specific names to different sections of the layout. (using Name In Tree from the PROP panel).

The Wrappers

Because we need to add conditionals (IF and ELSE) on some parts of the content, we use wrapper containers:

A Wrapper DIV: We use it to set a IF Conditional so we can check if the ACF plugin is available and activated.

if ( class_exists('acf') ) :

A home-inner DIV: We use it to host the ACF loop. Here again, we set a conditional (IF) which validates that the Flexible Content field homepage_sections contains some rows.

if ( have_rows('homepage_sections') ) :

Opening the ACF Loop

In a standard situation (display of the content of posts or pages) Pinegrow WP can create standard WordPress loops and WP queries almost automagically. In our particular case, because we target Meta content from ACF, we create the loop by hand. (See ACF Basic loop documentation)

This function checks if the flexible content has any rows of data to loop over.

while ( have_rows('homepage_sections') ) : the_row()

The Jumbotron Section

We setup the content of the Loop starting with the first section: jumbotron_section.

We start with a conditional (IF) to target which sub fields to call. In the current situation, we call the jumbotron_section row.

get_row_layout() == 'jumbotron_section'

Then, we add the PHP code which will allow us to modify the background-color of the section directly from the the the home-page editor and we set the corresponding options.

the_sub_field( 'jumbotron_background_color');

• Replace to: Set style property
• Style Property: background-color

We add the PHP code which will allow us to modify the content of the H1 directly from the home-page editor and we set the corresponding options.

the_sub_field( 'jumbotron_title');

• Replace: Content

We add the PHP code which will allow us to modify the content of the Paragraph directly from the home-page editor and we set the corresponding options.

the_sub_field( 'jumbotron_subtitle');

• Replace: Content

Then we add the PHP code which will allow us to modify the text of the button directly from the home-page editor and we set the corresponding options.

the_sub_field( 'jumbotron_btn_text');

Replace: Content

Finally, we add the PHP code which will allow us to modify the link of the button and we set the corresponding options.

the_sub_field( 'jumbotron_link');

Replace: Href attribute (with esc_url)

The Three Columns Section

For the second section, we start with a conditional (ELSEIF which is done by associating the ELSE and the IF actions) to target which sub fields to call. In the current situation, we call the three_columns_section row.

Again, we target which sub fields to call. In the current situation, we call the three_columns_section row.

get_row_layout() == 'three_columns_section'

We add the PHP code which will allow us to modify the content of the H2 and we set the corresponding options.

the_sub_field( 'three_columns_title01');

• Replace: Content

Then, we add the PHP code which will allow us to modify the content of the Paragraph and we set the corresponding options.

the_sub_field( 'three_columns_paragraph01');

• Replace: Content

Then we add the PHP code which will allow us to modify the text of the button directly from the home-page editor and we set the corresponding options.

the_sub_field( 'three_columns_btn_tex01');

Replace: Content

Finally, we add the PHP code which will allow us to modify the link of the button and we set the corresponding options.

the_sub_field( 'three_columns_link01');

Replace: Href attribute (with esc_url)

The process is repeated for the 2 remaining columns.

The Call To Action Section

For this section, the method is the same as for the two other sections.

Closing the ACF Loop

All the sections are now created, the loop can be closed.

Again this is done by adding code by hand.

endwhile;

What if the ACF Pro plugin is not activated?

In the template, you can notice an element named NO ACF WARNING MESSAGE with a ELSE conditional.

This element (a very basic BS Alert component) will be displayed on the page only if the ACF plugin is not Activated.

What if there is no content to display?

You can also notice a second element named NOTHING TO DISPLAY with a ELSE conditional.

This element (a very basic BS Alert component) will be displayed only if there is no content available from the Flexible Content rows.

How to use the Page Builder?

• From the WordPress admin, go to Pages
• Edit the Home page
• You can now find a new Metabox named Homepage Builder
• Click on Add New Section
• Select the Section you want to add to your page

• Proceed to the setup of the Section and save

• You can also reorder your sections and the output on your homepage will be set accordingly.

When you have added, tweaked and ordered your 3 sections (but you can of course add more than one section of the same kind ), you can now have a look at your homepage in all its glory 😉

Conclusion

This demo project only covers a very small part of what is possible with Pinegrow WP and ACF Pro and we are sure you will find awesome use for this wonderful and (imho) must-have WordPress plugin.

Feel free to share your projects and ideas with us on the Pinegrow Forum and on the Slack Community.

Interesting Posts about ACF

Modular Web Design Meets WordPress with Advanced Custom Fields

Last updated on February 15, 2017 at 1:54 am

Print this article