How to Supercharge ACF Repeater Fields inside Divi Modules

January 18, 2020

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

Comments

24 comments on “How to Supercharge ACF Repeater Fields inside Divi Modules”

  1. 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

  2. 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:

    function foobar_func( $atts ){
    ob_start();
    // check if the repeater field has rows of data
    if( have_rows('repeater_field_name') ):
      // loop through the rows of data
      while ( have_rows('repeater_field_name') ) : the_row();
        // display a sub field value
        the_sub_field('sub_field_name');
      endwhile;
    else :
      // no rows found
    endif;
    return ob_get_clean();
    }
    add_shortcode( ‘foobar’, ‘foobar_func’ );

    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

  3. 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

    1. 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

        1. 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

    1. 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

  4. 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.

  5. 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!

    1. 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

  6. 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?

    1. 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.

  7. 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.

    1. 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

  8. 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.

  9. 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.

    1. 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

Leave a Reply

Recent Posts

Merged Comments for WPML

Because WPML creates posts and pages for each language, comments from one do not appear on the other. This plugin merges comments from all WPML translations of the posts and pages, so that they all are displayed on each other. Comments are internally still attached to the post or page they were made on. It […]

Transparent Background on Divi Header until Scroll using only CSS

Recently I was working on a new client's website using the Divi theme and they wanted a nice visual video background as the homepage hero, so to clean up the visual appeal of the site I wanted to set the Divi header background to transparent, and on scroll bring the background back in. Below is […]

How to translate the group name and description on BuddyPress using ACF Pro and WPML

If you have been looking to translate the group name and description with WPML on BuddyPress and/or BuddyBoss platform and you found yourself on the WPML support forums with answers like "Unfortunately it is not possible to translate e group names and descriptions yet." or "Actually I am not sure if this is possible...". Well, […]

Web Hosting Canada
© 2023 RickyPoon.ca - All rights reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram