Create CUSTOM FIELDS with DIVI and Advanced Custom Fields in WordPress

Aloha everybody welcome back to the channel  where i strive to help you make better wordpress   websites for yourself your community and possibly  your clients I'm Kris Jolls and today in this   video i'm excited to introduce you to advanced  custom fields with divi advanced custom fields   is a powerful plugin that we've been exploring  on this channel that helps you create custom   inputs in the back end of your website that  you can have up here on any type of post that   you choose divi has some powerful features that  allows you to pull in the data from these fields   and input them into your template builder and  other parts of your divi website today in this   video i'm going to show you how to get started  with advanced custom fields and divi using the   text field and the link field don't forget if you  found this video helpful i'd appreciate that like   and without further ado let's get started okay so  here's my wordpress environment there's nothing   added i have no posts no pages the only thing i  have done is uploaded the divi theme and that's   running let's go over here we have advanced custom  fields plug-in installed we're going to come over   here to our custom fields from my previous videos  on introduction into advanced custom fields i   made a video on the text field and the link field  and in those two videos we made this field group   on called authors notes so if you're just getting  started with advanced custom fields i recommend   going back and watching this video i have above  on the text field that helps you get started with   advanced custom fields and creating a field group  and creating these fields otherwise i'm going to   assume you have some basic knowledge of advanced  custom fields you've gone in there created fill   groups and fields before and i'm just going to  run through some of the settings that i have in   this field group okay so this is our author's  notes field group that we created so we're   gonna go in here and edit this and in this field  group we've created we've created a text field   a link field and a repeater and so today we're  just gonna concentrate on the getting these two   fields the text field and the link field to show  up in our design through our divi page builder   okay so let me just take you back to my previous  video here and you'll see what we have is this   section called authors notes and in there he left  a in the text field i love this product and a link   to uh to the product let's say okay so that's  our field group and we got this to display on   our front end using our php code in our files okay  so today we're going to do this with divi let's go   ahead and close this all right so here we are with  our field group and you'll see that we call these   field groups notes and resource link i understand  some people might be coming here and they are new   to advanced custom fields so i do want to  just show how i have this set up real quick   so you'll see that we have our three fields and  in our field group that we called authors notes   we are going to have this show up on the post  type that is equal to post so this is basically   going to show up on every single blog post that i  create you could change this to show up on a page   layout and project so what it means to have this  show up is to have these fuel groups show up kind   of like these are field groups all this stuff is  field groups okay so we could get these to show up   when we're editing a post a page a template and so  many different parts of wordpress it's pretty cool   so for now we're going to do post type is equal  to post we're going to have this active all these   settings are pretty standard i haven't changed  anything and there's nothing changed here now   you can change how you style your meta boxes what  position they show up and stuff like that and then   you can also hide features on post this is pretty  cool so let's say you're going to do this to a   custom post type and you don't need to add  categories or you don't need to add a featured   image you could have these meta boxes taken away  from the post while they're editing okay so moving   forward we have three fields we're gonna work  with these two fields let's just go into our   text field and check that out real quick okay  so we have a text field that's going to show up   on the blog post that's going to allow the author  to enter a note okay so we named this field notes   this is the this is the label this is the field  name our field type you can select from here   we're going to select the text field and in  here is some instructions that will show up   on the post editor page something like this these  are instructions okay so your final words here is   what we're going to have say we will not make this  required if you make this required and the author   does not fill in something in that field that you  created for them they will not be able to publish   the post so you don't want to make this required  on lots of times here you have other options if   you want to know more about these options you can  see my previous video as explained for now that's   the basic setting for this field we're going to  close it we're going to open up our resource link   that we created and that's a link field now in  our link field we call this resource link that's   our label okay this is a label but in your field  name when this two words needs to be separated by   an underscore and it's all lowercase letters and  so once again we selected our field type as a link   if you come all the way down here you can  select the link and these are all available   options on the free version of advanced custom  fields you'll see down here i have other options   that are available because i have the pro  version installed but everything we're doing   today is available on the free version and using  it along with divi is free as well okay so these   are instructions enter source url i had set this  up something like for let's say an author of a   was writing something and they were going to leave  resource links okay so that's the way we'll we'll   work on it today is that there'll be resource  links to an article okay so enter source here   required once again no now here's an important  um setting right here you can either have this   data collected and spit out in a link array or a  link url now link url is just as it sounds it's   going to spit out and collect the data of the url  apple.com for instance a link array is going to   collect and spit out the data that you created in  the link when you create a link like the url the   title tag whether you select the option to open  it in a new window etc so it creates a link so for   what what we're doing and the way i found it best  used in divi is to just do the link rl for now   we'll do no conditional logic and we could close  this field we've gone through all the settings and   i've showed you the two fields once again we have  a field text field called notes and a link field   called resource link in another video i'm going  to show you how to use the repeater field because   for now we're just going to be able to enter  one resource link but if we wanted this author   to create three or several links then you need to  use the repeater field in advanced custom fields   pro so you have to get the updated pro version  for the repeater field okay and i'm going to   show you how to use that in a another video for  now let's just go ahead and go over to our post   and you'll see i created a post called acf example  so we're going to come in here and edit this and   you'll see we have our post as usual then we have  a field box down here this is our field group that   we called authors notes here's our notes with  our instructions and a place to type here's our   resource link with a button that says select link  so we're going to go ahead and enter our final   words we'll say something like do you agree and  then now our author will be able to also add in a   url so we'll do something like we'll do apple.com  and open link in a new tab it's fine and we're   going to add the link and there you go so now  we have our text field and our link field filled   out and we're going to go ahead and press update  okay so let's go ahead and go and preview our post   and instead of using this preview option  i'd just like to open the post in a new page   new tab and you'll see our fields don't show up  so in our previous videos on getting started with   advanced custom fields you usually have to go into  your code editor and do some php to get your your   advanced custom fields to show up on the parts of  the website that you want but today we're going to   i want to show you how to use it with the divi  builder let's go back to our website this guy   is done let's go to divi and theme builder and  we're going to create a new template to show up   on every post now you could create a new template  for all kinds of different pages and post types   and custom posts types that you might have created  and get your field groups to show up on these   different parts of your website okay so for now  we're just going to go ahead and have this show up   on all posts so we're going to create a template  and now this is going to be our template for our   blog post what we want is a custom body and we're  going to build a custom body let's go ahead and   do this from scratch and we're just going to  use a full row now the first thing you want on   your blog post is obviously the content so we're  just going to do post content now this is going   to just spit out all your post content and right  after the content we're going to go ahead and do   a new section and then first thing we're going to  need is a text box okay well what we're going to   do is a title so we'll put authors notes like we  did in our previous example and we'll make this   something like an h4 so we got our author's  notes let's go ahead and just duplicate this   open it up now this is where the magic happens so  let's just go ahead and delete this so in order to   pull in advanced custom fields you could come over  here to this little data box and use the dynamic   content and in the dynamic content you could you  could see you could pull in all kinds of different   data and down here as well your custom fields  that you've created with advanced custom fields   and what you want to look for is acf authors notes  down here this is the field group that we created   and it's going to pull those fields for us now  advanced custom fields gets quite um complicated   as you start creating more fields and field groups  and more custom fields you could select different   data from here and we'll go into that later for  now for our notes all we need to do is pull in the   notes okay and then you're gonna have an option  to put something before or after the notes okay   so let's just go ahead and save this save this and  save okay we've saved everything so now you need   to go and close it and save changes because you've  created a new template okay so now this template   is ready to show up on every post let's come back  to our post and refresh it boom and there you go   authors notes and do you agree so let's just go  ahead and put this in a little box so let's come   back to our template editor here come down here  and then this so we need to put this in a section   a new row okay so i've dropped this all into a  new section we're going to delete this guy here   and what we'll do just like our previous examples  just give this a quick border so let's go into our   row settings let's give everything a little  border here real quick so it just stands out   no big deal we're not going to do nothing fancy  and then we'll also go ahead and give this a   little space in here a little patty i'm gonna  do something like 20. okay so we're gonna save   that okay so now we have our authors box with  our author's notes our title and the notes here   so let's also now add our product link so let's  go ahead and just duplicate this text box here   come in here and edit it we're just going to  go and trash this guy so let's go back into our   dynamic content come down here and grab the links  field that we created actually what we created   was the resource link remember because we had the  one link this is for the repeater that we created   called links so for now we're gonna use the  resource link we're gonna click this and save it   you'll see it puts in the resource link now it's  not going to show you what it is because this is   just the template builder for whatever content  is showing up on the front end okay this is just   a placeholder whatever showing up and from the  input fields on the post editor okay so let's go   ahead and save that come to our post and refresh  it and you'll see we have our authors box now   and and our content now this obviously is not a  clickable link and you know this might be a very   long link and we do not want our users to have to  go in there and copy and paste it into the into   the browser so let's go ahead and make this into  a clickable link okay so now that we're in this   field let's go back let's go back and select  this and what we want to do what we could do   is now create a link for this and in this  link for the module which is just the text box   okay we can make a module link url and we could  use the data from that resource link so let's   come in here once again go down here and select  link resource link oh one more thing i wanted   to do was make it into an obvious link okay so we  could come into here into our design and our text   make it into a link looking color you could even  give it a underline if you want we'll save that   save everything let's go and refresh and you'll  see now we have our authors notes here and we   have a clickable link for our users awesome and  so now you could go through and obviously style   this box in any fashion and style the notes and  and the links in any way that you want for now   we're going to go ahead and close this template  everything's saved i always like to click save   just one extra time and so what we want to see  real quick that this work is going to work now   on all new posts that we create so let's go and  create a new post okay and we'll say something   like this use this works now i use the default  editor when i'm creating blog post because divi   spits out in the back end all kinds of extra code  that if you were to ever move your divi website   to a different template you have a lot of code  cleanup to do so while i create my pages and and   maybe some custom post with the divi builder on my  regular blog post i use the back end of wordpress   so that i never have an issue with something  like that okay so that's why i don't use the   divi builder on what i'm creating post so you know  there's our post let's just create some content   all right so now we have once again  our fields for our final words   and we'll see acf is awesome we're going to add  a link to advancedcustomfields.com we're going   to open in a new tab and we're going to add the  link okay cool and we're going to go ahead and   publish this let's just go ahead and view post we  could also go in here and make this field color   dim a little bit so when we hover it dims and  there's an interaction with our customers with   our users so join me in our next vid my next video  when i use advanced custom fields the repeater   field the repeater field is going to allow you  to repeat a field for instance in here i can only   select and create one link but what if i had three  more resources to use maybe i want to do that so   join me in the next video for with advanced custom  fields and the repeater field and there you go   we just scratched the surface of using advanced  custom fields and divi if you got yourself this   far i appreciate you watching like the video if  you found it helpful and i'll catch you next time

Channel: Kris Jolls

Views: 187

Keywords: web design, graphic design, wp, wordpress, ACF, Advanced Custom Fields, Divi, Divi Builder, Custom Fields, ACF text field, ACF link field, ACF text field divi, ACF link field Divi, wordpress tutorial, advanced custom fields text field, advanced custom fields link field, advanced custom fields link field didvi, advanced custom field text field divi

Id: pBtFywcgF4o

Length: 15min 23sec (923 seconds)

Published: Fri Nov 05 2021