How to use ACF to create reusable templates

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!

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>

6 – Adding styles for Block 1 (Add styles code to styles.css – located in /wp-content/themes/yourtheme/)

.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;
}

7 – Creating layout for the 2nd block
This block also has a header. Enclose it in the H2 tag

 <h2><?php the_sub_field('title_b2')?></h2>

8 – To display the images, the field type Repeater was created. 
Accordingly, to display all images, use standard output:

<?php
          if( have_rows('gallery_b2') ):
              while ( have_rows('gallery_b2') ) : the_row(); ?>

                  <?php the_sub_field('image_b2')?>

          <?php
            endwhile;
          else :
              // no rows found
          endif;
        ?>

9 – Supplemented with an external block wrapper and a child element in the form of an image.

<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>

10 – Adding Styles for Block 2

.block2 h2{
  font-size: 27px;
  color: red;
  text-align: center;
  margin: 0;
  padding-bottom: 20px;
}

.block2 img{
  width: 150px;
  height: auto;
  display: inline-block;
}

11 – Adding layout for the 3rd block.

In this block we display the usual list.

But with Repeater Field Type.

So the block structure will be as follows:

<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>

12 – Adding Styles for Block 3

.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.