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 form of Custom Content Types or CCTs, now CCTs are a way to easily

create

custom

database tables for your data that help speed up your searches and filters. , in addition to just displaying your data now in In this video I want to walk you through the basics of creating your 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 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 tool plugins like jet engines and jet smart filters, so if you're ready to start learning well, let's jump on the computer and see what what we were working on today, once you have gone ahead and installed Jet Engine 2.5 plus, then we need to go ahead and activate the custom

content

type to do that, all we have to do is go into Jet Engine, choose the first option and inside. there under the modules you will have right at the bottom custom content

types

just check that option press save and then you will have custom content

types

available to you now if you take a look at the jet engines section you will see directly At the bottom there are custom content types, so let's go ahead and open that up now.

I already went ahead and

create

d one that we're going to ignore. I'm going to start with a brand new custom content type, so First we're going to add new and give this a name because we're creating a customer list. We'll give this an automatically created slug client name, but obviously if you want to change that, you can do just that. and below you'll see that this is the database table that will be created for us when we create this custom content type so you can see that it's linked to the slug, but the first part is just kind of a predefinition of what's going to happen. to be inserted into your database you now have a single page.

I'm going to leave that unchecked for now because we'll come back and take a look at that a little later and I'll explain what it does and why you might want to use it. Its menu icon is self-explanatory. We'll simply choose this icon for a user and then their menu position. You can choose where you want this within your board structure so you can see what we can choose from. where we want it to go, so let's say first we'll separate it, okay, now we've 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, We can map those fields to admin columns to make the admin list much easier to use when you're actually working with custom content types.

Now it's worth keeping in mind before you start creating your fields that we're creating a totally unique custom content type, so we won't be referencing normal WordPress fields, we'll be creating everything from scratch, so to get started, let's head over 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 have our tag and we'll just call this customer image and we will upload the image of this particular one. client or logo or something like that again, you can see it automatically creates the name once you've done that, we can open things up and then see what type of field you want to work with and you can see we have pretty much everything you need.

Normally you would expect that when you are working with a jet engine or any other type of tool that allows you to create custom metafields, that you know that all of those options are pretty much available. However, what we need to do is set this to be multimedia so we can just choose that we want to upload an image, so we say media there and then change the options underneath so we can control other things, so we might want to put a description in there and we can just put some kind of image or logo of the client, so there we go, so we're just telling people what we want to do, what you're interested in is how big do you want this field to be within the admin panel when you are creating or embedding content in your custom content type.

We'll leave it at 100, that's fine, conditional logic. Do you want to use some kind of conditional logic? If we open it up, you can see that now we can create custom rules within you, so if we click to create a custom rule, we can say select a field so that we can associate our conditional logic with other fields so that we can say that if there is a logo included, we might want to do something different, you know, if it loads something wrong, we might want to make another field available, I'm not. We're going to cover that in this because it works exactly the same as what you've seen inside the normal jet engine, so we don't need to go into any real detail with this, just knowing that it's very simple conditional logic, we select the field that we want reference, we select the operator that we wanted to compare with and then we check the value that we want it to do, so we're going to get rid of that for now so you know it's available and we'll disable the Conditional Logic now you can see that we've created that image of the client, it is automatically added in the admin columns reference, so instead of us having to do this manually, once we create new meta fields, it will automatically add them to the admin columns and create them available for us to select use them or not, as you can see, by default they are disabled;

However, if we just mark what you can see now, we open up three more options. Do we want to put a prefix and a suffix in there? I want this to be sortable now, obviously it comes down to whether it's logical to sort this sort of thing so that dates and stuff are logical, whereas a client image doesn't make much sense, so we'll leave it unchecked, but We want to display it within our management columns, so let's add another field and this time we'll just choose the company that this particular person works for, so we'll just say company and from there we'll have that.

Pre-populate the field type, we're going to set it to be selected and we're just going to add a couple of options, so we're just going to add a couple of companies and you can see it's checked no. we don't want that, so we'll just copy them between the two, add another option and just call this apple again and finally Google, so we'll add a custom select setting. we have our three selections inside and then if we want, we have the option to copy them and delete them. All of that kind of useful stuff is available to us in here, so once we do that, we can close this and you can see that the company has now been added, we'll say we want to display that and what we're going to do is make that This can be sorted and then we will say if it is a numeric field, no, it is not. so we're going to leave that unchecked and if we wanted we could put a prefix inside a suffix again so that all of those options are available in case we need them, so I'll quickly add a couple more fields for the next field. we're going to add the name text, everything is fine there, we'll leave everything as is, we'll say it must be required and we'll add a final field and this last field will simply be the individual's bio, so we'll set it up as a wysiwyg text area for So you can be a little more creative and we'll leave it as it is.

