How To Use JetEngine Custom Content Types

in this video i'm going to take you over the basics of working with the all new custom content type or cct's that have been introduced into jet engine 2.5 now if you're new to the concept of custom content types it basically works like this a normal wordpress custom post type will store multiple database entries for each record or post you add to the site so this means when you have a large site searching filtering or sorting can become slow and very much resource intense with cct's though you only store a single line for each entry inside the database in its own unique database table this means that if you wanted to filter 1 000 cct's you only filter 1 000 database entries if you compare that to up to 5 000 entries when using normal traditional method you can soon see why this is a really powerful new feature now there's some limitations on how cct's work at the moment so they're not ideal for every use case and throughout this video i'll discuss a few of those limitations if you're ready to see how to start using cct's in your projects let's just jump in and take a look at what we'll be creating today as always let me just kick this off by just showing you quickly what we're going to create the functionality not the design side of things so we have our a list of clients we've got a simple filter set up and we're using the jet engine 2.5 custom content types to create these individual listing we can filter them as you'd expect based upon the company they work for and you can stack filters on top of each other so you can search for for example microsoft and google at the same time we've also got a section that allows us to add in new clients as you can see very easy to use typical kind of form you already expect to see but the beauty of working with custom content types especially when you're working with simpler data so data that doesn't require the use of things like tags or taxonomies and things like that because currently custom content types can't actually utilize those this is something that i hope will come in the future and we'll have a much more expansive tool set but for now custom content types are really only kind of useful when it comes to dealing with things like simple lists so in this example we've got a list of clients we don't really need a ton of details about them just their name photograph company and a bio that's all we're going to use but the technique behind is the more important side of things and then we've got this front end like i say ability to add new clients into the list if we want to and we can set them as draft and we can set them as approved so what i'm going to show you in this video is how to work with custom content types how you can then link that through to working with jet smart filters and how you can use the forms and the account function to create a front-end form to be able to add content into your listings so let's start by taking a look at the tools we're going to be using we've got jet smart filters and we've got jet engine 2.5 x installed we have to have 2.5 to get access to the custom content types you're also going to need to have elementor installed you don't need elementor pro but it is useful for certain aspects but for this you don't really need it because we can just use the basic template instructions that we have for pages and sections and that'll do pretty much everything we need so the first thing we need to do is activate custom content types to do that we go to jet engine and we simply put the jet engine entry and from there we've got all the available modules we want to work with we're going to start off with the custom content types but we also need to have the profile builder and forms enabled click save that will activate those options and once they're activated then we can make sure that everything else is set up and configured correctly now what we're going to do first of all is set up the custom content types because that's the key of everything that we're going to be working with now to do that once you've enabled everything inside here you'll see on the left hand side underneath the chat engine menu we now have three new entries custom content types profile builder and forms let's open up the custom content type and this will take us into a list of all of the custom content types we currently have created now obviously we haven't got anything created because this is a new setup so let's click on add new so we're going to do is we're going to give this a name we're going to call this client click and you see the slug is automatically created then underneath that you can see this is the db table name in other words this is the table name that's going to be created for this particular custom content type and this is where the power of cct's custom content types really comes in because whenever you create a new custom post type for example with the normal wordpress setup using jet engine acf anything like that every single entry that you add in will have multiple different entries inside the database table of wordpress the problem with that is when you have a thousand pages a thousand posts whatever it is and they've got multiple entries per item searching and filtering becomes a lot slower and a lot more resource intense because you have so many extra fields so many extra tables so many places to look through for that extra data having a custom content type with its own dedicated table means that there's only one entry inside the database for each entry inside your website it also just means that searching filtering sorting all those things are considerably quicker because there's a lot less data to search sort or filter through so this is one of the key benefits of using cct's now next up we have the has single page we're going to leave that disabled for now i'll come back and show you that a little later on what it's for but for now we're going to leave it as it is next up we've got the icon type so we're going to do is just going to choose an icon and then you can specify where you want this we'll say we want this after the first separator which we'll put just below the dashboard once you've done that you then have two extra options we've got fields and admin columns fields is where we create our custom meta fields that are associated with this custom content type and admin columns is where we can set up what columns we want to display inside the listing and i'll show you that in a moment once we've created everything we're now going to create the four fields we're going to use in this example so the first one we're going to use is called name which is going to be the name of the client and you see automatic creates the id the field type of text is perfectly fine now all the other options should look very familiar if you've ever used jet engine before because we're just creating meta fields like we've done many times in the past so leave all the other options left as they are we'll set it as required so obviously you need to put a name in then we'll just close that down i'm going to add a next field in which is going to be company so we're going to do is we're just going to simply scroll back up type in company and auto create the id we're going to change this then over to be a select field now when you create a select field you do have to manually input the field options but we're going to put a couple in so it's not too much of a problem so we're going to do is we're going to choose the first option which is going to be apple and we'll just copy that drop that underneath add another field option in i'm just going to call this google and same again we'll just put that underneath it and we'll do one final one which is going to be microsoft and we'll copy that underneath as well okay so there's our select we can just minimize that now for our company we'll add two more in next one is just simply going to be the bio which is going to be a text area so we'll just put bio choose wysiwyg so they can style this and make it look nice and tidy and then the final one we're going to drop in is going to be for an image so we're just going to call this client image i'm going to set that to be scroll down we'll set that to be a media entry okay so we've now created the four fields that we want the four meta fields and you'll see underneath the admin columns it's now pre-filled out those four different entries plus some extra information which if you want to use you can do something like modify date created date item author and so on so what we're going to do is we're going to just choose what we want to display so we're going to close down the item id that's perfectly fine to leave that as it is name yes we want to show that and again you can drop in things like prefixes and all those kinds of things we can make them sortable if we want to we'll say we want to show the company and we will make that sortable it's not a numeric field so we won't check that bio we don't want to show client image we do want to show and if you want to say create a date modified date and so on so let's just say created date now if you want to reorder any of these fields you can do that sit back out the fields at the top and we say we'll put the client image as the first one inside this stack and client image now we moved it to the top okay so we've now created our custom content type so we'll add that content type inside there now you see in the top left hand corner we've got client has been added in if we click to open that up you can see there's our client image name company create a date and so on company is highlighted because we can sort based on that but obviously anything else you set assortable they'll also be highlighted as well you'll also notice we've got export items to csv which is really really useful and pretty powerful so once you've created your custom content type and you may have a lot of information inside there you can export that as a csv file you could use that then in lots of different ways and we have a lot of options inside there so let's say export items to csv you can choose what status you want you can apply custom orders inside then you can see you can order by any of the fields that we have available we can set ascending we can set the type we can even stack multiple order queries on top of each other you also have a query so again you have all the same fields available we've got an operator to qualify exactly what we want to check against or how we want to check against the values drop our values inside there and again we've got the type and again we've got the ability to stack multiple queries so this is pretty cool you could really filter this down to output only specific groups of people only specific groups of entries whatever you wanted to do so it's great to see we have that feature okay so we now have our first thing set up so let's just add a new client in just so we have at least some basic info so let's add our media and we're simply going to choose an image so i'm going to upload a couple of images i want to work with we'll add those inside there and we'll choose this one and we're just going to give him a name we say he works for google and we're just going to stop dropping a simple bio you can see you've got the publish status on the right hand side we can choose publish or draft inside there so we'll add that in and we now have our first entry so we go back to our clients there's our client inside day so now i can go through add a couple more which i'll do now and then we'll come back on the next stage okay so now i've added in my three different entries like i say you can sort these if you want to you can see we can just sort them ascending or descending and like i say we can set pretty much any column up to do this kind of thing where it makes sense to do it so that's the first part done we've now created our custom content type and added in some initial contact information on some initial clients what's next well now we need to have a way of outputting this information in listing now to do that we work in pretty much exactly the same way as we would have done previously with just jet engine we have to create a listing and then we'll create a page to actually display that listing itself so we're going to do come back in the jet engine we're going to choose listings and now we're going to create a new listing so we're going to say this is going to be a custom content type which is a new entry inside you select the content we're going to say client which is our custom content type name and then we're going to give this a name so we're going to call this client loop and we're going to use elementor to edit it so we'll create this listing item and then we can start building the various different elements so let's start off by making our life a little easier when we're designing things let's come to the settings in the bottom left hand corner into our listing settings and we're going to just set up a few things inside you we're going to set our preview width i'm going to set that to something about about 450 somewhere around there maybe let's call it 500 so we get an idea now this is just more of a visual way of seeing what your listing item is going to look like when it's finished custom content type select the source so you can see you can say client inside there this will mean we'll at least get some data that we can see exactly what we're doing when we're building it now i'm not going to worry about making this clickable because we don't want to take this through to a detailed page because basically custom content types as it's set up at the moment don't have that facility we will take a look a little later at how you can enable that though okay so let's just go back now into our listing section we'll hit publish just so we've got this saved and then we'll start building things out so the first you want to do is we want to drop in a picture of the person that we're dealing with now to do that we're just going to simply choose the dynamic image option it's going to scroll down until we find dynamic image drag and drop that onto our page and now we can set the parameters up for this particular widget so we'll do is source is set to post thumbnail and we don't have that so we need to change that and rectify it and you see we have a section called cust content type client and inside there we've got a client image which is exactly what we've set up so our custom content type is listed we select that and you can see that now pulls in the image of the particular person this is just a demo so just putting one of the images in which is fine we can set this up to what we want to make sure we don't end up loading massive images in so we'll say we'll set that to something like medium large and then we'll set the alignment to what we want inside there okay so that's the basics of that setup next thing we want to do is drop in the next bit of info so right now we need to add in three more widgets we're gonna add in some dynamic fields so we'll drag and drop that underneath there and what we'll do is we'll set this one up and then we'll duplicate it to set the next set of information up so again same kind of thing we've got the source we're going to change that over now to be what we want so again you can see our custom content type is listed inside you as content type client so we're going to do is we're going to come down and choose their name that's that setup so now we can do is we can simply duplicate that and just change the values inside there so this time we don't want name we want to change that over now to company you can see they work for google finally we're going to do another option so we can also mix and match with normal widgets so we're going to do is we're going to put in the text editor this time uh inside there we're going to choose the dynamic tags and if we scroll down you'll see inside the custom content type field select that we can choose our field type and this time it's going to be bio and now we can do things like set the before and after so we'll just put bio inside there and we can just add in a little bit of html codes we'll set that to strong so it just stands off a little bit so it's nice and bold and we'll just copy that from there paste that at the end and just add in the closing tag okay so that's everything set up so all i need to do now is just style this to make it look a little bit better now this isn't a video about showing you how to style things if you follow along with something like this you should be more than accustomed to setting up styling and so on so i'm going to do that behind the scenes just to make the whole process quick and easy for now let's just hit update and then i'm going to style everything okay so there we go there's a little bit of styling so what we need to do now is create the page to display this listing on so you're going to come back out into our pages section we're going to add a new page and from there we're going to give this a name we're going to call this client list and we'll just say there's a draft for now and then we'll edit with elementor to open the editor up and now we need to do is find that listing grid so we're going to do a search for listing we'll drag and drop that onto our screen let's close this down and choose the listing we want so we're just going to type in client there's our client loop and you see there's our list of clients already been pulled in for us with the design we just set up and created so we're going to do is we're going to just configure this to be in two and we're going to add in a new section new column on the left hand side and just shrink that down to about 25 okay so that's what we're going to drop in our filter in a moment but you can see we've now created our custom content type we've created a listing for it and we've now output that listing onto this particular page so those aspects are done so let's just publish this now we need to do is go and set up the actual filters for this okay so to access our filters we're just going to come into the smart filters option and we're going to add new inside there so we're going to give this a name of client company filter so we're just going to keep this really simple filter label we're going to set as company active label we'll do the same on there as well then we're going to choose the filter type that we want to work with now you can set up pretty much any kind of filter as long as it filters data you have inside your custom content type for this example i'm going to show you probably where is the more complicated one which is setting up a checkbox list where we can just check to see the different companies so you see it says the data source once you've chosen checkbox list check box list data source we're going to set this to be a manual input because we need to replicate the companies that we set up when we created our custom content type so we're going to do the same again new option and we're going to put in start off with apple we'll copy that to the next field next step we're going to do google copy that next field and finally we'll do microsoft and copy that over as well okay so that's the first part now we need to just set up the final part which is the query variable now if you're not sure what the query variable is it's basically the meta field you want to filter against if you're not sure what that is what you can do is you can commit your jet engine into your custom content type open up your content type and the filter we want to go against is the company which you can see is lowercase company so all we need to do is come back and do filters and we're just going to put that exact same entry inside there which is company so that's our query variable so everything has now been set up we can publish this and once we publish it we can now drop it into our page so we're going to come back into our pages we're going to open up our client list with elementor and once we've opened that up we're going to drop in the relevant widget so i'm going to scroll down until we find our filter widgets and what we need to do now is choose the checkbox filter drag and drop that inside there and we now need to just choose what filter we want so we just start typing in there we go client company filter you can see there's our company filters and we can choose what we want to do so this filter four we need to set this as jet engine because we've created this custom list this custom content type inside jet engine so we'll choose that option and then you say do you want to apply this to be a page load mixed ajax whatever you want and when do you want to apply it on a value change or do you want an apply button up to you how you want to work with those kinds of things we're going to leave that as it is we'll hit update on there and then we can test our page out so let's just preview our page now so let's just preview the changes and you can see everything set up including our filters on the left hand side we say let's test it up there we go google google and microsoft just microsoft everything so everything is working with our custom content type so this is all really pretty simple and straightforward but you can see it is pretty quick to work with and i'm not on a particularly quick server i'm just on a siteground shared hosting on the lowest account so there's nothing special about this particular account but the results are pretty quick so now that we've set everything up the next thing we need to do is create the form that allows us to have a front-end way of adding content so we're not restricted to only adding content in the dashboard side of things to do that we're going to come back out of here we're going to create our first form element so we're going to come back to our jet engine area and we're going to come into our forms option and now we can start building out our form so we're going to say we'll add a new form in and if you've never used the form builder before it can look quite daunting but in all honesty it is fairly straightforward and shouldn't take too long to get used to it if you'd like to see a full tutorial on how to use this let me know in the comment section below and i'll take a look at creating a dedicated tutorial for just working with the form side of things as part of jet engine okay so let's give our former name we're going to call this new client and you can see underneath whenever you create a form you're going to get a couple of default entries your post id your submit button you're going to have your send email which is your sort of action we're going to do is we're going to set things up the way we need to we don't need this post id for this particular step so we're going to just click on the x to get rid of that we do obviously want the submit button so now we need to do is we need to create the fields we want to add in so we're going to create four different fields i'm going to put our submit button right at the bottom so it's not in the wrong place i'm going to do is we're going to squish these up a little bit because we can just simply drag these over to create a great looking form without too much of a problem okay so the first thing you want to do is give the details to the form tell it what each of these field entries is actually for so these need to just simply marry up to what we've got the four different fields met the fields we've created as part of our customer content type and again if you're ever worried and you're not sure what to do with this just open up your custom content types open up the content type you want to map through to it and have these fields available and you can see all the data we need is listed there for us okay so the first thing we want to do we're going to edit this and we're just going to set up the parameters to specify how this all works and what content is going away so type text field type text this is going to be for the name entry so that's perfectly fine then you've got the name so we need to do is we need to put in the name that we want to work with from our custom content type so let's come back over you can see the first one we want which is the name is and is lowercase name so we're gonna come back over here we're gonna do that exactly as it is making sure that the case is exactly the same the label is what you're going to see next to your form or above your form entry and a description if you need it if you've got something quite complicated that you need to explain how it all works then we're going to do is in the placeholder we're just going to say your client's name just to put something inside there and we're gonna make sure it's required okay so you can set up some other parameters if you want to like field visibility and so on but we're not going away with that because it's a really simple example to show you the basics of how this works let's apply the changes on there let's now open up our second field and our second field is where we're going to drop in the company details the company name so we're going to change this type over to select because that's what we set up originally so select is what we want the field name okay we come back over there's your company which is a select field lowercase company so inside the field name we're gonna do exactly that company label so you should be seeing it's not particularly complex okay so the manual input we need so we're going to add an option inside you and again we need to do the same thing again which is going to be apple google and finally microsoft there we go so that's our select field entry everything else is perfectly fine on there we'll leave that as it is and we'll say apply changes once we've applied our changes the next one we've got then is the biome so same again edit that change this over to wysiwyg and we're just going to call this bio because that's exactly what we have inside there we'll apply those changes and we'll just set up the very final one which is going to be for our client image so we need to do is set this to be media because we've got a file that's been uploaded come back over you can see we've got client underscore image so that's what we're going to put inside you client underscore image you need to make sure that if ever your space is there's always going to be an underscore or a dash inside there and it needs to be exactly the same as what you have inside your fields as part of your custom content type okay so enable we're just going to give this client image and we're going to come down there we're going to just choose a couple of other options so we can see we've got who has access to this we're going to say any registered user do you want to insert it and say yes the field value we're going to set as attachment id and then we can set up how many files we want to upload which obviously is going to be one for this example and we're going to set this to a limit of two megabytes and finally we're just simply going to choose the file types that are accepted so we'll set jpegs gifs and pngs okay so anything else you need to set you can do that inside there we're just going to say apply changes and that's our four fields set up so that's the first part of this done the next thing we need to do now is tell it what we're going to do when we submit it now by default you can see it just says send email and that's not what we're going to do but you can stack different actions on top of each other so you may want to have it when a new client is added it goes into draft status and an email is pinged off to an admin to confirm it you can do all those kinds of things but like i say i want to keep this really simple just to demonstrate the core functions of this so i'm going to do is going to edit this we're going to change the type at the moment it says send email what we're going to do is change this to insert update custom content type item because we're working with cct's so we'll choose that as the option you can see that now gives us a range of extra options the content type what do we want to map this to we're going to change that to client the item status we can choose between published and draft i would recommend probably in most cases draft is going to be fine and then like i said you could fire off that email to get it confirmed and approved and published but we'll leave it for publish for this example just as a demonstration and now we just need to map the different fields to their counterparts so we've got name company bio and client image which is what we've got set up up here for the fields and we just need to map those now to the cct fields that they are related to so name is going to be name company is going to be company bio bio and finally client image simple as that apply those changes and now we've got everything set up so we can publish this and now new form has now been created ready for us to add new content into our cct's from the front end of our site okay so created a page now ready to put our form into so i'm going to do is edit this with elementor one more time and from there we're going to add in the form elements we're going to search for form and you can see there's our form item and drag and drop that over onto our page just need to select our form and we only have one at this point so we can just choose type in client there we go there's our new client and you can see there's our form and all those fields have been pulled in ready for us obviously you can set anything up you want on here you can choose how you want to submit the data all those kinds of useful bits of info like i say let's keep it simple let's just update this page and now let's just test it out so i'm going to preview the changes and there's our form so now we're going to fill in some details and make sure that everything works the way it should do okay so let's just pull the details in and we're going to say that i'm currently working for google i will choose a file and what i'll do is i'll just simply upload a picture of me and we'll say submit there we go form successfully submitted so now if we hop over to the test page with the listings you can see i've now been listed inside this particular page and i'm filterable as you can see google apple everything is working as you'd expect it to be so that's basically how you use this function this is a really quick and brief overview we've seen how to filter things we've seen how to create list items how to create custom content types all those kinds of things there's one more thing i want to show you before i wrap this up let's just say you were creating a list and you wanted to have a really stripped down version of information and then you could still click to go and take a look like you've probably got used to when you're working with your typical custom post time well we can't do it but there are still like i say some limitations and i'm just going to show you how this works i'm not going to create any more fields or anything so we need to do is go back to our custom content type open up the custom content type we want to edit and we're going to say has single page now select that it says okay there's three more bits of information we need now the related post type click and open that up and you can see we've got lots of different options inside there but what we want to do is we want to treat this like it's a post so we're just going to choose posts simple as that you see your title field we're going to select that and we're going to say the title field is going to be the name which is the name of the person and the content field is going to be their bio so we just literally map in those to the normal default wordpress posts title field and content fields that's it so all we need to do to start off with we'll update that and now we've kind of linked it through so we're going to create a post ready for us to actually see that data and this is the thing that can get a little confusing at first when you don't really know what's going on now when we create a new entry we'll also create a duplicate post that will contain most of the information that we have inside this custom content type by default it's not going to include the featured image because we don't have a featured image selected so what we're talking about let me just show you so back on our add new client form we created earlier and we're just going to add a new person in so we're just going to call this i would say they work for google and a bio in and we'll just choose an image to upload now i'm not going to be too worried about this we'll just grab something just so we can see how it all works okay so we'll submit that now and you can see there's our new entry submitted so we're gonna do come back into our site and as we say we'll go in and take a look at our clients and you can see there's billy joe we just added that person in everything is installed inside there like we'd normally expect but now if we come to posts as well we'll see billy joe is also inside there so that post has been created and associated with the information and if we open that up you'll see video is the title field and underneath is our description so you can see the content has been added in if we take a look at the document featured image you can see nothing is set up inside there but what this does is it creates a link between our custom content type post entry you know what we're going to call it and also a post that includes a lot of the same data so we can link the two together so there's a couple more things we need to do we need to create a template to output this information so we're going to do is going to come to our template section we're going to come into our theme builder and from there we're just going to say we want to create a single post we'll create a new single post and we're just going to call this client details create our template and we're just simply going to drag and drop in the relevant field so let's just close this down and we're going to do is we're just going to pull in post title we'll come back out of there and we'll just come back in and we'll say we'll pull in the post content okay there we go so let's just pull that data in finally let's just grab the image field we'll drag and drop that above the name and we'll just set the dynamic tags inside there if you scroll right through the bottom you can see there's custom content type image click the wrench icon and set that to be custom content client and we'll set that to the client image you see that pulls the information in now you can obviously add any other fields you want and i just want to demonstrate more than anything how this all works so we'll publish that at our condition and for ease i'm just going to set this to all singular so all singular posts use this this template but you can get a bit more refined if you want to we'll save and close that and we've done most of what we need now we just need to set it up so when you take a look at one of those clients we can actually click and go and take a look at their details to do that we go back to our loop item our listings from there we're going to open up and edit our client loop with elementor i'm going to do now is we're going to select that image at the top and we're going to come down and say linked image we're going to select it and you can see it says link source permalink and you can set a range of different things from inside you what we want to do though is we want to go to single post id underneath our content type of client select that option and that's now made that clickable so we'll update that come back to our client list and refresh the page and you see billy joe is clickable whereas paul betty rubble betty livestream none of those are clickable and that's because we added those into the database into the custom content type before we added the has single page option so that's basically what happens there we can still use our filters everything is still working the way you'd expect it to so you can see we can just disable we'll go for microsoft and only microsoft so everything is working but we've now created a much more feature-rich setup using custom content types using smart filters all the options we have available to us with this new 2.5 update of jet engine now this is a really simple example of how you could use it and there are so many different ways you could use it but hopefully this has given you insight into how custom content types work so that's how you can use cct's and how you can combine them with your various other features within jet engine and jet smart filters if you'd like to learn more about jet engine check out the playlist now that's on screen if you found this video useful please give it a thumbs up as it really helps the channel out if you didn't though well feel free to hit that thumbs down button twice as that works pretty well too as always all of the applicable links are in the description below my name is paul c this has been wp test and until next time take care

Channel: WPTuts

Views: 17,579

Keywords: WPTuts, jet engine, jetengine plugin for elementor, jetengine plugin, jet engine forms, jet engine wordpress, jet engine tutorial, jet engine listing grid, jet engine 2.5, custom content types, crocoblock jet engine, crocoblock jet engine tutorial

Id: hWZotwqhMb4

Length: 33min 33sec (2013 seconds)

Published: Tue Oct 13 2020