Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

ACF repeater & Visual composer - maybe functions.php WordPress

  • SOLVED

Hello,

I am using visual composer and ACF and the Jupiter theme. The acc shortcode orin visual composer works for normal ACF fields but if I assign a repeater field to it, it displays the word "array" on the frontend.

I'm assuming I need to loop through the ACF repeater in the template, but I don't want to create a seperate template for the page.

I've read that you can add it to the functions.php file, and am thinking that I can add to after the $content (this will work for the pga layout I need)

I don't have a specific repeater field set up but need the generic code to make this happen.

If there's a better way of making this work, like making the repeater field actually work through the ACF shortcode in VC that would be great.

Cheers,
Chris.

Answers (2)

2016-04-18

Rempty answers:

Hi,

function acf_locations_shortcode($atts){
extract(shortcode_atts(array(
"postid" => '1'
), $atts));
$ret="";
$rows = get_field('locations',$postid);
if($rows){
foreach($rows as $row){
$image = wp_get_attachment_image_src( $row['image'], 'full' );
$ret.='<div class="left">
<img src="'.$image.'" />
</div>
<div class="right">
<h2>'.$row['title'].'</h2>
<p>'.$row['location'].'</p>
<p>'.$row['description'].'</p>
<div class="table-wrapper">'.$row['table'].'</div>
</div>';
}
}
return $ret;
}
add_shortcode('acf_locations_shortcode','acf_locations_shortcode');

How use:
You must write:
[acf_locations_shortcode postid="123"] Where 123 is the id of the post.


crc comments:

Hi,
This is the repeater: https://www.advancedcustomfields.com/resources/repeater/

Based on the template usage in the above url I don't think the shortcode you suggested will work for the repeater.


Rempty comments:

Add this code to your functions.php

function acf_repeater_shortcode($atts){
extract(shortcode_atts(array(
"postid" => '1',
"field_name" => 'blog',
"subfields"=>'subfield_1,subfield_2'
), $atts));
$ret="";
$rows = get_field($field_name,$postid);
$sfields=explode(",",$subfields);
if($rows){
$ret='<ul>';
foreach($rows as $row){
$ret.='<li>';
foreach($sfields as $subfield){
$ret.=$row[$subfield].' ';
}
$ret.='</li>';
}
$ret.='</ul>';
}
return $ret;
}
add_shortcode('acf_repeater_shortcode','acf_repeater_shortcode');

How works
[acf_repeater_shortcode postid="123" field_name="repater_field_name" subfields="sub_field_1,sub_field_2" /]

You need the postid, the name of the repeater field, and the name of the subfields of your repeater separate by comas.


crc comments:

Hi Rempty,

Thanks for this. How do I now add this to the page?


Rempty comments:

You can write the shortcode inside a content text box, i think VC have a text content box where you can write your content

Example you have a repeater called "teams" and have subfields "team_name" and "team_totals", and the id of the post is 345

[acf_repeater_shortcode postid="345" field_name="teams" subfields="team_name,team_totals" /]


crc comments:

Hi,

That's almost working!

My example repeater has subfields of subfields, how would this work? My example set up is a menu and I currently have two subfields:

Appetizers & Main course. These each then have subfields

Thesis what is displaying on the font end after using the following shortcode:

[acf_repeater_shortcode postid="193" field_name="menu_sections" subfields="section_title,section_items" /]

• Appetizers Array
• Main course Array

This is the site I was sort of following when setting this up:

http://www.wpbasics.org/2016/03/14/advanced-custom-fields-restaurant-menu/


Rempty comments:

Do you want the menu loop as a shortcode??


crc comments:

Hi Rempty,

Never mind about the subfields of subfields - that was just an example I was working with and it won't apply for my real life example I'm working towards.

I need the code that is generated to look something like this:

<div class="">THUMBNAIL IMAGE</div>
<div class="right">
<div class="">TITLE</div>
<div class="">DESCRIPTION</div>
</div>

THUMBNAIL IMAGE, TITLE, & DESCRIPTION are the subfields.

Thanks.


Rempty comments:

Hi crc
I need the name of the subfields (thumbail image, title, description)


crc comments:

Hi,

field name is "Locations"
subfield names are "image,title,location,description"

cheers


crc comments:

Hi Rempty,

I believe you have answered my original question, so thank you!

As I now need the code expanding as I've noted, I've increased the prize from $10 to $20! Would be great if you can help.

Cheers,
Chris.


crc comments:

Hi Rempty,

I believe you have answered my original question, so thank you!

As I now need the code expanding as I've noted, I've increased the prize from $10 to $20! Would be great if you can help.

Cheers,
Chris.


Rempty comments:

Hi crc
Sorry for late response:
I need the structure of your repeater
Example
Repeater name: repeater_works
-Repeater field: work_atributes
Subfield: work_name
Subfield: work_desc
Subfield: work_image

I think this will not be reutilizable for other repeaters, because each repeater have their own fields and field types

But i will create a shortcode to show the results with the html structure you show me.


crc comments:

Thanks Remty,

Sorry for my late response! Thanks for your help on this.

I hope this outlines what you need, however I have included a screenshot of the Custom Field Group page.

Field Group name: Leasing Opportunities
Repeater field: locations

Sub fields:
1. Label: Image
Name: image
Type: Image
Q: What should I set this to - Image Array, Image URL or Image ID ?

2. Label: Title
Name: title
Type: Text

3. Label: Location
Name: location
Type: Text

4. Label: Description
Name: description
Type: Text

5. Label: Table
Name: table
Type: Wysiwyg Editor



This is what I need printed:

<div class=“left”>
<img scr=“image”>
</div>

<div class=“right”>
<h2>Title</h2>
<p>Location</p>
<p>Description</p>
<div class=“table-wrapper”>Table from Wysiwyg editor</div>
</div>