Now you can see we have those options below, so we'll say we want the name to be available, but obviously we don't want the bio because it'll look a little strange within our list. Now we can reorder them. If we want to, obviously the name would make a lot more sense to be in front of the company, so let's drag that up and you can see we now have all of our key fields and also our admin column settings, so let's add our new type of content and then I created it, so now everything is set.

If we take a look on the left side, you can see that the client has now been added under the dashboard where we told it to go and we click to open it. You can see that we now have a custom list with all the relevant fields, everything that can be selected and highlighted, it's something that can actually be filtered, so the customer image, the company name and the actions, we have created the basic custom content type, now we can start adding content and we can even export it as a csv when we have created content, so we have that nice ability to export any type of content, we create any type of custom content and then we can upload it to another place if we want to use it as a starting point, so let's move on now. and add a new client in the same way you would now see this interface looks a little bit different than what you would expect from a normal standard layout within the WordPress dashboard, so we have something that has a little more flair to it.

It's a little bit nicer to look at so let's start by just picking an image and we'll pick this first one and put it in there and fill in the details so we'll call it John Doe Works for Apple and we can put in any type of buyer that we want so let's paste some filler text there and we'll say add, so that's the first one we'll do now, we'll add a new item, so say new. element okay, we're going to choose a second option and this is going to be Jane Doe, who works for Apple, and we're just going to put her in there and say add too, so now we've created two different clients. so we go back to our customer list, you can see there's our customers with all the information and you can see we can sort them if we want our name, all those options there, so unfortunately Jane doesn't work for Apple, so we're.

What we're going to do is edit Jane and change her here to work for Microsoft's rival company and then we'll just say save that and we'll go back to our client list and you can see now that everything is updated. and if I want to sort them, I can, so everything is pretty simple so far. There's no real difference to what you would normally do just creating a typical jet engine metafield setup, but obviously the main key difference. Here is that we have a custom database, which means we reduce the number of information entries within that database, which should make all the searching and filtering within things much faster and generate that information much faster now before continuing. and take a look at how we can start generating and managing this information.

Let me quickly show you the option to export items to csv if we choose you can see this opens this dialog box that allows us to filter or query and sort. the information inside our custom content type and just generate the data that we want if we want to filter it so you can see the status, we can choose between any post or draft, we can choose an order, we can add that within this we can say the ID of the item or the name or the company so it says upstream company and then you can choose what kind of type it is with these automatic integer floating point timestamps etc. so it's really automatic if you want to add a second item to the order. for a second column and a third column and so on, you can do exactly that or you can do x to get rid of any of them, if you don't mind you can go in and you can still query information so you can see again Very similarly, we can filter based on several different fields within our database, some of which we have created and some which are normal default fields that are created as part of a typical database for WordPress, so item ID, item name customer image, company bio etc. if Let's say for example we want the company to be equal to and then we can choose for example Apple and then you can choose the type where it will be floating integer and so on once You've done that and you've set up all your sorts, your filters and your states to get the data you want from there.

You can simply press Apply and then a csv file will download with that data configured the way you have chosen using these filters and queries etc. that's a really useful way to generate your data, let's cancel that, although we're happy with all I'm going to do now is go through the process of how we can create a file to display the data that we just created now if you're familiar with the jet engine, you will know that to generate this type of information we need to create a list, so let's just create a new list andfrom there we will add a new one and we will choose what is our listing source, we open it and you can see that we have a new entry if you use the jet engine called custom content type, we will select it and then we can choose the content type that we want for our clients and we're going to call this client Elementor, that's perfectly fine and we'll tell it create listing item, so now once that's done we can start working with Elementor and create the layout that we want to use to display each of the individual records of our listing for each of our clients. so let's 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're going to shrink it down a little bit and on the left side we're going to place an image, so we're just going to scroll down to the bottom, we're going to say we want to use a dynamic image of the list items, we're going to drag and drop it there and then will be set by default. what you thinklet's write what would be the post thumbnail now because this is a custom content type, the post thumbnail is not going to work, we need to tell it to reference the correct data from our custom content type to do it, let's just deploy this. list and you can see the content type client and then we have the image option available there, so obviously it knows to look for an image because that is the widget that we are putting there, so it will subfilter the information to show you only the fields related to the image, so we say client image and see that the first image is included, so so far everything is working correctly.

