How to create Custom Content Types | JetEngine from A to Z course

so j engine 2.5 brought with it a major new addition in the shape of custom content types or cct's now cct's are a way of easily creating custom database tables for your data that helps speed up your searches and filters along with simply displaying your data now in this video i want to take you through the basics of creating your very own custom content type and show you how to also display your data in a couple of different ways but before we start let me just quickly introduce myself my name is paul c from wp tets and i'm here working with croco block to bring you a series of tutorials on their popular dynamic tools plugins like jet engine and jet smart filters so if you're ready to start learning well let's just jump over onto the computer and see what we were working on today [Music] now once you've gone ahead and installed jet engine 2.5 plus then we need to go ahead and actually activate the custom content type to do that all we need to do is come into jet engine choose the first option and inside there under the modules you'll have right at the bottom custom content types just check that option hit save and then you'll have custom content types available to you now if you take a look into the jet engine section you'll see right at the bottom inside there is custom content types so let's go ahead and open that up now i've already gone ahead and created one we're going to ignore that i'm going to start off a completely new custom content type so we're going to do add new and give this a name first of all now because we're creating a list of clients we're going to give this a name of client slug automatically created but obviously if you wanted to change that you can do just that and underneath that you'll see this is the database table that's going to be created for us when we create this custom content type so you can see that's tied into the slug but the first part of it is just kind of pre-define what's going to be inserted into your database now the has single page i'm going to leave that unchecked for now because we're going to come back and take a look at that a little later on and i'll explain what that does and why you may want to use it your menu icon well pretty self-explanatory we're going to just choose this icon for a user and then your menu position you can choose where you want this inside the structure of your dashboard so you can see we can choose where we want that to go so let's just say we'll go first separate that okay so we've now basically created the starting point for our custom content type the next thing we need to do is create the fields for this content type and then if we want to we can assign those fields to admin columns to make the admin listing a lot more user friendly when you're actually working with custom content types now it's worth bearing in mind before you start creating your fields that we're creating a totally unique custom content type so we're not going to be referencing normal wordpress fields we're going to be creating everything from scratch so to start off with let's go to this new field and as you can see it looks very similar to where you create any kind of normal meta field but it's just been associated with our custom content type so first of all we've got our label and this we're just going to call client image that's going to be we will upload the image of this particular client or logo or something like that again you can see automatically creates the name once you've done that we can open things up then to what kind of field type you want to work with and you can see we've pretty much got everything you'd normally expect when working with jet engine or any other kind of tool that allows you to create custom meta fields you know all those options are pretty much available what we need to do though is we need to set this to be media so we can just choose we want to upload an image so we say media inside there that then changes the options underneath so we can control other things so we might want to put a description in there and we just may put in sort of client image or logo so there we go so we're just telling people what we want to do you're filled with well pretty is how big do you want this field to be inside the dashboard of the admin when you're creating or inserting content into your custom content type we'll leave that at 100 that's fine conditional logic now do you want to use any kind of conditional logic so if we open that up you can see we can now create custom rules inside you so if we click to create a custom rule we can say select a field so we can associate our conditional logic with other fields so we may say that if there's a logo included we may want to do something different you know if any issues uploaded we may want to then make another field available i'm not going to cover that in this because this works exactly the same as what you've seen inside the normal jet engine so we don't need to go through any real detail with this just knowing that it's very simple conditional logic we select the field we want to reference we select the operator what we wanted to check against and then we check the value we want it to do so we're just going to get rid of that for now just so you know that that's available and we'll disable the conditional logic now you can see now we've created that client image it's automatically added in the admin columns reference so instead of us having to do this manually it will once we create new meta fields this will automatically add those into the admin columns and make them available so we can select to use them or not as you can see by default they are disabled however if we just check that you can see now we open up three more options do we want to put a prefix a suffix inside there and do we want to make this sortable now obviously sortable comes down to is it logical to sort these kind of things so dates and things like that would be logical whereas a client image doesn't make a lot of sense so we'll leave that unchecked but we do want to show it inside our admin columns so let's add another field and this time we're going to just choose the company this particular person is working for so we're going to just say company and from there we'll just have that pre-fill out the field type we're going to set that to be select and we're just going to add in a couple of options so we're just going to add in a couple of companies and you can see is checked no we don't want that so we're just going to copy these between the two we'll add another option in and we'll just call this apple again same again and finally google so we're adding in a custom select setup so we've got our three selects inside then if we wanted to we've got the option to copy these bin them off all those kinds of useful things are available to us inside here so once we do that we can close this down and you can see company has now been added in we'll say we want to show that and what we're going to do is we're going to make this sortable and we're just going to then say is it a numeric field no it's not so we're going to leave that unchecked and if we wanted to we could put a prefix inside there a suffix again so all those options are available should we need them so i'm quickly going to add a couple more fields so the next field we're going to add in is going to be name text everything is all fine on there we're going to leave everything as it is we're going to say it needs to be required and we're going to add one final field in and this final field is simply going to be the bio about the individual so we're going to set that to be a wysiwyg text area so they can get a little bit more creative and we're going to leave that as it is okay so now you can see we've got those options underneath so we'll say we want the name to be available but we obviously don't want the bio because that's going to look a little bit strange inside our listing now we can reorder these if we want to so obviously name would make a lot more sense to be before company so let's just drag that up and you can see we now have all our key fields and also our admin column setup so let's add our new content type and then we've created that so everything is now set up if we take a look on the left hand side you can see client has now been added in underneath dashboard where we told it to go and we click to open that up you can see we now have a custom listing with all the relevant fields anything that's selectable and highlightable that's something you can actually filter through so client image company name and actions we've created the basic custom content type now we can start adding content in and we can even export this as a csv when we've created content so we have that nice ability to export any kind of content we create any custom content type and then we could upload that to somewhere else if we wanted to use that as a starting point so let's go ahead now and add a new client in in the same way we would now you see this interface looks a little different to what you'd expect a normal standard layout inside the dashboard of wordpress so we've got something that's a little bit more styled a little bit nicer to look at so let's start off by just choosing an image and we'll choose this first one drop that inside there and just fill out the details so we'll just call this john doe works for apple and we can drop in any kind of buyer that we want so let's just paste a little bit of filler text inside there and we'll just say add so that's our first one we're going to do now is we're going to add a new item so say new item okay we're going to choose a second option and this is going to be jane doe who works for apple and we'll just drop that in there and we'll just say add as well so we've now created two different clients so we go back to our client list you can see there's our clients with all the information and you can see we can sort these if we want to our name all those options inside there so unfortunately jane doesn't work for apple so we're going to do is we're going to edit jane and change here to be working for the rival company of microsoft and then we'll just say save that and we'll go back to our client list and you can see now everything is updated and if i want to sort those i can do just that so everything is pretty straightforward so far this isn't any real difference to what you'd normally do just creating a typical jet engine meta field kind of setup but obviously the main key difference here is that we have a custom database which means that we cut down on the number of entries of information inside that database which should make the whole searching and filter inside of things much quicker and just outputting that information a lot quicker now before we move on and take a look at how we can start to output and deal with this information let me just quickly show you the export items to csv option if we choose that you can see this brings up this dialog box which allows us to filter or query and sort the information inside our custom content type and only output the data we want if we want to filter it down so you can see the status we can choose between any publish or draft we can choose an order we can add that inside this we can say the item id or the name or the company so you say company ascending and then you can choose what kind of type it is with this auto integer floating points timestamps and so on so really that to auto if you want to add a second item in to order it by a second column and third column and so on you can do exactly that or you can x to get rid of any of those if you're not bothered about that you can come in and you can still query information so again you can see very similar we can filter based upon various different fields inside our database some that we've created some that are normal default fields that are created as part of a typical database for wordpress so item id client image name company bio and so on so if we say for example we wanted company is equal to and then we can just choose for example apple and then you can choose the type where it's going to be integer float and so on and so forth once you've done that and you set up all your orders your filters and your statuses to get the data you want out of there you can simply hit apply and that will then download a csv file with that data set up in the way that you've chosen using these filters and queries and so on so that's a really useful way of outputting your data let's cancel that though we're happy with everything i'm going to do now is go through the process of how we can create a file to display the data that we've just created now if you're familiar with jet engine you'll know that to output this kind of information we need to create a listing so let's just create a new listing and from there we're going to add a new one and we're going to choose what's our listing source we open that up you can see we have a new entry if you use the jet engine called custom content type we'll select that and then we can choose the content type we want ours is clients and we're going to call this client elementor that's perfectly fine and we'll say create listing item so now once that's done we can start working with elementor and build the design that we want to use to display each of the individual records for our listing for each of our clients so let's just keep this really simple as a demonstration of how we can do things let's add an inner section inside you that simply has two columns in a single row we'll just shrink that up a little bit and on the left hand side we're going to drop in an image so we're going to just scroll down to the bottom we're going to say we want to use dynamic image from the listing elements we'll drag and drop that inside there and that will then default to what it thinks is going to write which would be the post thumbnail now because this is a custom content type the post thumbnail isn't going to work we need to tell it to reference the correct data from our custom content type to do that we just drop down this list and you can see content type client and then we have the image option available inside there so obviously it knows to look for an image because that's the widget we're dropping in there so it will sub filter the information down to show you only the image related fields so we say client image and see that pulls in the first image so everything so far is working tidy we can set any kind of parameters we want inside your linked images and so on we'll leave those as they are for now though just to keep things really simple now come back out of this we're going to scroll down back to these options for the listing elements we're going to just pull in a dynamic field we'll drop that onto the right-hand column and that's the first piece of information so again we need to change this source you can see we've got a range of different options change the object field and we're going to scroll right the way down until we get to the content type client and then we can pull in all the relevant data from there so we want to pull in the name so we're going to pull that in and you see there's her name so we can just repeat that now so the easiest way is just going to be to duplicate this so we'll just duplicate that option come back over and change the data now we don't want the name this time we're going to say the company they work for and do the same again we're just going to duplicate this a third time and from there we're going to change that now to the bio so now we've pulled in all the key information all from our custom content type so now i can go ahead and style this any way that i want so for example if i wanted to set the name at the top we can do it the style option and from there i can use any of the normal options so all i'm going to do is just quickly change the typography on here and we'll just set this to like pop-ins we'll bump the size up a little bit now i'm obviously not being too picky about how this all looks it's more okay so just demonstrating how this feature works now i'm quickly just going to apply a little bit of styling to this so it all looks nice and neat and tidy for our listing now that we created the listing for our template we can publish this and then we're good to go we can start to use this in our templates and our pages wherever we want to display our custom listing so come back over to my pages and i've created a blank page called client list and we're going to edit this with elementor and we're now going to put in our new custom listing so what we need to do is scroll down until we find our listing grid we're going to drag and drop that onto our page as you can see it works the same as we used to we just need to tell it what listing grid do we want to use so currently we just got select so we're going to say we want the client loop and there's our client loops that's pulled in our template now obviously it looks a little bit terrible at all because we need to change the columns in this example to one and now we've got our basic listing inside there and we have all the controls we normally expect to have as part of editing our listings so we can control the post number you know all those kinds of useful bits of information we can even query our new content types you can see content types query we could expand this out and we could just add in a new query so we'll just say query settings and now we can choose what those settings are going to be you can choose an offset you can choose a status we can choose the order or we can choose to query so let's just say we want to query this i'm going to add new query and we're going to just change this we're going to say company name is equal to or we'll just say apple and we're going to do we'll leave that set to auto and we'll apply that and you can see now that just shows us john doe who works for apple if we want to we can edit this query settings and let's just say this time we want to choose microsoft and we'll just say apply and now we only see jane doe so these options are available to us and we can query this and we can get rid of that completely if we want to so we can just show everybody hit apply and everybody is now back into our custom listing so this basic level that's how we can set up custom content types how we can display them and if we want to query them inside the actual listing itself but this kind of thing you may notice let's just update this page and let's preview it once you preview we've got a nice listing but we can't click on anything nothing is selectable and even if it was we've got nowhere for it to go because these custom content types are basically just a listing item like we've seen in front of us but you can make them clickable and you can have additional information so we may have a really simplified thing we could have a list of clients just as they named the company and then we can click to go in and take a look at a lot more information but to do that we need to change a few things about our custom content type so come back over to our custom content types list and we're going to do is we're going to open back up our client section and we're going to enable one option and that's going to open up some more things that we can do so has single page if you remember back to the beginning of the video i said we're going to come back to this and that's what i'm going to do now to enable that and you can see that now opens up three additional fields related post type title field and content field so if we just open this up you can see all the different kinds of post types and things that are part of wordpress are all available to us for this example we're going to set the related post type to be post because we want to treat this as if it was just a post so it's going to work in a very similar fashion and i'll explain to you why this is important once we've set things up and i'll show you the impact that it has on how we work so we'll set this to be posts and then you can set your title field if you want to so we're going to say our title field is going to be name and our content field is going to be bio so just consider these to be like the normal wordpress title and the normal wordpress content fields we're just kind of mapping those entities to our custom content type so with that being done we're now finished so we're going to update that content type so you may notice now that nothing has really changed so let me just come back over now into our client so we're going to add a new client in so let's just add a new client and we're going to choose our media and we're going to upload a new image for our new client and we're just going to call her betty rubble for no other reason then well why not set them to be google and we'll just set up our bio we'll drop that information in there and we'll just add our new client so now we have three clients so we come back you can see there's our three clients now because we've associated our custom content type to have that sort of extra page and link that through to the posts if we take a look at the post section you'll see we now have betty rubble listed inside there click and open that up most of the basic information is in there featured image obviously is blank because we haven't set a featured image we've got nothing associated with that but the contents in there and the name is in there which are those two fields that we mapped right back when we set this link up so now because we've done that it means that we can create a detail page in other words we can have a listing like we've already created which you can see here and we can make that clickable then to go through and see more details and link that through to a custom template that will show a single post which we can then link through to our custom content types so now we need to do is create that template so we're going to come into elementor's template section and into theme builder and from there we're just going to create a new single post all our options down the sides we're going to say we want to add a new single post in and once we've done that we can then link everything up so we're going just get rid of this close this down start with a blank slate like before i'm not gonna spend time making this look pretty i just want to show you from a functionality point of view okay so we're gonna do is we're gonna add in a new section and in there we're just gonna put a simple two column and add a little bit of space above and below and now we can simply start to build our template so we're gonna do come back to our widgets we're gonna just drop an image inside there we're gonna come down and choose dynamic tags and from there we can scroll down you can see under jet engine we have custom content type image select that then click on the little wrench icon like we would any other time and choose client image and give it a second or so and you can see there's our client image and now we can simply come in and fill out the extra information that we want so we'll grab a dynamic field as you can see that's pulled in the post term and it's pulled in title now that's okay you can use that if you want to because where we've moved on to the second stage where we have these sort of single post pages set up for us it has mapped it through to the title however what we could do is we can change that if we wanted to and we could come down until we get to our custom content type and choose name from there both will do the same thing entirely up to you which way you would prefer to go about it so now we can do is we can duplicate that we can change this then and we don't want the name this time we want to have the bio and we'll do the same one more time and we'll just say duplicate that and we'll change that from bio and this time we'll set that to company now obviously you can still do all the same things you can filter your field output or customize your field output and we can say company colon inside there you can style all this in the way that you normally expect all those things you were kind of used to doing with jet engine and probably pretty much with elementor pro as well so now we're going to do is going to publish this we can publish this now and we can set whatever conditions are required so we'll just set this as you see all the normal options inside there we'll just say this is going to be posts i'm not too bothered i just want to demonstrate how we get this to work save and close we've now created that template so what we need to do now is go back to our listing and make the links clickable for the images without doing that then obviously nothing is going to happen so come back over to my listings as part of jet engine and we're going to edit our client loop with elementor and once we've done that we're just going to select the image to make it clickable then we're going to come down say linked image and we'll just say yes then you've got your link source in other words where's the link coming from what's the data that's going to be passed over to the details page you can see we've got single post id now you might find this is on permalink to start off with and both should work but i would definitely tend to recommend using the single post id because that associates that single post with this particular listing item for our custom content type and that's all you need to do so now if we hit update on there we'll come back over to our test site and we'll take a look at betty rubble now that's a link so we can take a look at that but you'll see that jane doe and john doe are not links and that's because we set those up prior to creating that link with the posts which means that there's no post created for those two individual entries so it's always worth bearing in mind when you're setting everything up that you need to think ahead to decide am i going to use posts to have a detailed page or do i want to just have a very simplistic listing at which point you don't need to create that and you can just rely upon the custom content types on their own a little bit of planning is going to go a long way for you when you're working with these tools okay let's click on betty rubble and we're going to go through and you can see there's our detail page everything has now been set up correctly and that's pretty much what i wanted to cover in this video now we've only scratched the surface of where we are with custom content types right now and i know that there's a lot more in the pipeline with the next version and the next version so if this interests you check it out and obviously if you don't see where it's going keep an eye on it because i think there's some exciting features coming in the future there's one thing i want to do before i wrap everything up and that's just to say that we can use this with jet smart filters and jet search so if you'd like to see a video on that let me know in the comment section below and i'm sure that between myself and crockerblock we can come up with some content to show you exactly how you can link custom content types with jet smart filters and the search options to create something a little bit more powerful than what you're seeing right now so that should help demonstrate how custom content types work at the moment now hopefully this has piqued your interest and you're ready to start testing them out for yourself now if you found this video useful please hit that thumbs up and smash the subscribe button below and while you're there well why not click the bell icon to be notified when new videos are added to the channel as always all of the applicable links are in the description below my name is paul c until next time take care

Channel: Crocoblock

Views: 31,509

Keywords: сrocoblock, crocoblock tutorial, crocoblock elementor, crocoblock plugins, wptuts elementor, wptuts jet engine, paul charlton elementor, relationship posts, jetengine plugin, jet engine relationships, jetengine for elementor, jet engine elementor, jet engine wordpress, jetengine listing, jet engine listings, metafields, meta fields in wordpress, crocoblock

Id: m9lfFsm1NbE

Length: 24min 47sec (1487 seconds)

Published: Mon Oct 19 2020