Custom Fields - WordPress Theme Development From Scratch (Ep 10)

hey everyone and welcome back to my wordpress theme development series in this video we're going to learn about custom fields if you watched the earlier video that I did which was related to custom post types you would have learned how to create your own custom post type so as you can see here we have our custom post type called cars and then inside there we have a taxonomy called brands so cars are pretty much like a page or a post and brands is pretty much like a category or a tag so if we go into cars we have our Toyota Corolla there that we added in as well and you'll notice that we had we had typed in the content here which would be the description of the specific car but then we we also might want to put some extra data about the car into the page so you could very well just go into the text editor and type in unit price and all that sort of stuff color but that really isn't the way to the best and optimal way to do that especially when you're going to be listing a lot of cars you're going to want to put them in their own fields so for example you might want to put a field which is for color and you type in the color inside that field and then maybe a field for registration number and you put the registration in there and then there's more it's more of a I guess a structured way to add a car into your database now unfortunately WordPress being an amazing CMS does lack in a certain in certain aspects and one of those aspects that I've found over the many years that I've been using WordPress is that there has been really no development in custom fields and making it easier to use custom fields in WordPress if you go into your into your editor and go to the top screen options you should see brands featured image and custom fields there now if you can't see custom fields you're going to want to go into your functions.php and make sure that you add STEM fields into there so you may see it like this right now under your post type you might want to then put custom fields and then when you refresh and go to screen options in a specific car page you'll see custom fields there and just click custom fields on now this is the inbuilt functionality for custom fields in WordPress which is very very basic but if you go further down the screen you should see custom fields here and then you can add your own custom fields like for example we could do color and we could type in blue and then we could do once we add it we can do another one registration and we'll just do like ABC one two three and we'll add the custom field as well so now we have two custom fields which are associated with this specific car and if we click on update if we go into the actual car page you can't see the custom fields yet because you need to call them within your template to do that if you go into your code editor and you go to the single - cars dot PHP page because this is the page that we're using for a singular car you'll notice we created these two columns before so we're going to be using a function that WordPress has created called get post meta or get post meta is is a function which we'll call the database and grab that that piece of data from the database so let's create a an unordered list and within there we want to add the first one which is color okay and then we'll open up our PHP tags PHP echo get post underscore post underscore meta and then close it off and within this function we want to do three arguments the first argument we post ID so this will grab the ID of the post that we're in right now from the global post variable the second argument will be the name of the custom field so if we go back here oops the name of the custom field is color we'll copy that and then the third oops the third one is whether it is a string or an array so we're just going to put true which is that it is a string you can't really put arrays through this user interface so it's always mostly going to be true in this case we'll also copy that and actually copy this and paste that and we'll just do registration and change this to registration as well we'll then refresh our front-end Inigo we have color blue and registration ABC one two three now you might want to make it so that if there is no registration that exists then it's not going to work so what he can do is if an if statement and then it will just be if get post meta and it'll be exactly the same thing so let me just go back there for a second it can get quite painful typing this in every single time so we'll just do if and then PHP and if and then we'll go back and we'll refresh and it should still be there but if we actually go and remove the value from there and update it as you can see it's blank now refresh it registration won't come up okay so that's that's in a nutshell that's WordPress is functionality with custom fields as you can see it's very very basic and it doesn't really give you the flexibility that you need especially if you're building a website for a customer and you want them to have some sort of really easy-to-use interface you'll also notice that if we go and say add a new car let's call a Toyota Landcruiser assign it to the Toyota brand and publish it you'll notice the custom fields aren't actually there you need to select them and then you need to then type in their values so color again and registration lists - ABC 3 4 5 and then we'll add that and then update the page go and look at it you'll see that it yeah it still works but it does not really give you the best kind of user interface and it's really really basic now in my whole career of developing WordPress websites I am a minimalist when it comes to plugins I don't like a WordPress website to have too many plugins because if you develop the website you so we should be able to build a lot of the functionality that you need within the theme or create your own plugin however there are a few exceptions that I make and one is for a plug-in called advanced custom fields and it's completely transformed the way and the ease that the ease of use when it comes to building a wordpress theme and something quite complex like a catalog or something like that and I'm going to show you why so let's let's forget about the way I've just showed you this way is definitely a no-no or if you want to use it you can but I wouldn't recommend it if you're building a scalable site so let's go to plugins and let's go and install the plug-in and it's going to be called advanced custom fields now there are two versions of advanced custom fields you have the free version which you can download and use for free but it does lack a couple of features there is also the pro version which gives you all the features that you need and it costs 100 Australian dollars one-time fee so you have unlimited updates and you don't have to pay any more than that so I would recommend if you're going to be building websites for customers that you get the pro version because it gives you quite a bit more functionality than you might need and I'll show you the differences so let's install advanced custom fields first and once you install it just make sure that you activate it and then you should see at the bottom of your sidebar custom fields go into custom fields and we're going to create a field group and just think of a field group as like a group of fields that you can then assign to a specific post or a post type or anything you want so let's just go add new and we're going to call it car details okay and the card details group is going to have a couple of fields in it add of our first field we'll just click on add and we'll call it color so we'll just do color and you'll notice that the field label is color with a capital C and the field name is color with a lowercase C and that is automatically generated when you create the label this is the ID of the actual field so this is what you'll be using to refer in your template to grab the data out of it you can also choose the type of field you want so we're just going to choose text which is just a text field and you can see that there are a lot of different options here which we're not going to fill out here but it's very self-explanatory we'll then add another field called registration and that's another text field and then we'll publish it now once we've published it we can also assign it to a specific type of post or a page or whatever you want so let's change that to car post type is equal to car will then update that and go into our cars section and go to our Toyota Corolla one thing you'll notice straight off the bat is that the old custom fields functionality that we were using before has been completely been removed because advanced custom field kind of takes over that functionality if you view the page you'll notice that they are still there though because the data is still saved in the database we've just lost the the vision of that data in the back end so if you deactivate advanced custom fields and then you go back into your cars and - Toyota Corolla you should see the data still there let's just delete that and then we'll update that and we'll go and add vector Veit advanced custom fields again go back into cars and go back into the Toyota Corolla now what we can do is you can firstly see that it's much nicer looking and this will actually stay whenever you go into any type of car so you don't have to re add the custom fields like we did before first thing I'll just type in blue and then I'll do abc123 there and then I'll also go into the other car which is the landcruiser and do the same thing we'll just do red and we'll do ABC 3 4 5 and I'll put some content inside this page as well and I'll just quickly go and get a picture of a Land Cruiser just so that it doesn't look as bare okay so now we have a Land Cruiser and we have our Corolla so if we get a Land Cruiser you'll see that it looks like that it has a custom field that is referring to the custom field data for the Land Cruiser and we also have the custom field data displaying for the Toyota Corolla actually it's refreshed that okay so you'll notice one thing we've had a bit of a problem here now the data is not really displaying properly so let's edit this page and see what's going on so let's update that refresh it okay what's going on here let's have a look are we in the right one yeah we're in the Toyota Corolla so the data is just not coming up at all let's go into our template and you'll see why it's because this get post meta function does not work with advanced custom fields advanced custom fields has its own functions to pull data from the database so what you want to do is you want to do PHP echo actually you don't even have to do echo there is a function that it goes for you in advance custom fields and that is PHP underscore field and the ID as you remember it was the lowercase color and we'll go and refresh that now there we go blue comes up same thing with the I'll just remove these if statements here same thing with registration registration save that refresh there we go so that's coming up and that's directly reflecting these custom fields so if I'd type four there and hit update and we look at the page now four is there as well now if we go back to the landcruiser you should see that it's blank because we don't have anything in there so we'll just do green also black and then we'll do ABC one two three four five six update that view the page and now we're having a bit of a problem we've got this data is is let's go back to where are we okay we're in the wrong page go back to landcruiser again edit the page and you see that it's kind of we're typing in black and we're typing in whatever it is an update and it's just going back to to blank so why would that be let's just just to troubleshoot that we can deactivate advanced custom fields go back into the Land Cruiser and see if we have the data set in the old in the old way that I showed you and it is so let's delete that and let's update that and then go back to plugins and activate it again go back to cars go back to the Land Cruiser and now let's see if it works with it there you go now it's working so what was happening there is that the metadata in the database was using the same name as the color and registration and therefore advanced custom fields and the built in native custom fields were clashing so if you view that now you'll see that the colors sorry the color is black and the registration is what we typed so each each particular product or each particular car in our catalog has different custom fields associated with it and they display based on what we type in those specific pages so these are really basic we've just got the color and registration but what if we want to add in something like a repeater field a repeater field is something that for example features and you want to add in all the features for that specific car but the Toyota Corolla might have different features to the Toyota Landcruiser and therefore there's no real set features that you can say each car has and just tick it off it might be better to add in the features manually so if we go to custom fields again go to car details go add field and let's type in the features and then if we look for the field type we want to use something called a repeater now this is where having advanced custom fields Pro is better than having advanced custom fields free so what I'm going to do now is I'm going to go to plugins and I'm going to install advanced custom fields Pro so you can see how the repeater field works and you'll definitely notice that it is worth the hundred dollars to pay and by the pro plugin okay so I've just installed advanced custom fields Pro and I'm going to activate it now and what you can do then once you install Pro you can just delete the free one because they work in the same way that Pro just has a bit more features so if you go back into custom fields now and go to car details and let's go add field and we'll type in features and we'll go down the list and find the repeater field okay now the repeater field will allow us to choose as many features as we want and add them in kind of like an array so let's just make the button label as add feature and we'll update that now let's go back into a car oops go back to edit sorry and you can see features here now now it doesn't actually have anything there so I'm just wondering what is going on there I think it might be because there is an update so I'm just going to quickly update the plug-in because I think it might be clashing with an older version of or the newer version of the advanced custom fields free plugin okay so I've just activated my license and I'm now going to update the plug-in so that it has all the latest changes and hopefully it will fix why the repeater field wasn't showing up okay so it's now updated if we go to custom fields go to card details again and go into our sorry if we go to cars my apologies go to Toyota Corolla we should see the features thing it's still not working so let's this is definitely not a good thing to happen especially when I'm showing you tutorial to you so we'll just update this again and hopefully that will fix the problem okay so it doesn't seem to be fixing the problem when I add the repeater in there so if you give me a second I'm just gonna see why that's happened okay stupidly enough I forgot to do a couple of things with the repeater so that is a very amateur error on my behalf firstly if you go into custom fields and then you go to car details and you go into the repeater function the repeater function requires you to add in some some settings okay so basically fields within the repeater so firstly we're going to do we'll just add a field called feature okay and we'll also create another another field called Jesus I'm trying to think yes or no for example and we can make that a select checkbox okay actually we'll make it a true or false and then we'll update that will go to our cars and we'll go into our Toyota Corolla and you'll see now we have a repeater field and it add feature has the add feature button so we could do you know leather seats and you could do yes or no right you could but that's a it's kind of like a silly silly thing to do so I'm just gonna change that we'll go here and just be careful when you change custom fields if you already have data because you can potentially lose that data so I'm just going to remove that yes or no completely update will refresh again we have features so we can do say leather seats airbag Bluetooth etc okay so we've got three features there we can update that and now we need to call those features in the template so let's go and back into our template and we will then create a new unordered list but on top of that we'll do a ch3 and we'll just call it features okay underneath there let's do another unordered list and we'll do a list item as well and now we need to call need to basically do a loop within the advanced custom fields so the first thing we want to do to do a loop would be to check if there are actually rows within the features variable so the first thing we'll do is with on top of the list item PHP if have rows or have underscore rows now this is an advanced custom fields function it's not a WordPress native function if have rows and then we'll just do the name of our the ID of our variable field so let's just go it's called features as you can see here if have those features and after the list item will do we'll just close it off so we'll do PHP PHP and if okay within there we then want to do a while so we'll do PHP while have rows features and then we also want to do V underscore row after that at the end we do PHP and while okay so this is the loop firstly it's checking if there are features and then it's going to loop through the features and then we're going to be able to grab each feature here so essentially what you could do is underneath the while statement like that you could do you could set some variables you could go feature equals get sub field and then whatever the ID of the actual sub field is so let's go here the sub field is called feature so it's a subfield within the repeater and then you can just do PHP echo feature so let's go and refresh and see if this actually works there you go so we can then do the same thing on the Landcruiser it's going to the landcruiser go to add some features we'll just do airbag as well will do bluetooth and mag wheels or alloy wheels and we'll update that and we'll view the page there you go so now we can basically add multiple things with within one within one variable now obviously advanced custom fields has many many more functions to it and I can't really show you absolutely everything but you should really go through and see what functions there are and if you want to know how to include the data within your template as you can see here we have the ACF repeater and then it gives you examples of how to actually use it and it actually has all the documentation on every single type of thing that you can include the one last thing I'm going to show you with advanced custom fields is the gallery and this is something that you might want to do if you want to include on your page go back into your custom fields go to field groups and click on your car details one and you could add a new field called gallery okay but let's just say you're gonna use gallery in more than one pages you're not just going to use the gallery on your car product page you're gonna use it maybe on different pages of your website you might want to do it a different way if you remove this and let's go back into our field groups create a new field group called gallery and then we'll add a field to there called gallery and we'll make the field type a gallery field you can then choose a couple of features here there's heaps of features and options I'm just going to make it the show that actually image array is fine this is basically the format of which when you go through the loop how it returns the data of the image we'll make that an array and we'll do publish will then make it a sign to a car but basically if you wanted to do it on another page you could assign it also to a page and it comes up on all your pages or you could make it do all your posts as well so that is pretty powerful how you can assign it to different locations but I'm just going to make it come up to the car post type firstly we'll go back into cars will go to Toyota Corolla and you'll see now we have a gallery section by the way with features you can drag and drop their their order so they display differently which is really really handy as well with gallery just go into your gallery add in all the images you want and you'll see that it's a really really easy interface just click on update and the gallery will show up like that however when we go into the actual the actual car the gallery is not going to show anything or there's no gallery to be seen because we need to actually put the gallery within our template to show it so I'm going to go onto the ACF website and I'm just going to google or so I'm going to Google ACF gallery and go to the gallery pay the ACF website it's actually going to show me examples so it's really really easy I'm going to do that for you now so let's go underneath our code let's go and create a another section here and we will do PHP gallery equals get filled gallery okay so we're going to be putting the gallery data within a variable called gallery and now that we have it within there we want to then do if actually we're going to do yeah yeah will do like this if images so it's basically going to check if there are sorry if gallery my bad if gallery it's just going to basically check if there is anything within the gallery and then we'll just do PHP and it and within here we then want to do a loop so it's going to loop through every single image within the gallery so it's a for each so we'll do PHP for each gallery as image and then within there we want to obviously put every image that is is inside our gallery so let's just do PHP I will do image source sorry PHP echo image and we'll save that now it's not going to work as expected and I'll tell you why if we refresh that you should see that we actually would firstly have I haven't done something right there's an ENDIF so it's n for each knot and if we refresh it you'll see the images there are three images there and there are three images here but they don't actually show up the reason is because remember when we went back in custom fields and we chose that the gallery was to show an image array if we make a show image URL instead and update it it should very well show those images as you can see there they're a bit large so we could just do class equals image fluid which is a bootstrap class to make it fit within the container it's in but yeah we it's not ideal we want it to we wanted to maybe show an image in a different size we don't want to show the full image because it'll take forever to load so that's why we make it an image array because the image array also has all the data to all the different image sizes that are available for that specific image so update that and again if we go back and refresh it's not working so remember when we created some image functions or image sizes within our functions dot PHP if we go here and you'll see we have two different image sizes blog large and blog small we're going to use blog small as an image size okay and we will make it so when we echo out the image we also go sizes and then blog small so that is basically going to show that image within the gallery using the blog small sizing we're refresh it and you should see now that the images are the size of the images that we created the image sizes we created earlier you can also do blog large because we have a blog large there okay so you have a lot of a lot of functions that you can do and then also you can obviously link the images if you want to larger version so let's just say you wanted blog small to be the thumbnail but then you also wanted to link it to blog large if you refresh it now you could click on that and then it will link it to blah blah sorry blog large here we go large refresh it there you go okay so yeah that's still probably not ideal because you don't want it to just load the image you want it to maybe load in some sort of lightbox so what I'm gonna do is I'm going to create a lightbox to work with the gallery so to create a gallery lightbox I would recommend using a script called Magnifico pup it's a jQuery plugin so if we just go and Google Magnifico pop-up you can go to the website and you can download the scripts and we'll include that into our project so let's go to documentation here actually we'll go to probe the project on github first and we will download the zip file of the project and we firstly want to then go into there go to dist which is the distribution folder and then go into our project which is in ours app are not in ours AMPAS it's in our Lara GaN folder got to go to our where are we where is it in our test folder wp-content themes my theme and then we want to obviously get the J's file so we'll get Magnifico pup Minjae s drag that into the jeaious and we'll also get the magnetic pop-up CSS and put that in our CSS folder cool then let's go and functions of PHP and we need to in cue the jeaious and the CSS so let's go and firstly get the CSS put that underneath bootstrap because we want our star sheets always override the any other style sheet we'll change this to Magnifico and we'll do magnifico I think the name is Magnifico - pop-up magnifico - pop-up dot CSS okay so magnificus pop-up dot CSS and you'll notice it's in the CSS folder okay we'll also grab the jQuery far or the J's file which will be magnifico let's go to JSC and sorry it's jQuery Magnifico pop-up dot min so let's just copy that I've just copied that whole name and I've put it there okay good and we'll also change this to Magnifico you'll see that jQuery is dependency so it should automatically know what to do and where to place it so let's refresh our project and go into our source and we should see magnifico op up which works and if we scroll to the bottom we should see jQuery magnifica top up and that doesn't work so that's a good way to test it that's not working properly so let's see why so we forgot to add dot j s actually we've made a Dom means so I'll make it so jeaious go back refresh try it again there we go - working great so now that we have magnifico op up in our project we need to initialize it so on that website you have a section here called gallery if you click on gallery there's a few functions we can use to make a gallery work so first of all let's go and we're going to load our own custom J's file because instead of going to say our footer and putting all the J s in there to initialize the plug-in we'll just create a new jeaious file we'll call it custom jeaious and inside there will put all the features that we want for for our plugins to initialize so once we've created custom digest let's go to our functions PHP and let's include that here make it at the end we'll call it custom and we will also call it je s custom je s ok so now if I go to custom jeaious and I just put alert hi and refresh the page it should come up great so that means that the je s is working now ok so what we can do now is go back to Magnifico pup and grab this this is an example of a gallery ok paste that inside of there and we will then call it will just call it gallery there ok and then we go into our single cars and we then want to make the gallery work within there so on here it says that you can have multiple galleries which means that you wrap it within a class called gallery or whatever the name of the class is or you could have a single gallery so what I will probably do is actually we're going to copy this let's remove what you copied before and you put into your custom ljs and copy that instead ok so now that we've copied out what's going to happen is that we're gonna have a wrapper called gallery so let's go to single cars and we'll put a wrapper around our gallery so let's just do div gallery and close it off and let's just see what happens now when we try and look at an image so refresh it ok it's still not doing exactly what we want to so let's see why that is you'll notice that if we look at our inspector and we get a console it says dollar sign is not a function and that's that means that jQuery is not a function or the dollar sign and jQuery is not a function so let's go back to our custom KS and let's just put the dollar sign in here and let's just see if that actually fixes it so it's a refresh it again and it still hasn't fixed it so what we can do now is let's just take that out replace the dollar signs with J lowercase and then query with a capital Q and then we will save it again and let's refresh and see if we get another error there's no more error there so if we click on an image now you should see that it loads up the images inside of a lightbox and you can just go left to right to go between them cool okay so yet they're not coming up in any kind of beautiful order you can obviously make them look better so let's go back to single cars grab this go to the top here and underneath our post thumbnail we can paste it there you can refresh it you should see the images of there now you can obviously maybe put margin bottom so that it separates the content and then you can obviously you can do whatever you want I'm not going to style it o go over the top with styling because it will defeat the purpose of this series so there we go we have our images we can click through them and then you have this picture here which is quite large so it might not be worth actually having that as a clickable image but if you did want to you could easily just wrap the thumbnail within another class called gallery and you could save that and then when you when you obviously got a link to it as well so you could do it do an anchor tag hit refresh and there you go so we have an image for that as well but that's a separate gallery to these ones okay so that is the end of this tutorial for custom fields I would highly recommend that you try out advanced custom fields and you buy the plugin because it is very very useful and you could use it on all the projects that you create in the next video I'm going to be showing you the best way to integrate a form into your project so for example here if you wanted to put a an inquiry form that relates to this specific car we're going to be using a another plug-in which I would highly recommend and as I said I've only got four or five different plugins that I would recommend and I live by with WordPress I look forward to seeing you in the next video thank you very much

Channel: Mr Digital

Views: 24,879

Keywords: wordpress, wordpress tutorial, wordpress theme tutorial, how to make a wordpress theme, wordpress theme development, advanced custom fields, advanced custom fields wordpress, wordpress advanced custom fields, advanced custom fields tutorial, advanced custom fields pro tutorial, wordpress custom fields, how to use custom fields in wordpress

Id: hVOh-weH5LU

Length: 39min 13sec (2353 seconds)

Published: Thu Oct 17 2019