We can set any type of parameters we want within the linked images, etc., although we'll leave them as they are for now. just to keep things really simple, now let's get out of this, we'll scroll down to these options for list items, we'll just add a dynamic field, we'll put it in the right column and that's the first piece of information, so again we need to change this font. You can see we have a variety of different options, change the object field and we're going to scroll down until we get to the content type client and then we can get all the relevant data from there, so we want to get the name, so we do it we'll go in and you'll see there's his name, so we can repeat it now, so the easiest way is going to be to duplicate this, so we'll just duplicate that option.

Go back and change the data. Now we don't want the name. This time we are going to say the company they work for and do the same thing again. We're just going to duplicate this for the third time and from there we're going to change that now to the bio, so now we've collected all the key information from our custom content type, so now I can go ahead and style this however I want. So for example, if I wanted to set the name at the top, we can do that in the style option and from there I can use any of the normal options, so all I'm going to do is quickly change the font here and I'll just set this as popups, we'll increase the size a little bit now.

Obviously I'm not being too picky about the look of all this. It's better, so now I'm just demonstrating how this feature works. I'm leaving quickly. to apply a little bit of styling to this so that everything looks nice and clean and tidy for our listing now that we created the listing for our template we can publish this and then we're ready we can start using this in our templates and our pages where we want to display our custom list so I go back to my pages and I have created a blank page called customer list and we are going to edit this with Elementor and now we are going to place our new custom list so what we need to do is scroll to down until we find our list grid, let's drag and drop it onto our page, as you can see, it works the same as before, we just have to tell it which list grid we want to use, so currently we just select, so we're going to say we want the client loop and there are our client loops that are extracted into our template now obviously it looks a little bit terrible because we need to change the columns in this example to one and now we have our basic listing there and we have all the controls that we normally expect have as part of editing our listings so we can control the listing number.

You know all those kinds of useful bits. information, we can even query our new content types, you can see the content types query, we could expand this and we could just add a new query, so we'll just say query settings and now we can choose what those settings will be. we can choose an offset we can choose a state we can choose the order or we can choose to query so let's say we want to query this I'm going to add a new query and we're just going to change this we're going to say company name equals or we'll just say apple and we'll do it, we'll leave it set to automatic and we'll apply it and now you can see it's just showing us John Doe, who works for Apple. if we want, we can edit this query settings and let's 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 show everyone hit apply and now everyone is back in our custom list, so at this basic level is how we can set up custom content types, how we can display them and if we want to query. them inside the actual listing, but you might notice this kind of stuff, let's just refresh this page and preview it once you get the preview, we have a nice listing, but we can't click on anything, it can't be selected nothing and even if we were.

I have nowhere to go because these custom content types are basically just list items like the ones we've seen in front of us, but you can make them clickable and you can have additional information so we can have something really streamlined. We have a list of clients just as they named the company and then we can click to enter and see a lot more information, but to do that we need to change a few things about our custom content type, so go back to our custom content type list and do it. What we're going to do is we're going to open up a backup of our client section and we're going to enable an option and that's going to open up a few more things that we can do so that it has a single page if Remember at the beginning of the video I said we're going to come back to this and that's what What am I going to do now to enable it?

You can see that now three additional fields are opened related to the post type title field and content field, so if we open this, you will be able to see all the different post types and things that are part of WordPress are available to we. For this example, we'll set the related post type to be post because we want to. treat this as if it were just a post so it will work very similarly and I'll explain why this is important once we've set things up and I'll show you the impact it has on how we work so we'll set this up to be posts and then you can set your title field if you want, so let's say our title field will be name and our content field will be bio, so just consider these to be like the normal WordPress title and fields. normal WordPress content.

We are simply assigning those entities to our custom content type. Once that's done, we're done, so let's update that type of content. Now you might notice that nothing has really changed, so let me go back now to our client, so we're going to add a new client, so let's 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 we'll call her Betty Rubble for no other reason, so why not set them to Google and we'll just set our bio and leave that information? there and we'll just add our new client, so now we have three clients, so when we come back, you can see that now there are our three clients because we have associated our custom content type to have that additional page type and link it to the posts, yes we take a look at the posts section, you'll see we now have Betty Rumble listed there, click and open, most of the basic information is in the featured image, it's obviously blank because we haven't set up a featured image.

