Introduction
In this article you will learn in detail how to create reusable blocks for any template using Advanced Custom Fields Pro (or as we call it, ACF).
The point of this method is to save you time by creating easy to deploy pages where you simply change the fields to update content, and the style of each page is retained.
Our example will be fairly simple but you can do some pretty advanced stuff with ACF!
Table of Contents
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.
Video Tutorial
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 Flexible content title for example).
Select Field Type Flexible Content:
4 – Next, create the first custom block.
Block 1 (id also by the name of the block – block_1)
For example, this block will be in the title block and it will have a Title, Subtitle and Description.
Create 3 fields respectively inside the content of Block 1.
5 – Create Block 2 – this will be, for example, Gallery.
To do this, select the field type – Repeater.
6 – Create Block 3. For example – List.
Select the Repeater field type – but now in the child fields, select the usual Text field type.
Adding output rules in the template
1 – Create a new template file.
For example – flexible.php
And add this code:
<?php
/*
Template name: flexible content
*/
get_header();
?>
2 – Put this template in the core of your theme.
3 – Add structure and output for Flexible Content
Go to the Location section and select the Page Template display and the desired template.
Here you can download ACF *.JSON file with all blocks described in article and import it to your ACF: FILE
4 – Add the ACF block output structure to the template
<?php /* Template name: flexible content */ get_header(); if( have_rows('flexible_content') ): while ( have_rows('flexible_content') ) : the_row(); if( get_row_layout() == 'block_1' ): ?> <?php elseif( get_row_layout() == 'block_2' ): ?> <?php elseif( get_row_layout() == 'block_3' ): ?> <?php endif; endwhile; else : // no layouts found endif; get_footer();?>
5 – Add layout and output of child fields.
The first block displays Title. Wrap it in an H1 tag. Add tags for the subtitle and description.
<div class="block1"> <h1></h1> <h3></h3> <div class="desc"> </div> </div>
.block1 h1{ font-size: 35px; color: #000; text-align: center; } .block1 h3{ font-size: 23px; color: #555; text-align: center; } .block1 .desc{ font-size: 16px; font-weight: 500px; }
This block also has a header. Enclose it in the H2 tag
h2> the_sub_field('title_b2')?>h2>
Accordingly, to display all images, use standard output:
if( have_rows('gallery_b2') ):
while ( have_rows('gallery_b2') ) : the_row(); ?>
the_sub_field('image_b2')?>
endwhile;
else :
// no rows found
endif;
?>
div class="block2">
h2> the_sub_field('title_b2')?>h2>
if( have_rows('gallery_b2') ):
while ( have_rows('gallery_b2') ) : the_row(); ?>
img src=" the_sub_field('image_b2')?>" alt="">
endwhile;
else :
// no rows found
endif;
?>
div>
.block2 h2{ font-size: 27px; color: red; text-align: center; margin: 0; padding-bottom: 20px; } .block2 img{ width: 150px; height: auto; display: inline-block; }
In this block we display the usual list.
But with Repeater Field Type.
So the block structure will be as follows:
ul>
if( have_rows('list_b3') ):
while ( have_rows('list_b3') ) : the_row(); ?>
li> the_sub_field('item_text_b3')?>li>
endwhile;
else :
// no rows found
endif;
?>
ul>
.block3 ul{ margin: 20px 0 0; padding: 0 0 0 25px; } .block3 ul li{ padding: 5px 0; font-size: 13px; color: #000; }
13 – All code for output Flexible content:
<?php /* Template name: flexible content */ get_header(); if( have_rows('flexible_content') ): while ( have_rows('flexible_content') ) : the_row(); if( get_row_layout() == 'block_1' ): ?> <div class="block1"> <h1><?php the_sub_field('title_b1')?></h1> <h3><?php the_sub_field('sub_b1')?></h3> <div class="desc"> <?php the_sub_field('desc_b1')?> </div> </div> <?php elseif( get_row_layout() == 'block_2' ): ?> <div class="block2"> <h2><?php the_sub_field('title_b2')?></h2> <?php if( have_rows('gallery_b2') ): while ( have_rows('gallery_b2') ) : the_row(); ?> <img src="<?php the_sub_field('image_b2')?>" alt=""> <?php endwhile; else : // no rows found endif; ?> </div> <?php elseif( get_row_layout() == 'block_3' ): ?> <div class="block3"> <ul> <?php if( have_rows('list_b3') ): while ( have_rows('list_b3') ) : the_row(); ?> <li><?php the_sub_field('item_text_b3')?></li> <?php endwhile; else : // no rows found endif; ?> </ul> </div> <?php endif; endwhile; else : // no layouts found endif; get_footer();?>
14 – Put the styles to styles.css file:
Adding Blocks to the WordPress page
1 – Create a new page and choose a template
2 – Add blocks By clicking on the Add Row button
3 – Filling blocks with content
4 – Blocks move in any order. They are also easy to remove and add.
If you will use method described in this article you will get something like this:
But if you go further, you can create any pages, for example:
In Conclusion
By the method described in the article, you can easily create blocks that can be moved as LEGO and add such a structure to any page.
If you have any questions, I will gladly answer them in the comments.
This article required some code skills.
If you will have some troubles, please, write into the comment and we will help you.
What do you think of this tutorial?
Article Title: How to use ACF to create reusable templates
Short Description: How to create reusable Advanced Custom Fields Pro Template for any WordPress Page
Author: Stan Ozernyi
Publisher - Orgnization: MemberFix
Publisher Logo: