How To Create And Use Custom Post Types In Divi | Complete Guide

hey everybody its nelson miller here with PA creative today I'm excited to show you how to create and use custom post types in Divi and one of the reasons I'm excited is because we have a brand new resource for you that's free on our website it's a custom post type generator so all you got to do is go to the link and we have it if you're on YouTube it's in the description here go over to the blog post and you'll see that basically you type in what you want to make and then click generate and then just paste the code right into your child theme so I'm gonna show you how to do that don't worry it's gonna be easy and then some use cases why you would want to do this alright let's get started alright so first of all what is a custom post type there are post types in WordPress and then we can add additional post types and we call them custom post types so pages and posts like your blog posts they're they're considered post types but you know they're already included by default so when we say custom post type we're thinking of something additional beyond that and a post type is a way to well it's a way to organize content so you can classify it and arrange it and keep it in a nice orderly fashion on your site and it kind of allows you to go beyond the standard so like if you wanted to have well we'll get into examples about different types of content on your site you know and posts just aren't gonna work and pages aren't gonna work you need something beyond that and maybe you even need ways to like filter it and to search it and archive it and all that stuff so custom post types are are great for organizing content like that so we actually just came out with a free generator and you can use this for custom post types and for taxonomy xand we're gonna have another tutorial next week on taxonomy but for this one we're gonna be focusing on custom post types and that's right here you can go over here look at the link it's going to be in the blog post and I'll try to remember to link it in this video as well so it's a some post type generator you can see right off the top here that we have post types and taxonomies so we're going to want to be on post types tab that's where it comes by default and then you can see the different options here and then we'll get down here and we'll click on generate and it'll generate once we fill in the information so I'm gonna go over you know what post types are and then how they integrate in Divi and then I'm gonna explain like all of these settings so we'll go down through each one of these and kind of give you an idea of what they are and so it just kind of helps you understand what you're actually creating so first off I just want to point out that Divi actually comes with a custom post type so I mentioned pages in posts but there's also one called projects so that comes with Divi when you install the theme and projects are like meant to showcase things that you've created and in a portfolio and so in fact the they have portfolio modules there's a Divi filterable portfolio things like that so you can use that to kind of have a main archive of the projects and each project is a custom post type page so that's maybe gives you an idea that you know that goes beyond like I said that goes beyond pages of posts it's something additional and you can use that now another one that you may be kind of familiar with in fact I'm gonna just jump over here to my demo I want to point out well there was the projects right here so you have projects you can have even have taxonomy x' for these which are ways to organize the pages with categories and tags for projects so anyway another one I have WooCommerce installed in this demo so it makes another custom post type called products and again there's products here you can see that and then there's categories tags and attributes so these three or taxonomy x' and again we're going to get into that in the next video but anyway this is an actual custom post type and and we can go beyond that we can make our own and that's what's so cool about it and that's what our generator helps you to do so I guess you may be wondering well how how can I use these in Divi and I'm gonna actually show you how to generate one now and then we're gonna go down through and show you how you can integrate it and it's really cool when it's really easy you can use you know the theme builder even for example just to integrate with Debian it's gonna work flawlessly Divi is really great for custom post types so let's go over to our generator and this kind of just get started here and look at the information now thankfully our generator has this cool feature where you can type in the name that you want and it'll auto populate a whole bunch of fields so that's really cool so think about what you want this to do and and go ahead and like look up examples of custom post types I mean maybe you want to make um you know four books or I think that's the example here books if you want to do that you want to have you wanted to have each page was about a book and then you could like go through and organize them and you could call it books it's a custom post type for books instead of project pages products all that you could type that in here and let's just do that and I'll show you what I mean by this older populating thing so if I type in book right look how it automatically typed in books it typed in the key which is kind of that's just how it's referring to the post type in the code but then down down here further even which we'll get to this but look it even says you know add new book new book search books all these things filled in automatically for us so that's really cool and that's just an advantage of using our generator here let's actually make one for cat you know that's just a fun one to make so we're gonna call it cat that's our custom post type the plural is cats and then the key is gonna be cat okay and that's lowercase so that's good we don't have to edit that or anything so I guess I should point out back here on the blog post and that's linked in the video description this here is the instructions and I tried to explain each one of these settings as good as I could and we're gonna reference this too so like the name is pretty self-explanatory that's just what we're calling it in the plural name it shows up at different places on your site plural and so that's it's really simple but we've got to define it a description that's gonna be the next setting there and you don't really need that I don't know that there's a whole lot of use cases for that but you can add that if you want to I don't know if you want to just write what your post light does or when it's a battle and then there's one more setting in this is here this section that's hierarchical that basically means it can have a parent and child relationship like pages do that you can have you know like for example yourdomain.com slash parent page slash child page right so that's a way of organizing so if you want that at all if you expect that you'll use that then go ahead and keep that set to true okay then the next section is the features and we'll follow along here so basically this is options you can choose and this all depends on what you need so you know there's just a lot here and these are kind of self-explanatory I don't know that I want to go into all the details let me just jump over here to a page and I'll show you kind of how it looks on the page post type so if I go in here to this one alright then that's real quick take a look here so title expert featured image let's find them here title over here featured images right here the excerpt is right here so you see that we're basically saying do we want those features comments all of our custom fields revisions post formats page attributes you see these here page attributes right here on the side you're just saying dude do you want to include them with your custom post type you may or may not that's up to you so just go down here and see how you can kind of turn them on or off alright select which ones you want alright next is taxonomy so something important to understand here we're not actually creating in this right here it is again we're not creating a category and tag of cats we're actually creating categories and tags for our posts so I know that can be really confusing I'm gonna try to explain this quick so you know we in in WordPress when our blog posts we have tags and categories so that's where those are going to show up so if we would create we go over here to posts right here and then categories that's where what we're saying here is do we want to use the categories for our posts for our cats and then if you did you would select these now if you wanted to make your own types of taxonomy x' custom taxonomy right here like breeds that's it's a category of cats if you want to do that well then that's what we're gonna do with our other tab here in the next video okay so what we could do if we know that we're going to do that we could go ahead and type in breed here and then we're gonna basically follow up on that in the other video on creating custom taxonomy x' but for now let's just go ahead and keep moving to the next section is labels so labels like look at this add new add new item new item edit item view item that it's just saying well here let's show you it's like here up here in the top it says view post so it would say view cat okay it's it's changing that word so even like down here add new all pages and then it will say like add new cat okay so it's kind of kind of just is making it specific like here add new write add new cat add new item replacing the word item with cat and it automatically did that based on what we selected here okay so that's really cool you don't have to go through and type all them in now menu icon that's where we have to go to another website so you can click on here and find an icon based on the word press - icons and I want to show you here real quick see this like thumbtack type icon that's used for posts and then pages has this one where it's like you know two pages stacked projects actually uses that same one WooCommerce has like a little woo icon there so this is the icon that we need to assign okay it's one that shows up here in our dashboard so we can go here on the link and find one that we like now I don't think there's going to be one that works really well for cats because there's not gonna be a cat here so I'm just gonna look for something that I think makes sense maybe I'm going to have I don't know different pictures of cats so maybe I could use this one here I don't know so anyway you click on it it puts it up here and then right here you see this it says - icons - images - alt - that's the name of our icon so we need to copy that okay so look here if I click see how it changes - icons - admin - site it kind of changes in fact that's fine well I don't know factor right here is the the default one that was used - icons - admin - pose so we don't want that but anyway I kind of want the one that I already copied this one right here for our images so I'm gonna go back into my generator and just paste that here there you go you see that so I pasted in that code alright and that's what its gonna make that icon show up here's the visibility and this is gonna be basically controlling how our post type appears in the backend like like we said here do we want it to show up in the menu in fact actually they look at this a couple of these settings here and some of these we're getting into some of the technical things and we're gonna be able to skip some of these and that's okay I'll try it my best to go through this quickly but also explain it so this option it's gonna change if this post type is available basically to visitors the public one and just set that to true now show an admin UI and show an admin menu set those to true that's basically we wanted to show up in our menu so it's gonna show up here right in our menu and then this one here show a navigation menus now that one make notice that says navigation menus that would be one more under appearance menus and you'll see here some of these options that show up here like for example product categories right here it'll show up it'll say it'll say cats look here's products here's events that's another post type post pages so it's gonna create one here that says cats right if we have this set to true okay and then there's menu position and that's basically saying where do I want to show up here see how you could put it kind of wherever you want here you can choose below posts you can choose below media below links all these just pick one and there you go that's gonna determine that now the last set here is a bit technical and a bit advanced don't stress out too much I would just keep these set to true or false whichever they're on if you're a developer you're gonna understand this if you're not a developer if you don't really know what these means then you probably don't need them I hope that there's a fair analysis of that that's basically it for that just kind of keep these halle are and you can read up a little bit more about these over on the blog post so now it's time to click that green generate button alright so that's good let's try this out and click on there alright and it brings us up and forgive me I need to style my button here I'll do that but basically all we got to do is click copy all right so it's copied to our clipboard now what are we gonna do with this code we just generated a bunch of PHP code so go over to your website go over here to appearance right and then theme editor now you need to have a child team installed if you don't have a child theme installed i'll link to mine in the blog post we have a free one that you can download it's basically going to come with styles and functions dot php' and that's where we need to go functions.php so we need to go into that and just scroll to the bottom and we have it on our clipboard remember so we can hit paste ctrl V and there you go this code is what we just generated by filling in those answers and you can kind of look at it and kind of see oh yeah look named cat singular name cat remember filling that in and then hierarchical true remember we were kind of setting true or false to a lot of these here's that icon symbol alright so here's the what we included for what it supports you know the thumbnail the editor the title things like that so you could actually if you wanted to later if you wanted to like change your mind you'd be like oh I wanted this one to be false or whatever you could actually go in here and just change the word true or false but just be careful when you're editing PHP so let's click on update file now let's refresh the page okay so there you go cats is now showing up in our menu you can see the icon when I hover over there it's like go look at the cats that we already have and are at a new one now I don't have any made so if I click on here you know it's just none here let's go ahead and add new all right I'm gonna make a cat so let's call this one I don't know Roxie all right so I could write about it so you know this is what I have to say about Roxie all right and then I want there to be an image of this cat so right now I'm just gonna go crapple in here from pixels free cat image so I can add it just to add some relevance might as well add a cat right all right perfect so there I have my image set this is all just kind of I'm just there's no point in really doing this I'm just showing you so I'm gonna publish this and then well you'll see there are some good reasons for this actually I'm gonna make an excerpt here alright so something like that want to want that therefore when I show you how we can integrate this with Divi and that's the next step well now that we've got our cat's custom post type installed what's the next step and that's over here in the blog post I have I have this section here how to use custom post types in Divi and I'll it's a great question but there's lots of good answers so there's a couple things we need to do that's first of all you over here to Divi theme options okay so we're in Divi theme options so click on this tab here builder and then we come here to post type integration you can see that these toggles show that I already have posts pages projects products events all turned on and look here cats see it integrated with Divi already all we got to do is turn that on and then we can use the Divi builder on that page so let's save that so now if I would go back here to my cat if I would click on here you'll see that when I go to edit this I can actually get this this purple button here to use the Divi builder so I can instead of using this default WordPress thing here I could go and use the Divi builder because I turned that on now the other thing we can do is use the theme builder now this is just incredibly powerful if you have not played around with the theme builder you really should by the way I'm going to have a mini course on the theme builder coming out really soon it's gonna also be included in my ultimate Divi website design course called beyond the Builder so anyway the the theme builder is just it's just incredible so what we could do here is assign a template that we want to appear for all those cats so any custom post type and look at that right there it is there's mothers cats now this would be if I'd select that then this template would appear for any page that's a cat so like that one tomatoes Roxie or if I make another one that would be the template that is used for that now the cats archive page would be the page it's like my website domain.com slash cats that page there is what the archive page is so you could go here and a template and then on there you would want to put something like the blog module which I'll show you next in fact that's a good idea let's do that right now so I guess here also I could choose specific cats like I just want it to be for oxy or I just want it to be children of Roxy children pages remember we chose hierarchical let's actually do it for this one here for the cats archive page that's a great idea so now I have my template I could use a custom header right now I'm just gonna build the body so I'm gonna click on here and build custom body all right so I'm gonna click build from scratch and then just pick a row here then I'm gonna use the blog okay so the blog does have custom post type support now that's a fairly new feature and I just want this to be on like a grid layout of some sort and I'm not gonna really stop it but basically under this content and the content tab under the content toggle post type hmm see what's under there and there it is we can choose cats all right so there we go it's gonna pull up my cat and I can display a list here of my cat and I can display them right and so what would happen now if I save this this is saving the theme builder template close that and then click Save Changes okay so there's one more thing I have to show you and this will involve editing the code but it's going to be extremely easy so down here in our we're in theme editor and functions dot PHP where it says has archive equals true so what the problem is now is that my my archive page is going to be on just the singular cat so by default it's just gonna take on whatever my post type is so my post type is cat so it's gonna take that on now to order to solve that all we have to do is go in here and change this word true right so has archive take out the true and type use the little single quote character and then type cats with a an S obviously and then we'll update the file so basically it's saying that way the archive page will be cat instead of just cat all right and then let's go over to settings and go to permalinks now this is really important we're basically messing with a permalinks so we need to go here and you can either like click off and click back or just click on it and then click Save Changes and it basically needs that to happen in order to like just force WordPress that realized oh okay what we're saving our permalinks now otherwise it would just it would give you a 404 error so now we can go over here to cats all right so our domain.com slash cats and there it is that's the page that we just built in the Divi theme builder so that's one way you can integrate and now if I would click on this cat I would go view Roxie oh here it is Roxie the cat and again remember we enabled the Divi builder on one our custom post type so I could go here and edit the page and you know I could get rid of this sidebar and edit this however I wanted in Divi so there you go that's how you would integrate the custom post type into Divi I really hope that this was helpful now this this can be confusing this whole thing so I hope that you know if you need help just just be a be willing to ask there's people in our Facebook group the Divi teacher that will definitely be able to help and I you know I try to monitor the group too and try to help as much as I can so go ahead and ask if you get stuck on any of these things this can be a lot to take in and just overall just try to learn how this is working in Divi and how beautiful it is and think of how you could use a custom post type on your website ok so that's how you create and use custom post types in Divi I really hope that you enjoy that go ahead and play around with our generator I hope that that is useful to you and that you can add some cool custom post types alright we'll see you guys in the next video you

Channel: Pee-Aye Creative

Views: 6,961

Keywords: Divi custom post type, Divi post type, Divi CPT, Divi custom post type generator, Wordpress Custom Post Types, WordPress CPT, Divi CPT generator, custom post types in Divi, how to make custom post types, how to integrate custom post types in Divi, how to create custom post types in Divi, how to use custom post types in Divi, Divi Theme Builder, Divi 4.0, Divi 4, Divi, Divi Builder, Divi Theme, Elegant Themes, WordPress, Divi hack, Divi tutorial, Divi CSS, Divi how to

Id: Dvra7GBxPYI

Length: 24min 27sec (1467 seconds)

Published: Tue Jun 02 2020