Custom Post Types - WordPress Theme Development From Scratch (Ep 9)

hi everyone and welcome back to my WordPress theme development series in this video we are going to talk about custom post types we're also going to learn how to implement them now what is a custom post type well let's put it in a real-world situation you're creating a wordpress website for yourself or a customer and they are a car dealership and they want to put up their cars on their website so people can buy them it's not an online shop it's more like a catalog of their cars maybe a bit of information about each car a picture a gallery a contact form for that car all that sort of stuff technically you could achieve that by using pages or even the posts but it would just be messy and if you're going to hand over this website to your customer or even yourself just managing a website it's better to use a custom post type now a custom post type is pretty much like pages or posts but on the left hand side you will see your own post type here so you might see something like cars here on the left hand side and then you can add a car very much like you would add a page or a post and you can just manage it through that menu so let's go and create our first custom post type for cars we're going to assume we're a car dealership here go into functions dot PHP in your project and let's type out a function function will be called my underscore first underscore post underscore type you can call it whatever you'd like but if you want to just follow with me it would be good then we can do add action underneath that function and we'll make it so that the action that the function runs when WordPress runs the init hook which is pretty much when WordPress fires this hook and this hook pretty much loads just before the actual website loads so just before the headers loaded on the website and then we obviously want the action the network to run our function and that's it okay so we've created the actual hook so now within our function we firstly want to use a function that WordPress is created or provided us with which is called register underscore post underscore type and inside that we want to call it what our post type is going to be called so we're going to call it cars for example and we're gonna we are going to then inject our options into there so we're going to create it our variable we're going to just call it argue Arg Arg s and then on top about our function we're going to create the variable a rjs and we're going to make it an array now within this array we're going to put all the options we want for this specific post type okay so there are heaps of options and you can google them if you do a search for this specific function in WordPress you'll see all the options and it will give you more in-depth information as to how each option works but I'm going to put the important ones here okay the first one we're going to do is public which means that it's going to be public X publicly accessible by the user on the front end and the back end and we're gonna make that true then we're going to do has archive and that will mean that it will just pretty much have an archive like a blog post does it has an archive if you click into it and then it takes you to the single post then we're going to have make it support specific things so let's just say we want it to support that V title so we want people to be able to edit the title we want them to be able to have access to the editor and we also want them to have access to the post thumbnail so thumbnail so that this allows you to restrict certain parts of the page that they can edit and you can remove that if you want to and it will just be like a basic post or a basic page and then what we can do is we can also choose if we want to change the way that the slug comes up so the slug is say for example you go to test to test for such cars instead of it being cars you can do you know my cars or something like that you can change that if you want to so you can always do this rewrite and inside there it accepts an array again and we'll do slug and you can make it my - cars so you need to make sure that you put a - it won't work if you put just a space or something like that so it definitely needs to be a - but we're just going to make it cars as well in fact you don't need to use this at all because it's automatically going to use this okay and now that we've created a we registered a post type called cars and we've injected this argument into there if we save it and we go to our dashboard we should now see on the left hand side cars but we don't all we see is posts twice so what we want to do is we want to go and we want to add a label okay so we'll do labels and we'll put an array in there and inside the array we can do the name so that's usually the plural so we'll make it cars and then we'll do the singular name and that will be car you'll see why this is later because it uses this singular name when you click on the button to add a car for example so let's go and refresh now and you should see now cars on the left-hand side and it behaves very similar to how posts do so you can see posts if you click into posts it kind of looks the same so that brings me to another thing called hierarchical it's a it's an option called hierarchical hie hie AR AR CH IC al now you can either make it true or false now if I remove these labels and I make hierarchical true if we go and refresh you'll see that it acts more like a page as opposed to a post if you make it false acts more like a post so I guess pages you know the difference between pages and posts pages are more for static pages that aren't really archive and posts are useful things that are kind of archived and that you know we'll just keep on growing and growing but in this instance it might not really matter because you already have an archive even if it is hierarchical or not so I'm gonna make a hierarchical because I prefer pages but you can do it otherwise if you like put the labels back there and we'll refresh that cool we have cars now one little thing you might want to do is change the icon so to change it change the icon you just need to do menu underscore icon and then we need to just put a class of an icon that we want to use so let's just go to Google and do a search for WordPress - icons you'll see - icons come up here and you can select whichever one you want now I don't think they're pretty limited so I don't think we're gonna be able to find a car if we do a search yeah it's not gonna come up but I guess we could just use anything we want let's just say choose a an image logo when you choose the image or the menu icon you can just choose the class here copy that go into functions and paste it into there and save it now it should when we refresh our dashboard show that image instead cool so we've got our cars custom post type and now let's just say we want to categorize them into like many different types of cars like different brands like Ford you know Toyota Nissan whatever so what you can do is you can create a taxonomy and the taxonomy is very similar to like a category and you can assign it to the post type okay so let's go to our functions about PHP and let's create my underscore first underscore taxonomy and after the function let's add the hook or the action sorry - the init hook and we'll assign it to this function name again now within the function we want to create the labels so let's just copy the labels over from here paste it into there actually no we need to my bad we need to actually do the Arg s again and we'll do the array and within there we do labels and it will be another array so I'm just gonna make this readable there we go so we'll call that brands and the singular name will be brand obviously okay so we have the labels would also make it public and we'll do that true and we'll make it hierarchical now in with taxonomies it is a bit slightly different if if you do a taxonomy that is hierarchical it will act more like a category if you don't if you make it false they'll act more like a tag so let's remove the labels again and we'll do a hierarchical as false all right and let's just finish this off first we'll do I'll put the labels back there we'll just finish this off we'll do register taxonomy and we'll call the taxonomy whatever we want but we'll just call the brands and then we need to say what we want the taxonomy to attach itself to so which post types we only want it to attach to the cars post type we've created so we use this ID and as the argument the next argument for register taxonomy will be an array and within there we can do cars you can obviously do other post types as well if you wanted to you know other post type whatever but we're just going to do cars within it okay and then we'll do a our GS so we're gonna inject the arguments that we created above here okay now I'm gonna remove the labels and I'm gonna save it and if we refresh you should see now cars has tags okay so I'm sure you're familiar with how tags work you can assign multiple tags some multiple posts but it doesn't really give them a hierarchy doesn't categorize them it just kind of give them a tag obviously however if we make it higher cool it will be more like a category okay and then we just put the labels back so then it makes him called brands okay so now we have created our cars post type and we've created a brand category so let's go into our cars and we'll create our first one we'll just call that a Toyota Corolla okay then we'll add a brand and we'll call that Toyota and then we'll publish it so if we click on the link to go into that particular post it's blank and that's because we need to go into our tools are no so settings permalinks and just hit Save Changes here and that's going to refresh our permalink structure so let's go back to it now and you'll see that it comes up now this is using our single dot PHP default template we wanted to use its own template because we want to design that page different to other pages so we can go and create a new file and we'll just call it a single dash and we want to then use the name of the post type so the net so the name of the post type if we go back it's called cars so you need to use this ID here okay so we'll do a single dash cars dot PHP and based off the WordPress hierarchy it's going to know that this is the template for the cars post type let's go refresh and as you can see it's come up linked so if I type in test and then refresh it again beautiful it's working again if it does not work you want to make sure that you're using the right ID for the post type and also you want to go to settings and then permalinks and then Save Changes again if that if it doesn't work okay but as you can see it is working so we have the Toyota Corolla when we go into work which using the tip our own new template we've created let's just copy the single dot PHP and we'll paste it into single dash cars dot PHP and we will refresh it and now you should see that it's coming up now I fixed this earlier if we go to our blog content section here you may very well get an error with tags so originally before I fixed it and I should have fixed it on the video here when we refresh it you should see warning invalid argument it's like an error that comes up it's because we're asking for it to share the tags when no tags exists so we can just do if tags and then end if and it will only check if there are tags okay so that's done we've created our first custom post type and we've made it work so let's add some information into here so let's go to the lorem ipsum site and let's generate some content and let's copy and paste it okay so we're going to go and paste it into our Toyota Corolla page okay and as you can see featured images there if we went back to functions.php and let's just say we removed thumbnail from there and refresher thumb now is no longer there so you can kind of control what you what people can see you could remove the editor so you can actually just remove this whole thing here and people then can't do anything with it but that gives you the full control if you remove it completely or default to normal how a normal page looks okay so now that we've done that we've got the text in there if we go and refresh it will come up like normal and then let's go and find a photo of the Toyota Corolla just to make it look realistic all right if I can maybe get this photo yeah save it's gonna make it very difficult very to save these websites always do this to me all right here we're going to save that and we will then go back in here and add it as a featured image I've got a picture of the Mona Lisa in there because I was trying to deal with art and then I stuffed the video up so I'm starting it again there we go we'll set that as the featured image and we'll update it refresh there's the car there so let's just make it look slightly better we'll grab the we'll put the car at the top and then we'll do a div row we'll put the title maybe above the car and then we'll put the we'll get rid of now we'll keep a hole keep all that there we'll just do a div Col lg6 and inside there we're going to put the content and then we'll leave room for the right-hand side to maybe put some information about the car and stuff like that so we'll refresh it now as you can see we got Toyota Corolla we've got the date there might be good to remove the actual date from there see we're using the blog content section that we created earlier it might be better if we create a new new section so we'll just call it section I don't post top of a custom post or you could call it section cars dot PHP if you want to and let's just copy the blog content over into there and let's just remove some of this stuff so we could take the posted by because we probably don't want that day and the date as well or if you wanted to date you just could probably move it down the page and save that now we'll link up section cars cool okay so now we have our the title the picture and the content and the date at the bottom so now that we have our custom post type single page we want to have an archive as well similar to how we had our blog archive okay so what we can do is we can create a new file called archive - cars top hair day and an axe in the same way it will check if that exists and if it does it will automatically start working so if we take away Toyota Carolla from there you should see that comes to a blank page but if we type in test here it should work okay good so let's grab the the standard archive dot PHP that we created earlier paste that into archive - cars refresh and as you can see now we have our Toyota Corolla come up there and we can click to read more so now that we've mastered custom post types we might want to use things called custom fields custom fields are pretty much or give you the ability to go into a post and fill out different fields on the page based on what you want so for example if with this car we wanted to display the price we might want to display the registration date the color all that sort of stuff and maybe a gallery with multiple photos of the car in there that's where custom fields come into play so I'll be covering that in the next video and I look forward to seeing you there Cheers

Channel: Mr Digital

Views: 35,497

Keywords: wordpress, custom post types, custom taxonomy, post type, taxonomy, wordpress cpt, cpt, wordpress theme development, wordpress theme, wordpress custom post types, wordpress theme development tutorial 2019, wp, custom wordpress, theme, wordpress tutorial, wordpress theme tutorial

Id: q5mWGz4S3Lw

Length: 18min 49sec (1129 seconds)

Published: Sat Sep 28 2019