Create TEXT FIELDS in WordPress with Advanced Custom Fields (ACF)

hello hi 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   i want to introduce you to advanced custom  fields probably one of my favorite plugins   that i use for WordPress development advanced  custom fields allows you to create input fields   in the back end of your editor when you're  creating a post a page a template or a portfolio   or a custom post type like that it allows you to  put special input fields in the backend such as   text fields link fields images date pickers  and so on and so forth and much much more   advanced custom fields really allows you to  customize the back end of your wordpress and   change the experience for yourself as an author  or your client as a blogger today i'm going to   walk you through how to use advanced custom fields  show you what they have to offer and then show you   how to use your first text field it requires a  little tinkering around in the back end and then   you have to get into the code and input the code  the great news is that a lot of modern template   builders such as divi that i use allow you to  go in and use advanced custom fields without   ever touching your code if you're interested in  something like that check out my video otherwise   let's get down and dirty and get started okay so  first things first we need to download the plugin   uh as you'll see here i have advanced custom  fields pro installed everything i'm going to do   in this video you could do on the free version  as well so you could come over here to add new   and just search acf for it and you'll see there's  a bunch of extensions that you can get for this   plugin but what you're going to be looking for  is this greenish looking one advanced custom   fields with two million plus installs you want  to go ahead and install it and activate it to   advancedcustomfields.com if you're watching this  video you're probably new to events custom fields   just kind of want to give you an idea what it  is that it does basically what it does is it   adds custom fields to your post now a post can be  a page a blog post a portfolio post an event post   an image is a post there's all kinds of posts in  wordpress you could also create custom post types   and if you're interested in that i'm going to have  a link to my video when i have that published so   basically a blog is a post okay and let's say on  every single blog you obviously want a title but   let's say you also want to add like a background  color some text and image and different things   what you want is custom fields there are  lots of instances where you need custom post   types if you were making a custom portfolio for  instance you would need to title the portfolio   download some images maybe have a link to  the the website that you created etc etc   so we want to get these into our post while  we're editing them and that's what i have here   so i have here a post it's just a regular  basic blog that has a title and my post so   let's say every single time i want i write a post  i want some custom content in there so the example   that i'm going to be using is i'm a writer and i'm  writing a review for a product and at the end down   here i want something like my final words and a  link to the product so in this video i'm going   to show you how to create that custom field and to  show it when someone is reading the blog as well   so let's get started with adding the custom  content okay so now we're back in the back end   of our wordpress website and we're going to come  over here to custom fields and you will see that   they have here field groups now field groups are  just basically a collection of custom fields for   instance down here you could call this a field  group all these are connected to something called   my fields okay and so what we are going to do  is create a new field group by selecting add new   and we're going to give this group a title and  we're going to call this author's notes and this   is where we would add our fields from down here we  could add fields like text fields and link fields   image fields etc etc what i like to do first is  go through these settings and make sure i set   up my field group so let's just go through these  settings real quick so you could understand how to   set up your field group where we want these field  groups to show up will determine where they're   going to show up on our back end we could have  them show up on a post we could have them show   up when we're creating a new portfolio we could  have them show up when we're creating a new page   so this is going to say that we want this  to show up on a post type that is equal to   post see here you can choose page so you'll see  that you have different options you could post to   a template that is equal to and then choose from  your templates you could choose a a page template   that is equal to whatever page template  you have and they will show up when you   enter the editing section of those pages okay  so we are going to select just a normal post   that is equal to post this will show up on  a regular blog post so down here we want to   be active yes the style is going to be in  a standard wordpress meta box that means   it's going to be wrapped in these little boxes  right here the position is after the content you   could have it up on the sidebar or high after  the title label placement which are basically   like your labels right here we're just going  to leave that top aligned instructions you   can have instructions for this field group and  we're just going to leave it to below labels   order you could change the order in which your  meta box appears so for instance these are in a   specific order one two and three you could change  that order here you could create a description for   your field groups and this is another cool one  that i'll show in another video that you could   say you know on that post i don't want to show  these boxes these wordpress meta boxes and they   won't show when you're editing this particular  type of post so we have our fuel group and we have   our settings all good and we are going to select  our first field so we're going to come over here   select add field and we need to give this field  a label this is the name which will appear on   the edit page so the first thing that we want from  the author on this blog post is their final words   we're going to give it something easy  to call and we're going to call it notes   and we're going to go ahead and capitalize this  now this is just a label so this is just going to   show up like this label right here and it can  be capitalized and however you want it styled   when you come to the field name though however  you have these rules which is a single word   no spaces underscores and dashes are allowed  and i recommend if you just are in this box   and you press tab it will automatically  input it with lowercase letters if you had   something like an extra word let's say you had  final words and you press tab you'll see it   will do it in all lowercase and with an underscore  right here and that's how you want to treat extra   words so again no spaces single words and we're  just going to use notes to keep it nice and simple   okay so this field type is going to be a text  you could choose a text area but let's just say   we don't want this to be very long we don't want  a paragraph we just want maybe a one-liner so we   will use a text box should be fine instructions  so these are instructions that will show up when   the author is creating and adding this data so  we will say something like your final words here   so you can make this required the thing is though  if the author doesn't put something in this input   field then they won't be able to publish this  so you want to be careful where you use this   okay so we're going to keep it not required so  setting a default value is what will appear in   this box when the author goes to that edit that  page like let's say every time you want it to   say no thoughts every time the author comes to  that page this is going to be the default inputs   so this will show up when you are creating a  new post placeholder text is just something   that will show up in the field but it won't  necessarily be posted when you press publish   okay so you could just put something like  that finally you could prepend and append   items or text before and after your input you'll  see that for instance here i have a blank field   i could have it say something before the field  and after the field let's say this field was a   number that you wanted your author to post every  single time so you could say something like   i have bought this item this is where your  author is going to input the number let's say 10   and then after here you can say times okay so  it's kind of like giving extra instructions   to the the author the editor of this post  so let's just go ahead and put something   here so that you could see where they show  up in the post so we'll put this is before   and we'll put this is after you could create a  character limit here as well so if you didn't   want this author to accidentally put in here  paragraphs and paragraphs of text you can limit   that here conditional logic is something that i  will explain in an additional video but basically   if you have more than one fields here you  could create conditional logic where this field   doesn't show up unless another field satisfies  a specific condition so that's our settings for   this field and when you're done with that you  could go ahead and close your field and add more   fields we're just going to keep one for now also  you can see from here you could edit this field   you could duplicate it you could move it and then  you could delete it so if you have multiple fields   here you could come over here and you could drag  and drop the order in which they want you want   them to appear so after we've added our field set  up all our settings we are going to press update   this would say published but i had already  published this earlier in a test that i did   so if we come back over here to custom fields  you'll see that we have our field group authors   notes all right so let's go see where this takes  effect in our website so let's just go over here   to post and you'll see here i have a post  that i already have set up started and what   we want to do is see what it looks like when  we create a new post so let's just go over here   real quick and create add new post and you'll  see i could create a regular post like usual   and down here you will see our new custom fields  you'll see it's called authors notes here's our   label here's our instructions this is what's going  to show before this is what's going to show after   this is what's going to show if you don't  press anything or don't add anything okay   and if that was deleted you'll see it  will say please add your thoughts here   we could close this as well and from here you'll  see we could even go to edit this field group and   this will take us back to the settings that we  had okay so let's go ahead and close this post   and what i want to do is come back into this post  that i have already started and we're going to   select edit and you'll see i have my title and my  dummy text here and you'll see i have my author's   notes down here to make this simple let's go  back and get rid of all these extras this stuff   like the before and after so we're going to come  back into our field group we're going to press   edit we're going to go into our field that this  stuff is in we're going to go ahead and come here   we're going to delete this we're going to delete  this let's just go ahead and delete all this all   this stuff i would usually keep empty anyways okay  except for maybe your your instructions that's not   nothing wrong with that so let's update that come  over here refresh our post you'll see that it's   been updated down here okay so our final words are  going to be something very clever like i love this   product when the author is done with that we  will press update let's go and view our post   and you'll see that our custom field has not shown  up on our front end and that is because we need   to now go into our files and input this into  our file so that they show up on the front end   now if that sounds scary don't worry i'll link  above when it's published a video that i have   that will show you how to use advanced custom  fields within theme builders like divi which i use   and all the other major theme builders use this  to where now you could input something like your   title and your custom fields straight from your  theme builder and you do not have to go into your   theme files at all so that's really cool it's  really powerful check out my video when it's   published to get started with that for now if  you are into wordpress development getting into   your files and getting dirty is just something you  have to do to get this to show up into our regular   blog post we are going to go into our wordpress  files and you'll see i have my files are on my   computer you might have to go through filezilla  or your ftp file transfer so go ahead and get   to your files this is our wordpress website we  could come into content into themes and you'll   see we have our 2020 and we have our child theme  our child theme is what we have active right now   if i were to come in here and change any files in  my 2020 theme and then i go and update that theme   those files will potentially get all erased  and all my custom code in that file will get   erased as well that's why we have child themes  check out my video on childhoods and how to make   one but what we do need is a file in here so let's  go into your 2020 theme or whatever your parent   theme is okay mine is 2020. and i'm going to grab  a singular post and i'm just going to go ahead and   copy i'm going to get out of my parent theme now i  have set up a child theme a child theme basically   just has to have a style sheet and a functions  php file so what we are going to do is add this   singular php file and whenever i edit  this file it will now show up here   on my front end so let's go ahead and open this  up these three files up in our editor and you'll   see i have that here my 2020 child theme with my  functions singular php and my styles so this is a   basic loop for your wordpress blog post and what  we want to do is create all this code inside the   main content so i like to leave myself some room  so before we get started with this let's head on   over to advancedcustomfields.com once again and  we want to go over there to their documentation   and this is a great page to leave open and have  open when you're working with advanced custom   fields to come in here and get all your different  help and input great articles and shows you how to   use your field types and functions and actions  and much much much more so let's just come over   here to our field types and you'll see we have  all our different field types that we can use   and we are currently working with the text box  so let's go ahead and click that and you'll see   here it will go through all the instructions the  options that you have on your settings page that   we just went through and once again it has it down  here and it will show you examples of how to use   these functions within your files to make your  data show up okay now this is just examples   there's many ways to write your code but what you  really want to know is how to use these functions   like the field and get field so real quick since  we're new here let's just go back to documentation   come over here to functions and you'll see that  they have created their own functions that you   could use within your code and the main difference  between these is you'll see that these all say get   field and this one says the field these all say  get rows and get sub fields and this one says have   rows and this one says subfields the subfields  all right so real simply these fields the get   fields are just functions that are going to go  and get the specific field the specific data   in that field all right it's just going to go  collect the information the field is what's going   to display the information okay so same thing  here this is going to get your layout this is   going to get your rows this is going to get your  sub fields this will show the subfield it's pretty   straightforward and we're going to dive in to show  how you use some of these so once again the these   are just collecting the data that's been inputted  by the user and this is gonna show the data let's   go back over here to our text input field scroll  down here and let's just go ahead and grab this   whole code right here with the h2 text we're going  to copy this come into our post editor and we are   just going to paste it right there now this is  saying to show the field that we called notes   now we know h2 is going to be way too big just  keep it simple we're going to press save come back   over here to my post on the front end and refresh  it and come down here and you'll see here is   my input let's just go back to our files and  you'll see in my styles i created a class called   post reference with some styles here that is  because i want to go ahead and wrap this in a div   that i'll create here with code that i have  pasted off screen and we'll clean it up here   and you'll see it basically just it's going  to help visualize this a little bit better   okay so let's just save this come back to our  post and refresh it and you'll see it's placed   in this little box so we basically just used  their function the field and called forward   our notes field this is the most basic way to get  something to show up on your front end and that   and that's all good but let's say this user didn't  make any extra comments okay so let's go back to   our post and we're gonna edit our post here and  let's say this author didn't write anything here   okay so we're gonna update this come back to  our post refresh it and you'll see we have   this empty box and everything that was styled  here for this author to fill out and we don't   want this to show up if this field wasn't filled  out right so let's just go ahead and put some php   before our code here so this is going to say if so  get field this is where we're using the get field   function now to say it's going to look in this  field and see if there is something in the notes   and if it does it's going to run this okay so  let's go ahead and close this php down here   with the end if all right we're going to save this  well first we're going to clean this up first and   we're going to save and when we refresh you'll  see that when this author has not put anything in   there that box will no longer show up and finally  what we want to do is add our notes we always want   to write notes for ourselves about our code we'll  do something like displays authors notes from   posts so we'll just create this as a comment okay  so that way you know that this is what that was   used for so let's just press save let's just try  this one more time to make sure this is working   we refreshed it here and we've got no input edit  post we will put some input we will update it come   back refresh it and there you go there is some  input now in here you could do something like   add title tags and so on and so forth to customize  this so let's just go ahead and do that now let's   just go ahead and create this and make this into a  paragraph okay and then what we also want to do is   have here an h4 and we will call this let's save  it refresh it and we want to put that inside this   div right there save it refresh it and you'll see  here we go we have it right there and that is how   you get started with advanced custom fields in the  next video what we are going to do is add a link   to this box which will give the author  more inputs here so join me for that one   and there you go you've made your first custom  field with advanced custom fields in the following   videos i'm going to show you how to take advantage  of advanced custom fields and their mini field   types along with the pro version that offers up  even more possibilities so don't forget to like   this video if you found it helpful subscribe  for more and i'll catch you in the next one you

Channel: Kris Jolls

Views: 63

Keywords: web design, graphic design, wp, wordpress, ACF, Advanced Custom Fields, plugin, text field, advanced custom field text field, acf tutorial, wordpress tutorial, website, wordpress text field, custom text field, ACF text field

Id: g6xWkH30qF0

Length: 21min 38sec (1298 seconds)

Published: Mon Oct 25 2021