How to Supercharge ACF Repeater Fields inside Divi Modules
Recently when working on a client's website I needed to use the ACF repeater fields on a WordPress site that was built on Divi. After doing a quick google search and reading a few articles it seemed normal ACF fields on Divi's modules work flawlessly but when it comes to the repeater fields there seem to be technical issues and after a search on ACF support, it looks like I was not the only one with the same problem.
So I've created a custom page template for the custom post type because how else am I going to get the repeater fields showing up on the page, I completed the page and nonetheless the client ends up asking for the content to be put into tabs. I initially thought of adding bootstrap for it's tabbed featured and quickly remembered and realized that it may conflict with Divi and that Divi had its own built-in tab module.
Inserting Divi Modules into the templates
Instead of rebuilding the own page on a Divi, I decided to use the page template but somehow integrate the Divi tab module into my page template. So after a quick google search, I ended up on a post about how to integrate Divi section into a page template, so after skimming through the article I ended finding the piece of code I needed;
<?php echo do_shortcode('[et_pb_section global_module="198"][/et_pb_section]'); ?>Using the Divi library you can create a section with any module and using the shortcode above you can insert into any page template you'll need the module on.
With that, I created the tab module with a few test tabs and sure enough the module loaded onto the page where I had inserted the line of code, now to get the ACF repeater field working on the module.
In comes ACF Repeater
I know I needed PHP for the ACF repeater fields to work properly so from my older work I've learned using shortcodes to run code is a neat little trick and works almost everywhere in WordPress and could get anything done and it's in the functions.php file so it can run PHP!
Using the WordPress shortcode API and ob_start(); I've created a simple solution to the problem with displaying ACF repeater fields in Divi modules.
Just place inside your functions.php file and add your ACF repeater fields coding inside, then add the shortcode (in this case [foobar]) to the Divi module
function foobar_func( $atts ){
ob_start();
//ACF fields here
return ob_get_clean();
}
add_shortcode( 'foobar', 'foobar_func' );Let me know in the comments before if it works for you or if you have another way to add the ACF repeater fields to the Divi modules
Hi, it's interesting: can you explain all the steps of the process ?
I put the function in functions.php
function foobar_func( $atts ){
ob_start();
//ACF fields here
return ob_get_clean();
}
add_shortcode( 'foobar', 'foobar_func' );
and then added [foobar] in the text module...
but it doesn't work.
How did you do?
Thanks
Hi Lore21,
So putting that part into the functions.php won't show anything right away it's missing the ACF fields.
It'll be something like this:
You can read more about it here: https://www.advancedcustomfields.com/resources/repeater/
The code above isn't tested, let me know if you need more help
Hi Ricky,
the function above works fine, just filling the repeater_field_name and sub_field with the slug of the fields of ACF Repeater 😉
How did you style your ACF Repeater fields?
I have a field "Day" and a field "Description": so in the function they appears like
// display a sub field value
the_sub_field('day');
the_sub_field('description');
they should be in an accordion, but I don't know how to style them.
Thanks again
Your using the Divi theme, correct? And are you looking for the day as the toggle and the description as the inside panel of the accordion?
I've never used the divi accordion module with acf repeaters, I don't think that is possible at this point.
I would wrap the day and descriptions with divs, give them unique class and ids using the ACF index and use JS/jQuery to trigger the slideDown(); method
Yes, I'm using Divi and I'd like to have any new Day and Description as an Accordion tab.
Maybe with this guide could be solved
https://www.advancedcustomfields.com/resources/get_row_index/
what do you think about?
Thx
Do you mean put JS/jQuery in the functions.php?
Hey Lore21,
Sorry for the super late reply, you can put the JS in the functions.php file or you can add it into a custom JS file and include into the header.php or just add it to the footer.php.
Hope this helps
Yes, I'm using Divi and I'd like to have any new Day and Description as an Accordion tab.
Maybe with this guide could be solved
https://www.advancedcustomfields.com/resources/get_row_index/
what do you think about?
Thx
Hi Lore21,
Sorry for the late reply, yeah you can use the get_row_index for the unique id - the divi accordion does not have ACF support its best to use js/jquery to recreate the accordion, you can just add the script in the functions.php in the add_shortcode function
Hi Ricky, Thanks for the code! I got it working to display repeater field values in Divi. But the two text values appear next to each other. How can I separate them out and style them? I'd like to either put them on their own lines, or at least put a comma between each value when they display on the webpage.
Hi Scott,
Do you have an example or screenshot you can show me?
Thanks
Hi Ricky, Thanks for the code!
Do you think it's possible to create a Tabs with the repeater ?
Let me explain, I would like the name of the tabs to be a parent fields and the contents of each tab to be the child fields?
Thanks to this technique each time a parent field is added, a tab would be created automatically and the reverse too!
HI Jim,
I'm not sure if it's possible to use the Divi Tab Module to do this. I believe the tabs and content is managed inside the divi module itself. However, I think this would be possible if you were to custom code your own tabs.
Hope this helps
Hi I am using it on a page and it won't output anything at all. I know divi only likes posts but that is not what I want to achieve. Every page will be using acf and am trying to get the repeater to work. Is there a way I can add the page id or something to get it to work?
Hi Theresa,
Can you please give me a little bit more information, what exactly are you trying to do? You can try passing in attrs to the shortcode or get the page id from the shortcode function to call the ACF repeater fields. If you can provide me with what you currently have I can help you out a bit more.
Hi Ricky
Thanks for your help. I did this to make it work except it is a pdf and spits out all the code instead of text that links to the pdf:
function foobar_func( $atts ){
ob_start();
extract(shortcode_atts(array("id"=>'277888'),$atts));
// check if the repeater field has rows of data
if( have_rows('files') ):
// loop through the rows of data
while ( have_rows('files') ) : the_row();
// display a sub field value
the_sub_field('notes');
endwhile;
else :
// no rows found
endif;
return ob_get_clean();
}
add_shortcode( 'foobar', 'foobar_func' );
Do I add echo to add the html to fix it? Sorry just learning shortcodes.
So you're passing any attributes into the shortcode like [foobar id="277888"]?
Are you using the ACF File fields on the sub_field notes?
The ACF file field: https://www.advancedcustomfields.com/resources/file/
If the notes sub field is the file field its probably returning an array and you'll need to pull the URL from the array
$file = get_sub_field('notes');
$url = $file['url'];
echo esc_attr($url);
Hope this helps, let me know if you have any more questions - feel free to use the contact form to send me a URL as well
Hi thanks again for your help I did this and it is working:
<a href="" >Download File
Glad you got it working!
Hi I can't get the shortcode to work on another page. This page it works on is the page that has the acf fields (not a custom post type). I have a custom post type that uses acf and have repeaters in it. As it is a large form I have it in tabs. I can't get the shortcode to work at all. Even the one I posted to you will only work on the page that has fields.
Is it that I have to use a template or have to use the themebuilder? Weird how it won't work on any other page.
The shortcode will work on any page even with a page builder, make sure your ACF field names in the shortcode match the ones on your custom post type.
Sorry for the confusion. It won't work on another page that doesn't have the acf form. You see I added this is foobar
[foobar]
to this page https://site.websitescreated.com.au/page/ that has the acf form on the page.
Also to this page https://site.websitescreated.com.au/sample-page/ that doesn't have the acf form on the page and it shows up empty.
So can it only work on the page that has the acf form?
Thanks for your time I know you are busy.
Hi Theresa,
Yeah so the sample page needs to have ACF fields to show up on that page, if you want the information to be displayed on separate pages but with the same information, you might need to look into the ACF options page.
When you use the shortcode on a page there will need to be ACF fields on that page or else it won't have any information to pull from. You can also try this: https://www.advancedcustomfields.com/resources/how-to-get-values-from-another-post/
get_field('field_name', 123);
the 123 is the post/page ID
The names are correct just only works on the page that has the acf fields not any other page. There must be a reason for it.