Save ACF Repeater Field Data to the WordPress content area
Posted in WordPress on the 26th of March 2017 by @aaronrutley
Posted in WordPress on the 26th of March 2017 by @aaronrutley
Here’s a quick tutorial on how to save the data from an Advanced Custom Fields Repeater field into the standard WordPress content area.
Let’s imagine we’re working on a new website that has a “Testimonials” page and we’d like to have all of our data stored in a ACF Repeater Field, then saved to the standard WordPress content area.
The first step would be to create a page called “Testimonials”.
The next step is to create an ACF field group for this page, we’d set the content area to be hidden then create a repeater for Testimonials.
We could setup the Repeater Field to include a textarea field for the ‘quote’ and text fields for things like the ‘client name’ and the ‘business name’.
Here’s an example, filled with Hipster Ipsum:
Next, we can create a function that runs on acf/save_post
(this could go in your functions or a project specific plugin). We need this function to loop over all items in our Testimonial repeater, wrap it in the appropriate HTML and then update the page/post.
See an example of how to do this in the gist below. Note: this code will only run on if the post has an ID of 1234
. However, you could easily change this to run on page template or an entire post type.
Now, when we publish or update the post, all of our Testimonial HTML will be saved to the post_content
column in the database (this overwrites anything that was there previously).
We don’t need to edit any of our theme template files to see the output of the repeater field, the standard the_content()
function found in almost every theme will now display all of our Testimonials.
Here’s an example of how this content could look in the ‘twentyseventeen’ default theme:
One disadvantage of this approach is our ‘template’ markup is mixed into our function. So if in the future we wanted to change any of the HTML or if we add a new field, we’d need to edit the function then re-save the page(s) to see the changes.
I won’t be using this approach on every project going forward however it does provide quite a few benefits and it could be very useful for particular projects!