Building a Modular WordPress Framework Using ACF (Advanced Custom Fields), Part 2

In Part 1, we discussed the benefits of using a modular framework to build scalable and maintainable WordPress sites. Now let’s get into the how—specifically, how to use Advanced Custom Fields (ACF PRO) and its Flexible Content Field to create a fully modular page builder for your WordPress site.

⚙️ Why ACF Flexible Content?

The Flexible Content field type in ACF PRO lets you:

  • Define modular content blocks

  • Reorder them via drag-and-drop in the WordPress admin

  • Assign custom fields per block

  • Output clean, structured HTML in your theme templates

It’s essentially a lightweight, backend-powered page builder—ideal for developers who want control over markup, style, and structure.

🔨 Step-by-Step: Building Your Modular ACF System

Step 1: Install ACF PRO

You’ll need the PRO version for the Flexible Content field.
👉 Get ACF PRO

Step 2: Create a Field Group for “Page Builder”

  1. Go to Custom Fields > Add New

  2. Name it something like Flexible Content Builder

  3. Add a Flexible Content field called modules or page_blocks

Step 3: Add Layouts (Modules)

Each layout represents a content block (e.g., Hero, Text, Image + Text, CTA). For each layout:

  • Give it a name

  • Add subfields (text, images, selects, links, etc.)

  • Save and repeat for other modules

Example:

Layout: Hero Banner
- Headline (Text)
- Subheadline (Text)
- Background Image (Image)
- CTA Button (Link)

Step 4: Assign Field Group to Pages

Use the “Location Rules” to apply the field group to:

  • All Pages

  • Or a specific template (e.g., page-modular.php)

💻 Step 5: Output ACF Modules in Your Template

Create a custom page template (e.g., page-modular.php) and loop through the flexible content field like so:

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

        if( get_row_layout() == 'hero_banner' ):
            get_template_part('template-parts/modules/hero-banner');

        elseif( get_row_layout() == 'text_block' ):
            get_template_part('template-parts/modules/text-block');

        elseif( get_row_layout() == 'cta_block' ):
            get_template_part('template-parts/modules/cta-block');

        endif;

    endwhile;
endif;
?>

Then, in template-parts/modules/hero-banner.php, you can cleanly output the fields:

<section class="hero-banner">
  <div class="content">
    <h1><?php the_sub_field('headline'); ?></h1>
    <p><?php the_sub_field('subheadline'); ?></p>
    <a href="<?php the_sub_field('cta_button')['url']; ?>" class="btn">
      <?php echo esc_html( get_sub_field('cta_button')['title'] ); ?>
    </a>
  </div>
</section>

📦 Bonus: Make It Developer-Friendly

  • Use SCSS or Tailwind with BEM naming for modular styling.

  • Add conditionals to avoid rendering empty fields.

  • Wrap common patterns (e.g., container/grid wrappers) inside get_template_part().

🎯 Final Thoughts

With ACF’s Flexible Content field, you’re not just building pages—you’re building a reusable framework that scales with your site, improves editorial flexibility, and keeps your codebase clean.

Pairing ACF with a smart modular strategy means:

  • Editors get more control without breaking design

  • Developers avoid page-builder bloat

  • Designers get consistency across the site

You now have a powerful, performance-friendly page builder—handmade, fast, and scalable.

Comments are closed.