ACF Repeater Fields in Elementor with Code Snippets - Advanced Custom Fields - FREE CODE
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2023
- Big thanks to Diana Nichols: diananichols.com/ for her code that I;ve adapted to give you ACG Repeater Fields within Elementor.
Now you can show the Repeater Fields form ACF Pro inside of your Elementor Single Post Templates.
All with Code that you can add pain-free with Code Snippets for FREE!
CODE IS IN THE PINNED COMMENT BELOW
ACF Repeater Fields in Elementor with Code Snippets - Advanced Custom Fields - FREE CODE
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
FULL CODE:
/* WITH BULLETS
shortcode for displaying required posting repeater field from ACF*/
add_shortcode ('show-required', 'dnlt_show_required');
function dnlt_show_required() {
$pageID = get_the_ID(); // not required if within loop, but doesn't hurt
$content= '';
if( have_rows('subjects_studied', $pageID) ) {
$content .= '';
while( have_rows('subjects_studied', $pageID) ) {
the_row();
$content .= '' . get_sub_field('subjects') . '';
}
$content .= '';
}
return $content;
}
/* WITH NO BULLETS
shortcode for displaying required posting repeater field from ACF*/
add_shortcode('show-required', 'dnlt_show_required');
function dnlt_show_required() {
$pageID = get_the_ID(); // not required if within loop, but doesn't hurt
$content = '';
if (have_rows('subjects_studied', $pageID)) {
while (have_rows('subjects_studied', $pageID)) {
the_row();
$content .= get_sub_field('subjects') . ''; // Use for line breaks
}
}
return $content;
}
/* WITH COMMAS AND NO BULLETS
shortcode for displaying required posting repeater field from ACF */
add_shortcode('show-required', 'dnlt_show_required');
function dnlt_show_required() {
$pageID = get_the_ID(); // not required if within loop, but doesn't hurt
$content = '';
$subjects = array(); // Create an array to store subjects
if (have_rows('subjects_studied', $pageID)) {
while (have_rows('subjects_studied', $pageID)) {
the_row();
$subjects[] = get_sub_field('subjects'); // Add each subject to the array
}
}
// Use implode to join subjects with commas and create the content
$content = implode(', ', $subjects);
return $content;
}
This code has absolutely changed the game for me! Also, if you use Anywhere Elementor you can combine this with the flexible content to create repeaters inside your flexible content blocks. 🤯🤯🤯
that was really nice and helpful, helped me get the complete concept of acf groups and repeaters.
I like your approach. This is a very realistic approach.
Glad you liked it!
Thank you for this!
Fabulous... I've adapted it to create a gallery showing video containers, as there is no way to show "archive" type fields created with ACF in Elementor.
It is a shame that Elementor Pro has not yet added the support to repeater field and AVIF image for Lightbox.
Pro tip use chatgpt to style the output or basically do anything what you need i do it for myself and its amazing i want the output data to be inside a box blalalalal and the caht gpt did a great job
This guy is hero :')
Thank you! Very helpful. I am looking for a way to do this with a repeater field with oembeds repeating. That way I can make a video gallery/grid.
Thanks, Imran! Really helpful
You're welcome!
Amazing, thank you! In my case, i had a repeater field with 2 subfields. This is how I displayed both of them and assigned them css classes for further css writing.
add_shortcode('show-required', 'dnlt_show_required');
function dnlt_show_required() {
$pageID = get_the_ID(); // not required if within loop, but doesn't hurt
$content = '';
if (have_rows('subjects_studied', $pageID)) {
while (have_rows('subjects_studied', $pageID)) {
the_row();
$content .= '' . get_sub_field('yourfieldname1') . '
' . get_sub_field('yourfieldname2') . '';
}
}
return $content;
}
Impressive :)
@@websquadron hope it can help someone out!
Also, for a table display (additional code snippet is made)
add_shortcode('show-repeater-table-view', 'dnlt_show_repeater_table_view');
function dnlt_show_repeater_table_view() {
$pageID = get_the_ID(); // not required if within loop, but doesn't hurt
$content = '';
if (have_rows('subjects_studied', $pageID)) {
$content .= '
NAME OF YOUR TABLE HEADER FIELD 1
NAME OF YOUR TABLE HEADER FIELD 2
NAME OF YOUR TABLE HEADER FIELD 3';
while (have_rows('subjects_studied', $pageID)) {
the_row();
$content .= '
'. get_sub_field('yourfieldname1') . '
'. get_sub_field('yourfieldname2') .' H
'. get_sub_field('yourfieldname3') .'
';
}
$content .= '';
}
return $content;
}
Good Job dad
Cheers Raheem. I hope you'll turn your computer soon.
I am up stairs
@websuadron for making this video...and continue for acf for directory listing website
One day... One day....
I have added okay, but there are 10 or more. How to Paginate using Ajax? Looking forward to sharing.
Should it also work for all kind of templates? For example a product archive template instead of a post type template? I can't get it to work with product archive template.
I'll have to test it, but it should
Hey could you do one where you create a custom acf field for phone numbers??? Since i know acf doesnm't have that option / field in free or pro version.
You could use the number field or telephone - and then when you show it on Elementor - maybe add tel: before it. I think…
This is awesome. One question though. I have a file field that is supposed to be shown by a text link. You can click it and download a PDF. I got that to work but now it shows up even when there is nothingg uploaded. Any help?
I’d have to see the site
This worked like a charm! Question: I created multiple shortcodes to use (text, image, WYSIWYG fields) and added to an Elemetor template and is pulling in correctly. The problem is when I add additional rows (content) - it stacks the fields, as opposed to creating an entirely new section of my repeater fields/ layout. Do I have to wrap all of these shortcodes in a main container so they don't stack on top of each other? or am I missing something else? thanks!
Possibly yes, or set it as a row.
How can I do this with nested repeaters? This seems the most elusive to achieve
Hmmmm... will need a think about that.
@@websquadron right now I'm trying to deal with the following situation:
Event repeater field
-> Sponsors repeater field
-> -> sponsor post object
This post object is a custom post type that also has acf fields, such as an img field called "logo"
I need to show the "logo" field of that post object dynamically (as there'll be multiple sponsors and their logos per event)
can we do this with Flexible Content?
Great Video mate, could this be done using font awesome icons like a tick or check? Appreciate this, it's a much cleaner way, I've been using Dynamic ooo to achieve it and only using that plugin for the reapeater. Now I can avoid that particular plugin :)
Hmmmm, not thought of that, I'll have to check.
Thanks very helpful.
Is it possible to output images from a repeater?
solved it with the following code
add_shortcode('show-required', 'dnlt_show_required');
function dnlt_show_required() {
$pageID = get_the_ID();
$content = '';
if (have_rows('icon', $pageID)) {
while (have_rows('icon', $pageID)) {
the_row();
$image = get_sub_field('icon-image');
if( !empty( $image ) ) {
$content .= '';
}
}
}
return $content;
}
Good question, not tried that myself.
Does it not work when used inside the Loop grid?
It should work
Or you could use Breakdance or Bricks that both handle the Repeater Field Natively.
Indeed, but the video was for Elementor :) :)
@@websquadron indeed - but some people may be interested to learn different ways to skin the cat!
That is what this tutorial is for, the cat can finally be skinned with Elementor@@danstevens1974
@@danstevens1974Yea, but this was for Elementor. There are other tutorials for Bricks and other worse builders such as Bricks
But how to achieve this with slider
Add to loop carousel
@@websquadron I have tried under loop carousel I have created a template but that is not taking repeater fields
Using this code Video not coming
Are there any JS errors when you inspect the page?
What a flaw of elementor .... you support ACF but not all the fields ??? also this happens in the pro version of elementor. Is Horrible.
Also , elementor doesn't have a simple table widget , why ???
I'm sure they'll roll out some support for the other ACF fields soon. As for the Table Widget, it's easier to add with HTML but I hear what you're saying. I can't speak for why they haven't added in Table widgets.
Hmm, I have been waiting 5 years for Elementor to support the other ACF fields now, have given up @@websquadron
@@websquadron I saw many github requests telling that and i don't know why they do not do that, also you can't see any grouped fields.
@@SebastianPerezG There's lots of things that are needed. Best example is a submenu that's active (aka. you have clicked on it). When that's the case, the menu doesn't show the selected menu item as active. Why? No idea. Makes no sense honestly.
@@multa7053 Yes , i mean , i think Brick has better support on this , Elementor has some features that do not care to anyone and they are pointless , like the Curve text ... how many websites are you gonna use this?
Also they have a very horrible the support on creating a custom widget for elementor, i mean they don't have a good example on how to use the entire library also very few tutorials explaining how to make one and the ones are very limited or basic.
Grazie.
Bless you :)
Do share the video (click the share button to get the right URL) and let the world know :)