Building Complex Repeaters with ACF and Custom Code

Advanced Custom Fields (ACF) is a WordPress powerhouse for creating dynamic, customizable sites. But when it comes to managing complex repeaters with nested fields, things can get a little tricky. In this guide, we’ll walk through how to leverage ACF and custom code to build and display intricate repeaters seamlessly

What Are Repeaters in ACF?

The ACF Repeater Field allows you to create rows of data that you can repeat as needed. Each row can contain subfields such as text, images, or even other repeaters. This makes it ideal for:

• Multi-level FAQs
• Team member directories
• Portfolio projects with multiple attributes

Setting Up Your Repeater Field

1. Install and Activate ACF Pro:
   Repeaters are a Pro feature, so make sure you’re using the correct version.
2. Create a New Field Group:
   • Go to ACF → Field Groups.
   • Add a Repeater field.
   • Configure subfields such as title, description, or even nested repeaters.
3. Assign the Field Group:
   Attach your field group to the desired post, page, or custom post type.

Customizing with PHP

To display your repeater data on the front end, you’ll need some custom PHP code. Let’s say we’re working with a Portfolio repeater that has a nested Project Details repeater.

 
' . esc_html($portfolio_title) . '';  
        echo '
' . esc_html($portfolio_description) . '
';  

        if (have_rows('project_details')):  
            echo '
';  
            while (have_rows('project_details')): the_row();  
                $project_name = get_sub_field('project_name');  
                $project_status = get_sub_field('status');  

                echo '
' . esc_html($project_name) . ' - ' . esc_html($project_status) . '
';  
            endwhile;  
            echo '
';  
        endif;  
    endwhile;  
endif;  
?>

Styling Your Repeaters

Use CSS to create a clean, visually appealing structure. For example:

 
.portfolio-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}

.project-details ul {
  list-style-type: disc;
  padding-left: 20px;
}

.project-details li {
  margin-bottom: 5px;
}

Tips for Optimization

• Use Caching: For large datasets, implement caching to reduce database queries.
• Lazy Loading: If your repeater includes images, load them lazily for better performance.
• Conditional Logic: Only load repeaters when necessary to improve speed.

Conclusion

By combining ACF’s repeater fields with custom PHP and styling, you can build powerful, dynamic content structures. Whether you're crafting nested FAQs or detailed portfolios, the possibilities are endless with a little creativity and coding know-how.

Have you worked with complex repeaters before? Share your tips in the comments below!

Displaying ACF Fields in WordPress Templates

Advanced Custom Fields (ACF) is a powerful plugin that enables WordPress developers to add custom fields to posts, pages, and custom post types. By leveraging ACF, you can create highly customized WordPress websites with dynamic content tailored to your needs.

In this guide, we'll walk you through how to display ACF fields in your WordPress templates. Whether you're creating a custom theme or modifying an existing one, this step-by-step tutorial will help you integrate ACF seamlessly

Step 1: Install and Set Up ACF

If you haven’t already, install and activate the ACF plugin. Once installed:

1. Go to Custom Fields in the WordPress admin menu.
2. Click Add New to create a field group.
3. Add your desired custom fields (e.g., text, number, dropdown, etc.).
4. Assign the field group to specific post types or pages where you want these fields to appear.

For example, let’s create a field group with a dropdown field called "Property Type" for a real estate website.

Step 2: Retrieve ACF Fields in Templates

After setting up your custom fields, you can display their values in your WordPress theme templates using PHP. Here's how:

1. Basic Usage

Basic Usage
Use the get_field() function to retrieve field values in your templates. For example:

Replace 'field_name' with the actual name of your custom field.

2. Displaying Image Fields

If your custom field is an image, you can display it like this:

 
';
}
?>

3. Repeater Fields

For repeater fields, use a loop:

4. Flexible Content Fields

For flexible content fields, handle layouts conditionally:

Step 3: Debugging ACF Fields

If the field is not displaying as expected:

• Ensure the field is correctly assigned to the post, page, or template.
• Double-check the field name in the template.
• Use var_dump(get_field('field_name')); to debug the field's value.

Step 4: Best Practices

1. Sanitize Output
   Always sanitize dynamic content to prevent security vulnerabilities. Use esc_html(), esc_url(), and other WordPress sanitization functions where appropriate.

2. Use Conditional Statements
   Wrap your get_field() calls with conditional statements to prevent errors when fields are empty.

3. Leverage Template Parts
   For modular and maintainable code, consider creating template parts for displaying ACF fields.

Conclusion

By following these steps, you can harness the full potential of ACF to create dynamic, user-friendly WordPress sites. Whether you're building a portfolio, an e-commerce site, or a blog, ACF adds flexibility to your development process.

Have you tried using ACF in your projects? Share your thoughts and experiences in the comments below!

How to Use ACF with WP Query for Advanced Filtering

Advanced Custom Fields (ACF) is one of the most powerful tools for adding custom data to WordPress. When combined with WP_Query, you can create advanced filtering systems to display dynamic content based on custom field values. In this guide, we’ll explore how to use ACF with WP_Query for advanced filtering in WordPress.

