Repeating Fields in WordPress with Advanced Custom Fields Pro

Aloha everybody welcome back to the channel where  my goal is to help you make better wordpress   websites for yourself your community and your  clients i'm Kris Jolls and in this series on   advanced custom fields i want to introduce to you  the repeater field the repeater field is a very   powerful feature in advanced custom fields that  allows you to repeat or allows your author to   repeat groups of fields as they see fit so let's  say you are allowing your author to have a text   link in its post but you want to create a list of  links well now you can allow your author to click   new link and a new link will appear and a new row  will show up on the front end another good example   could be a movie review website where you have  a custom post type that has a field groups with   images a title a description and a link and  you want to repeat those groups of fields the   repeater field allows you to do that so without  further ado let's dive in and check it out but   i wouldn't be making a youtube video if  i didn't tell you to like subscribe and   let's get started okay so to get started we are  here at the advancedcustomfields.com resource   page where we have all our documentation and we're  going to go ahead and take a look at our field   types here and today we are going to be using the  repeater field now in order to use the repeater   field you do have to have the advanced custom  fields pro plugin installed so please purchase   that installed it and activate it before you  continue i'll have a link down below to where   you can get that it's not an affiliate link as of  now and it may be in the future but it will just   get you there so you can get the product and we  are going to go ahead and click on this repeater   field and you'll see here that the repeater  field provides a neat solution for repeating   content think slides team members call to action  titles and alike this field type acts as a parent   to a set of subfields which can repeat it again  and again basically if we click on this picture   what you'll see is that they have different fields  here right they have an image field a text field a   select field and a url field so these fields can  get repeated as needed so these are subfields of   the repeater field and you'll see that they  have the settings here that you could go over   and the template usage okay we're going to  use that repeater field in our example here   and what we want to be able to do is repeat this  button of links here so let's just come over here   to our code real quick and what we are going to do  is going to get rid of this class here and if we   come over here and refresh our post you'll see and  remember from our previous video of how to create   a link field in our text and i have that linked  above so you can go and check that video to get   started with advanced custom fields and you'll see  in here we had a field group called authors notes   and if we come into this one we could see here  that we have a custom field for notes and the   links that you see above that you see here  okay this is our notes and this is the link   now what we want to do is to be able to allow this  author let's come into our sample post here we'll   go into edit and you'll see those fields have  been placed on our page editor our post editor   now what we want to do is allow this author to add  multiple links as of now it could just enter one   and that's it so the repeater field is going  to allow us to post a field again and again   or a group of fields so let's just go ahead and  come back over here to our field group and what   we are going to do first of all is just get rid  of this link right here okay so let's just go   ahead and delete this delete this one and select  remove and there you go if we update it come back   over here it will be removed and if we come back  over here to our page you'll see that it's not   removed because the code is actually still in  here so let's just go ahead and get rid of this   save it come back over here and you'll see that  data is now gone so let's go back to our advanced   custom fields to our field group called authors  notes and we're going to create a new field   and this is going to be a repeater field what  i would like to do all the time is come here   and before i start giving it a name and stuff  is select the type of field it's going to be   we're going to scroll down here to the repeater  field that will only be here if you have the pro   version of this plugin so if you don't see  repeater make sure you go and get the pro   version okay so we have a field type of repeater  and we are going to call this we're going to call   this field green group links okay and it's going  to be a repeater type and we're going to type   enter urls here for our instructions we're not  going to make this required because again if we   make this required and the author doesn't add any  links then they won't be able to publish this post   if required is selected okay so we are going to  make our first url link and when we create new   fields here within our repeater field they become  subfields so we created a new field called links   that is a repeater field and then now we're  going to create fields within them that are   going to become subfields and these fields will  be our links and again i like to come down here   and make sure i always have the right field  selected before i start changing the settings   that's just me and we're going to call this link  we're going to press tab and it will give us   let's capitalize this and if we press tab it will  give us the lowercase version instructions for the   author showed when submitting data urls so if you  saw my previous video on how to use links you'll   see that we have a link array and we have a link  to keep this video short and simple we're just   going to use the link url we're going to spit out  a list of links and so all we need to do is grab   the url i'm not going to use any conditional logic  we're going to keep everything here the same so   we're going to go ahead and close this field here  so now we have a repeater field with links inside   of it right here if we wanted to add more fields  we could we could add text fields image fields   and that repeater will repeat these fields  again and again we'll see that in a second here   here you can click select different options  for this repeater field okay you could have   select a subfield to show when row is collapsed so  we want to show this subfield that's called link   we could have minimum rows so if you only want  if you want to make sure that your author selects   at least one row then you would enter that here  if you want to make sure they only have so many   of these rows repeated you could do a maximum here  so let's just set it to zero and zero we want our   layout to be a row and then we want the button  label when this author goes to create another   link what do you want your label to say what do  you want your button to say and we could say here   instead of add row so here we're going to do add  url no conditional logic and there doesn't need to   be any kind of custom classes here so we're going  to close that field and now you'll see that we   have our notes again and we have our repeater  field here so let's go ahead and update this   let's go into our post editor and refresh it  and you'll see we have our post here and we   have our notes field and now down here we have a  new repeater field and with our instructions are   enter yours urls here so we could add a url here's  our button that we said give this the title add   url and here's our instructions that we put simply  urls so we're going to select a link we're going   to say apple.com we're not going to give this  a title we want to make sure this opens up in a   new tab and that's good so now that we have a link  what we could do is add another link because what   we're doing is repeating this field okay so now  the author could come in here and create another   link this one's going to go to google.com  we're not going to select open link in a   new tab or give it a text so now we've got two  urls in our post and we're going to update it   and since we haven't put this in our code you're  going to we're going to come over here and refresh   it and you'll see it won't spit out our urls now  we need to go to our theme files and have this   spit out to our front end now once again i'll  have a link above if it's when it's posted to   my video that will show you how to use advanced  custom fields in popular theme builders like divi   that i use and those theme builders you could  create pages and post and get this information   into your front end of your wordpress like this  without ever having to touch your theme files   check out my link above for that but otherwise  if you want to get into wordpress development   learning to do this stuff into your files is a  great thing to learn so what we're going to do is   you're going to come over here and you're going  to see in this demonstration for a basic loop   is something like this it's going to be a php and  so this is going to see if there's even rows that   exist so it's going to ask if have rows in the  repeater field name we call ours links right   so if there's rows and links then it's going to  run this okay and so it's going to say while have   rows in links then get the row then it's going to  spit out the sub value of that row which is the   subfield that we called link you don't necessarily  have to copy and paste this right into there   they just give you examples on how to do this and  once you start getting into more and more fields   and into your repeater it gets a little bit  more complicated what we're going to do is   just the basic code to get your repeater to show  this link so here's our text editor and we have   our notes here and so we're going to go ahead  and give ourselves some room here we want this   to be within the same div as these other ones  i'm going to paste in some code i have here and   let's just clean it up a little bit i have this  div that i don't need here so i'm going to close   delete that one give some space here okay so  this is same it's going to be open and close   php tags if you come over here to this example  over here they don't use open enclosed php tags   and that means you won't be able to write html in  there like this one is so while there's different   ways to write the code this is the way i will  use it for simplicity so i'm going to have open   and close php tags and this is going to say  if have rows so it's going to look for the   repeater field that we called links so if there's  rows in there while have rows again in the links   okay then i'm going to create a variable called  link and it's going to get the subfield that   we called link okay so if you come back over  here you'll see that we created a field called   links this is the repeater field and then within  that field we have a subfield called link okay   so it's created a variable and it's going to  get that data and then it's going to create a   an unordered list and then a list then it's going  to create an a tag with our link and it's going   to go ahead and echo out the variable that we  created link and it's going to do the same here   and it's going to end the while and then and end  the end if statement so we're going to press save   we're going to come back here we're going to make  sure we have some links in here this one's going   to say google.com and what we want to do is just  go ahead and echo this field so what we're going   to do here is just go ahead and get rid of  this here and we just wanted to echo the link   same thing here and so if we come back over here  and refresh our page here you'll see our links   now if we wanted to we could come back to our  post we could add a link we're going to add a new   url and we'll say.com add link update come  to our post and you'll see that new link   is there and it's as simple as that now don't  forget there's different ways to show a link field   you could use the url option or you could  use the array option there's also all kinds   of different fields that you could put in  this repeater field and how you that shows up   on the front end is different for each field okay  but this is how you put a link in a repeater field   and there you go that's how you use the  repeater field in advanced custom fields   check out my playlist on advanced console  fields to see what else you could do don't   forget to like the video if you found it helpful  subscribe for more and i'll catch you next one you

Channel: Kris Jolls

Views: 34

Keywords: web design, graphic design, wp, wordpress, advanced custom fields, ACF, plugin

Id: 8i4UAxwXXyI

Length: 12min 59sec (779 seconds)

Published: Mon Nov 01 2021