How to Use ACF Blocks in WordPress

ACF (Advanced Custom fields) Blocks are revolutionizing WordPress development by offering a lightweight, flexible alternative to bloated page builders like Divi and WP Bakery. Unlike these visual editors that often slow down your site with unnecessary code, learning how to use ACF blocks empowers you to create custom content structures that are both powerful and performance-optimized.

When you understand how to use ACF blocks effectively, you gain complete control over your site’s content architecture without relying on restrictive page builders. This approach eliminates dependency on shortcodes and proprietary systems, ensuring your website remains fast, maintainable, and future-proof.

Before You Start

Ensure you have:

• WordPress 5.0+
• Advanced Custom Fields PRO (v5.8+) installed
• Classic Editor plugin installed
• A child theme activated (prevents loss of customizations)
• File editing access via FTP/SFTP

Step 1: Create acf-json Folder

The foundation of learning how to use ACF blocks begins with proper organization. In your theme’s root directory, create a folder named acf-json. This special folder serves as the central repository for all your field group configurations.

Why is this important? The acf-json folder enables:

• Automatic saving of field groups in JSON format
• Easy version control integration
• Simple field migration between development and production environments

Step 2: Create ACF Field Group

Navigate to Custom Fields in your WordPress admin and create a new field group named “Flexible Page Blocks”. This will serve as the container for all your custom blocks.

Add a Flexible Content field with these settings:

• Field Name: page_content
• Field Label: “Page Content”
• Type: Flexible Content

This flexible content field becomes the canvas where you’ll add all your custom blocks when editing pages.

Step 3: Define Layouts

Now we’ll create two fundamental layouts that demonstrate how to use ACF blocks for different content types:

Simple Content Layout

    - Field Name: component-simple-content
    - Label: Simple Content
    - Subfields:
        * Field Name: the_content
        * Type: WYSIWYG Editor
        * Label: Content
        * Field Name: background_colour
        * Type: Color Picker
        * Label: Background Color
    

Quote Section Layout

    - Field Name: component-quote
    - Label: Quote Section
    - Subfields:
        * Field Name: the_quote
        * Type: WYSIWYG Editor
        * Label: The Quote
        * Field Name: person_quoted
        * Type: Text
        * Label: Person Quoted
    

Step 4: Create acf-loop.php

Create a new file named acf-loop.php in your theme’s components folder. This file acts as the controller that determines which block template to load:

    <?php
    if (have_rows('page_content')):
        while (have_rows('page_content')) : the_row();
            
            // Simple Content Block
            if (get_row_layout() == 'simple_content'):
                get_template_part('components/component-simple-content');
            endif;
            
            // Quote Block
            if (get_row_layout() == 'quote_section'):
                get_template_part('components/component-quote');
            endif;
            
        endwhile;
    endif;
    ?>
    

Step 5: Create Component Files

component-simple-content.php

    <?php
    $bg_color = get_sub_field('background_colour');
    $content = get_sub_field('the_content');
    ?>
    
    <section class="content-block" style="<?php echo $bg_color ? 'background-color:' . esc_attr($bg_color) : ''; ?>">
        <div class="container">
            <div class="content-wrapper">
                <?php echo apply_filters('the_content', $content); ?>
            </div>
        </div>
    </section>
    

component-quote.php

    <?php
    $quote = get_sub_field('the_quote');
    $attribution = get_sub_field('person_quoted');
    $style = get_sub_field('quote_style') ?: 'default';
    ?>
    
    <section class="quote-block quote-style-<?php echo esc_attr($style); ?>">
        <blockquote>
            <?php echo apply_filters('the_content', $quote); ?>
            <?php if ($attribution) : ?>
                <cite>&mdash; <?php echo esc_html($attribution); ?></cite>
            <?php endif; ?>
        </blockquote>
    </section>
    

Step 6: Include ACF Loop in Template

To activate your blocks, modify your theme’s page.php or single.php template:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="entry-content">
            <?php
            // Replace the_content() with our ACF loop
            get_template_part('components/acf-loop');
            ?>
        </div>
    </article>
    

Step 7: Add Blocks to a Page

Now you can:

1. Edit any page in WordPress
2. Locate the “Flexible Page Blocks” meta box
3. Click “Add Row” and select your block type
4. Fill in the content fields
5. Preview your page to see the blocks in action

This is where how to use ACF blocks becomes tangible – you now have a completely custom editing interface tailored to your specific content needs.

Why Choose ACF Blocks Over Page Builders?

Understanding how to use ACF blocks effectively gives you several advantages over traditional page builders:

• Performance: ACF Blocks generate clean HTML without the bloat of visual builders
• Maintainability: Your content structure is stored in logical field groups rather than shortcodes
• Flexibility: Create exactly the components you need without being limited by pre-made options
• Future-proof: Not dependent on third-party plugins that might become abandoned

Best Practices for Using ACF Blocks

To maximize your efficiency when working with ACF Blocks:

1. Use consistent naming conventions: Prefix all your field names (e.g., component_ for Components, opt_ for options)
2. Implement field group categories: Organize related fields together using the ACF field group categories feature
3. Leverage conditional logic: Show/hide fields based on other field values to simplify the editing interface
4. Document your blocks: Add descriptions to each field to guide content editors
5. Plan for reusability: Design components that can be used in multiple contexts

Conclusion

Mastering how to use ACF blocks transforms your WordPress development workflow. By following this guide, you’ve learned to create a flexible, component-based architecture that gives content editors powerful tools while maintaining developer control over the front-end output.

The true power of ACF Blocks reveals itself as you build more complex layouts. Once you’re comfortable with the basics, you can explore advanced features like:

• Nested flexible content fields
• Block validation rules
• Custom block previews
• Integration with WordPress block editor (Gutenberg)

With this foundation, you’re now equipped to build WordPress sites that are both powerful and performant, without sacrificing creative control to bloated page builders.

Expert WordPress Care & Ongoing Support

Keep your website secure, fast, and fully optimized with our professional WordPress maintenance, support, and SEO services. We handle everything from essential updates and secure backups to content additions and technical support—freeing you to focus entirely on growing your business.

Safeguard & Enhance Your WordPress Site Today