How to Repeat ACF Flexible Content on Single Pages
As a WordPress developer, one of the challenges you may face is creating a flexible and dynamic content layout for your website. This is where the Advanced Custom Fields (ACF) plugin comes in handy, allowing you to build custom fields and layouts that can be easily repeated on single pages.
In this blog post, we'll explore a step-by-step guide on how to repeat ACF Flexible Content on single pages, using a real-world example of a testimonial section.
Step 1: Create the Testimonial Master Block
Firstly, let's create our ACF Master block, which in this case will be a "Testimonial Master" block. This block will have the repeater fields inside it, allowing us to add multiple testimonials.
- In the WordPress admin dashboard, go to "Custom Fields" > "Add New" to create a new Field Group.
- Give the Field Group a name, such as "Testimonial Master".
- Add the following fields to the Testimonial Master block:
- Testimonial Title (text field)
- Testimonial Content (textarea)
- Testimonial Author (text field)
- Testimonial Author Title (text field)
Step 2: Create the Testimonial Block
Now, let's create another Flexible Content Field called "Testimonial Block" with a checkbox that you can use to display or hide the block on a specific page.
- In the same Field Group, add a new Flexible Content Field called "Testimonial Block".
- Inside the Testimonial Block, add a checkbox field called "Testimonial Block Toggle" with the options "Show" and "Hide".
Step 3: Populate the Testimonial Master
Next, you'll need to populate the Testimonial Master block on your selected parent page or an Options page.
- Create a new page or navigate to an existing page where you want to populate the Testimonial Master.
- In the page editor, you should now see the Testimonial Master block. Add your testimonial data to this block.
Step 4: Add the Testimonial Block to Other Pages
Now that you have the Testimonial Master populated, you can add the Testimonial Block to any page where you want the testimonials to appear.
- Create a new page or navigate to an existing page where you want the testimonials to appear.
- In the page editor, you should see the Testimonial Block. Check the "Testimonial Block Toggle" checkbox to display the block.
Step 5: Retrieve the Testimonial Data
Finally, you need to retrieve the testimonial data from the Testimonial Master and display it on the pages where the Testimonial Block is enabled.
Here's an example of the PHP code you can use:
<?php
if( have_rows('page_structure') ):
while ( have_rows('page_structure') ) :
the_row();
if( get_row_layout() == 'testimonial_block' ):
if( get_sub_field('testimonial_block_toggle') == 'show' ):?>
<div class="testimonials">
<?php the_sub_field('testimonial_master_title', 1); ?>
</div>
<?php endif;
endif;
endwhile;
endif;
?>
In this example, we're checking if the "Testimonial Block" is present on the page, and if the "Testimonial Block Toggle" is set to "show". If both conditions are met, we can then retrieve the testimonial data from the Testimonial Master block using the the_sub_field()
function.
The "1" in the the_sub_field('testimonial_master_title', 1)
is the page ID, which is used if you have populated the field on a master page. If you're using the ACF Options Page plugin, you can change the "1" to 'options'
.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Conclusion
By following this step-by-step guide, you can create a flexible and dynamic content layout for your website using ACF Flexible Content. This approach allows you to easily repeat and manage content across multiple pages, making it a powerful tool for WordPress developers.
Remember, the key to success with this technique is to plan your content structure carefully and to utilize the full capabilities of the ACF plugin. By doing so, you can create a seamless and engaging user experience for your website visitors.
If you're looking for a tool to help you identify and fix technical issues that may be impacting your website's conversion rates, consider checking out Flowpoint.ai. Flowpoint uses advanced AI to analyze your website's performance and provide tailored recommendations to improve your conversion rates.