Step 1: Install and Set Up ACF

If you haven’t already, install and activate the ACF plugin. Once installed:

1. Go to Custom Fields in the WordPress admin menu.
2. Click Add New to create a field group.
3. Add your desired custom fields (e.g., text, number, dropdown, etc.).
4. Assign the field group to specific post types or pages where you want these fields to appear.

For example, let’s create a field group with a dropdown field called "Property Type" for a real estate website.

Step 2: Add Custom Fields to Your Posts

After setting up your fields, navigate to the posts or custom post types where the fields are assigned. Populate these fields with relevant data for filtering.

Example: Add "Apartment," "Villa," or "Studio" under the "Property Type" field for different posts.

Step 3: Write a Custom WP_Query with ACF Filters

To filter posts based on ACF fields, you’ll use the `meta_query` parameter in WP_Query. Here’s an example code snippet:

 
 'property', // Replace with your post type
    'meta_query' => [
        [
            'key' => 'property_type', // ACF field key
            'value' => 'Apartment',   // Value to match
            'compare' => '=',        // Comparison operator
        ],
    ],
    'posts_per_page' => 10, // Limit the number of results
];

$query = new WP_Query($args);

if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        // Output your post content here
        echo '
' . get_the_title() . '
';
    }
    wp_reset_postdata();
} else {
    echo 'No results found.';
}
?>

In this example, we’re querying posts from the "property" post type where the "Property Type" field is set to "Apartment."

Step 4: Allow Dynamic Filtering with a Form

To let users dynamically filter results, you can create a front-end form. Here’s an example:

 

    Property Type:
    
        Select a type
        Apartment
        Villa
        Studio
    
    


 'property',
    'meta_query' => $selected_type ? [
        [
            'key' => 'property_type',
            'value' => $selected_type,
            'compare' => '=',
        ],
    ] : [],
    'posts_per_page' => 10,
];

$query = new WP_Query($args);

if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        echo '
' . get_the_title() . '
';
    }
    wp_reset_postdata();
} else {
    echo 'No results found.';
}
?>

This form allows users to select a property type, and the query dynamically adjusts based on their selection.

Step 5: Optimize the Query for Performance

For large datasets, consider the following optimizations:

1. Index your database: Ensure that custom fields are indexed in the database to speed up meta queries.
2. Use Transients: Cache query results using WordPress transients for frequently accessed data.
3. Pagination: Add pagination to handle large numbers of results efficiently.

Example pagination code:

 
$big = 999999999; // Need an unlikely integer

echo paginate_links([
    'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
    'format' => '?paged=%#%',
    'current' => max(1, get_query_var('paged')),
    'total' => $query->max_num_pages,
]);

Conclusion

By combining ACF with WP_Query, you can build robust and flexible filtering systems tailored to your project’s needs. Whether you’re creating a real estate website, an e-commerce store, or a blog, these techniques will help you deliver dynamic and personalized content to your users.

Top 10 Most Useful ACF Field Types and Their Use Cases - with Examples

ACF (Advanced Custom Fields) offers a wide variety of field types that empower WordPress developers to create dynamic, customizable, and user-friendly websites without extensive coding.

This post highlights the top 10 most useful ACF field types—Text, Textarea, Image, Gallery, Repeater, Select, Relationship, Date Picker, True/False, and Google Maps—along with practical use cases and code examples. These fields enable developers to build features like custom galleries, FAQs, event schedules, toggles, location maps, and much more.

By leveraging these fields effectively, you can significantly enhance the functionality and flexibility of your WordPress sites, catering to diverse project needs.

1. Text Field

Use Case

Perfect for single-line inputs like titles, headings, or simple text information.

Example

A "Client Name" field for a testimonial custom post type.

2. Textarea Field

Use Case

Great for longer text, such as product descriptions or user comments.

Example

A "Short Bio" field for author profiles.

3. Image Field

Use Case

Ideal for adding images, like a featured image for a custom post type.

Example

A "Team Member Photo" for a staff directory.

4. Gallery Field

Use Case

Useful for showcasing multiple images, such as a portfolio or product gallery.

Example

A "Project Gallery" for displaying project images.

5. Repeater Field

Use Case

Allows for flexible, repeating sets of fields, like FAQs or timelines.

Example

A "FAQ Section" with questions and answers.

6. Select Field

Use Case

For predefined options, like categories or user roles.

Example

A "Service Type" dropdown for a services post type.

7. Relationship Field

Use Case

Connect related content, such as linking blog posts to a specific author.

Example

A "Related Articles" section for a blog post.

8. Date Picker Field

Use Case

Great for event scheduling or publishing dates.

Example

An "Event Date" field for an events custom post type.

9. True/False Field

Use Case

For toggling settings or boolean values, like showing or hiding a section.

Example

A "Featured Post" toggle for blog posts.

  

    
Featured Post

10. Google Maps Field

Use Case

Perfect for adding location data.

Example

A "Store Location" map for a store locator feature.

Summary

Summarize the versatility of ACF fields and encourage readers to explore these field types in their projects. Offer a downloadable code snippet or a demo project for added value.