We don't have anything associated with it except the content there and the name that's there, which are those two fields that we assigned when we set up this link, so now that we've done that it means we can create a details page, in other words, we can have a list like we've already created, which you can see here and we can click on it and then review it and see more details and link it to a custom template that will display a single post which we can then link to our custom content types, so now what we need to do is create that template, so we'll go to the Elementor templates section and the theme builder and from there we'll just create a new single post. our options on the sides we're going to say we want to add a new single post and once we've done that we can link everything so we're just going to get rid of this, close this and start with a blank space. whiteboard like before, I'm not going to waste time making this look pretty, I just want to show you from a functionality standpoint, okay, so what we're going to do is add a new section and there we'll just put two simple columns and we'll add some space above and below and now we can simply start building our template, so we'll go back to our widgets, we'll just place an image inside.

We'll go down and choose dynamic labels and from there we can scroll down. You can see that in jet engine we have a custom content image type, select it and then click on the little wrench icon like we would any other time, choose the client image and give it a second. or so and you can see there's our client's image and now we can just go in and fill out the additional information that we want, so we're going to take a dynamic field, as you can see, that's included in the post term and now it's included in the title. okay, you can use it if you want, because when we move to the second stage, where we have these type of single post pages set up for us, it has been assigned to the title, however, what we could do is we can. change that if we wanted to and we could go down to our custom content type and choose the name from there, they'll both do the same thing and you'll decide which way you'd prefer to do it, so now we can do that. 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 thing one more time and we'll just say duplicate that and we'll change that from the bio and this time we'll set it to company now obviously you can still do the same things, you can filter the output of your field or customize the output of your field and we can say two points of the company there, you can design all this in the usual way.

Wait all those things that you were used to doing with jet engine and probably with Elementor Pro as well, so now what we're going to do is publish this, we can publish it now and we can set the necessary conditions so that We'll just set this when you see all the normal options there. We will just say that they will be publications. It doesn't bother me too much. I just want to demonstrate how we make this work. Save and close. Now we have created that template so what we need to do now is go back to our listing and make the image links clickable without doing that then obviously nothing will happen so go back to my listings as part of the jet engine and we will be. we're going to edit our client loop with Elementor and once we've done that, we're just going to select the image so it's clickable, then we're going to go down and say linked image and we're just going to say yes, and then I got the source of your link In other words, where is the link coming from?

What data will be passed to the details page? You can see that we have a unique post ID. Now you can find this is in the permalink to get started and both should. works but I would definitely recommend using the unique post id because it associates that unique post with thisparticular list item for our custom content type and that's all you need to do now, if we hit refresh there, we'll come back. to our test site and we'll take a look at Betty Rubble. That's a link so we can see it, but you'll see that Jane Doe and John Doe are not links and that's because we set them before creating. that link with the posts, which means that no posts have been created for those two individual posts, so it's always worth keeping that in mind when you're setting up everything you need to think about ahead of time to decide if I'm going to use posts to have a detailed page.

Or do I just want to have a very simplistic list, at which point it doesn't need to be created and you can just rely on the custom content types on their own? A little bit of planning will be a big help to you when you're working with these tools, okay, let's click on Betty Rubble and we'll check it out and you can see there's our details page. Now everything is set up correctly and that's pretty much what I wanted to cover in this video. I've only scratched the surface of where we are with custom content types at the moment and I know there's a lot more in the works with the next release and the next release, so if this interests you check it out and obviously if not.

See where it goes, stay tuned because I think there will be some interesting features in the future. There's one thing I want to do before we wrap everything up and that's just to say that we can use this with smart jet filters and jet search. If you'd like to see a video about that, let me know in the comments section below and I'm sure between me and crockerblock we can create content to show you exactly how you can link custom content types with Jet Smart. filters and search options to create something a little more powerful than what you're seeing now, which should help demonstrate how custom content types work right now.

Hopefully, this has piqued your interest and you're ready to start trying them out. See for yourself now, if you found this video helpful, hit the like button and hit the subscribe button below and while you're there why not click the bell icon to get notified when New videos added to the channel, as always? Applicable links are in the description below my name is paul c until next time take care