Crocoblock Jet Engine Tutorial - Beginners Guide Part 1

over the next couple of weeks i'm going to take you through all the key tools provided by croco blocks jet engine plug-in i'll cover the basics of getting started with jet engine i'll also cover the core tools how to get started with them and what the terminology means and much much more now if you're not sure what jet engine is for or what dynamic content is when it comes to wordpress i would suggest watching this video first and then come back to this video with a solid understanding of dynamic content and dynamic design okay to follow along with this tutorial i would suggest you have the following installed on a clean copy of wordpress the latest version of jet engine a copy of elementor and elementor pro although you can do most of what i'll cover in gutenberg i will also cover that in this future video on its own and also the hello theme got all that ticked off cool let's just get the ball rolling right now now once you've gone ahead and installed jet engine you're going to have a new entry in your dashboard under jet engine and inside there you can see there are a lot of options as i've said at the top of this video we're not going to be covering everything in this video we're going to be covering all of these options over a series of videos to make them accessible to everybody and allow you to jump in and jump out as and when you see fit what we are going to concentrate on today though is jet engine itself the core kind of function so if we open up jet engine inside there you'll see we have a range of different tools modules skin manager those kinds of things let me just quickly run through what they are if we take a look at the available modules you can see we have a selection currently of about 12 10 or 12 different options inside there you'll also notice that some of these have different icons associated with them you can see we have the elementor icon which means that elementor is required to use this or we have the option for blocks which is part of gutenberg which basically means that if you've got things like this qr code you can use that either with elementor or with gutenberg if you see gutenberg is grayed out we can't use gutenberg for that particular feature now as jet engine is expanding we are finding that there's various additional tools that are coming on board that allow you to get a lot more creative and actually use gutenberg over elementor so if you don't want to use elementor you want to rely upon blocks as part of gutenberg and keep things clean and simple but still want to use jet engine you can do that with a lot of the features so you can see there are a lot of options inside here all of these are currently disabled and as we go through this series of videos i will start to enable a lot more of these and you can see how they work but for now we're going to leave those all disabled under the skins manager you can see we can import or export skins and we can also deal with presets we're not going to worry about that in this particular video it's not that important for what we want to cover you've also got the short code generator which again is a bit more of an advanced feature which allows us to create custom short codes to use various different features that are part of jet engine itself and finally we have glossaries which is a fairly new feature you can see i currently already have a glossary inside you and if i expand this you can see what we have now i'm going to go to glossaries in their own dedicated video much the same as a lot of the other features we have but let me just briefly tell you what a glossary is if you were dealing with something like a select field so for example a drop down list or a checkbox list for example in this case we've got property features so things like does it have a garage a swimming pool tennis court and so on instead of having to use those and input those manually every time you create a front-end form every time you create something to do with jet engine fields in the dashboard various different places including filters and searches you don't want to have to go through the time and effort of replicating everything and making sure that all of the information is identical across all those different use cases the new glossaries feature means we have one centralized location inside jet engine glossaries that you can see here that allows us to very easily be able to create a centralized location where we can easily add remove change update and that will be reflected throughout everywhere that uses that glossary feature we will briefly touch upon this in this video but it will have its own dedicated tutorial to give you more details one of the main things the tool like jet engine gives us is the ability to very easily add custom post types as well as adding custom meta fields to those post types we're not restricted to those features though but let's just stick with those for now accessing creating and editing post types with jet engine is very easy all we need to do is commit the jet engine itself and we're going to choose the option for post types so let's open that up and this allows us now to create our first custom post type so we're going to do is we're going to add new and inside there we can now break this down into five distinct sections not all of those are required but i am going to cover each one of these just so you get an idea of how to get started and we'll take a practical example as well so post type name what are we going to call this specific custom post type for our example today we're going to call this properties and then underneath we've got the post type slug now if you've been using wordpress for any amount of time you know you've got the thing called the slug and the slug is basically just the url that's going to be used to go into that particular section in this example properties so you'd have your domain for example my website domain.com forward slash and then properties and that's what this post type slug is for now it's automatically generated when we're working with jet engine however you're not restricted to that you can put whatever you want in there the only thing you need to make sure is it does conform to these sort of restrictions which means that you show you contain letters numbers and underscore or dash characters so don't have spaces in there always separate those with an underscore or a dash otherwise you can run into some problems so it basically works in a very similar fashion to what you have with any kind of post type slug that's part of wordpress we can then enable the edit post type metabox link and this adds the what i just said to the post edit page we're going to leave that disabled we're not going to worry about that next up we have the labels now if you're coming over from something like advanced custom fields or custom post type ui or tool set or any of those kinds of tools you're probably familiar with setting up custom post types and also having the option to create custom labels the labels are just basically what you'll see in the left-hand column or in various different parts of the interface in the dashboard of wordpress so for example we can if we want to put in a custom singular name we can put in a custom text for adding new and also we can come through and we can see view items you can edit the text on here to whatever you want or you can leave them completely blank and it will work with the default values that wordpress assigns to it so for example when we take a look at pages you can see we've got all pages and add new and if we come over to posts you can see we've got all posts and add new we've also got things like categories for taxonomies and tags and so on so if you want to customize those for your new custom post type simply drop the relevant value inside the relevant box i'm going to leave those as they are because they don't need to be updated we're going to go with those defaults i'm going to scroll right the way down and you can see we now have advanced settings let's open up our advanced settings again you can leave this pretty much as it is it's set up for most use cases so don't feel like you need to do things inside you so you can see we can do various things like controlling whether this custom post that we're creating is going to be a public post time you may want to restrict access to this from authors and readers and therefore make it something that's dashboard admin only you could do that inside sure by making this not public basically do you want to exclude this from the search option is it publicly queryable do you want to show inside the admin user interface all those kinds of things so again leave these as they are unless you have a specific use case where you need to change something most cases these are going to be perfectly fine you can see we've got capability type for example and we've got this set to post but you can set these things like pages and so on and this will affect the different kinds of capabilities that will be assigned to it and this can also be useful if you have multiple different user roles and you want to define what kind of capability those user roles can have when it comes to editing content you might want to change things inside you that ties in with some kind of user role setup that you have important features we do need to take note of has archive one of the most common problems when you're trying to create a archive using cinematic elementor pro and you find that your custom archive isn't listed or you can't create one and apply the conditions to it generally it's a case that the archive option is disabled and therefore elementor cannot create and assign conditions to an archive that effectively it doesn't see hierarchical if you want to have a hierarchy set inside your custom post type you can set that up inside you if you want to you can also do things like control the menu position so we'll set this to be position one that will go at the top of our left hand navigation you can also change the menu icon inside here so we're going to set this to be a house because it's kind of a bit more in keeping with properties and then we've got the supports option now this is incredibly useful when you create any kind of custom post type and this isn't restricted to jet engine this works pretty much across the board of any kind of tools that allow you to create custom post types in wordpress what this allows you to do is choose what are the inbuilt features you have in wordpress itself that it can use as default so at the moment you can see this is supporting the title and the editor so the title is the name of our custom post type and the editor is basically the content area now there's going to be cases where you don't need to have things like the content editor the title and so on and you can disable those by clicking on the x or you may want to add additional features in that you do want to use so for example in this case we want to include the featured image and we also may want to include something like the excerpt all we need to do is click to open up the options you can see all those options inside you and you should be familiar with these because these make up a typical wordpress post type on a standard copy of wordpress so we're going to say we want the thumbnail featured image you can see that now adds that in and we can also come in and say we want to have something like the excerpt option so now any custom post we create inside the properties section we'll have these four features as default and then any other features we add through meta fields will be added on to those key four features now that we've seen how to create a new post type let's go ahead and add some meta feels to it as well as make the post listing a lot more useful now speaking of meta feels this is the next set of options that we have and this is where we can start to create our custom fields and apply those to our custom post time so let's open this up and you can see inside here we have a range of different options and these are context sensitive options so as you choose different kinds of field types and we have a lot of different options inside here you will see different options underneath that i'm not going to go through every single one of these because i think it's a little overkill but once you kind of get a feel for it and you start to use these fields you'll be able to fill out what you think is needed and not everything is required so let's just take a look at creating some initial content so let's start off with a really simple option let's just set up the price field now so we're going to do is we're going to drop in the name for this the label and this label is basically just a visual representation what's more important is the name id and that's what we'll use when you start creating template files to output the data that you want that's created as a custom meta field much the same as we saw with the slug once we click inside there it will automatically add in what it thinks is going to be based upon the label you've assigned again you can't use spaces or anything other than a number or a letter and if you have a space in there you have to replace that with a dash or an underscore so just bear that in mind the object type we have four options inside you and we're going to take a look at two or three of these today we're not going to take a look at the end points and end points a little bit more advanced we are going to take a look though at fields tabs and accordions now kicking things off with a field a field is exactly as you would expect it to be it's just the standard bog standard meta field and that's exactly what we're creating now so this price is a standard field we can then choose what field type it is in other words what content is it going to contain and as you can see jet engine currently gives us quite a lot of different options for this example because it's going to be a price therefore it's going to be numeric we're simply going to come down and set this to be a number field once you choose that you can see now this opens up some different context based options so a minimum and a maximum value if you want to apply a step value inside there those kinds of things if you want to drop descriptions in which can be useful if you have complex forms or things that you think people will just want some clarification on what they need to insert into that particular form field you can drop a description inside there you can also control the field width and as you can see we have a range of different options to specify how wide the field is so smaller fields generally don't require entire 100 you can tidy things up as you see fit default value if you want to drop a default value inside there you can do and if you want to apply conditional logic you can do that here a conditional logic just basically allows us to specify whether this particular field will be available to us based upon a rule if we click on new rule you can see we can do things like choose a field so in other words we could have a checkbox field that if that's checked for some reason it then opens up some extra fields that are set up to be controlled by conditional logic we can just set that up using this condition and you can see we've got the field we can choose what field type when we create more fields the operator and what value has to be met for our example today we don't require any conditional logic but it is incredibly simple the setup and can be really useful when you have long or large comprehensive forms that require to be filled in and you just want to make sure that only the relevant data is going to be filled in based upon various different conditions okay let's uncheck that let's just have a quick look through here and what we're going to do is we're going to set this up and say we're happy with that we're going to say we're going to add a new meta field in once we do that we can if we want to close this first one down just to compact it give us a little bit more room on top of that we also have the option before we take a look at this next field to duplicate this and also to delete it and finally we have the option to move this around inside the stacking order so you might add a field in a little later and require that to be in a different position you can just drag and drop these elements around really easy to do okay so now we've done our price let's do our next field which is going to be location and we're just going to put in location you can see that will automatically create the name and id field again is perfectly fine field type for this example text is fine we just want a plain old vanilla text box and what we're going to do is we're going to leave everything inside there and we're just going to say add another meta field in this time we're going to choose to the option for the number of bedrooms so we're going to just type in bedroom put a capital at the beginning just to keep it all nice and neat and tidy there we go again we're going to set this to be a numeric option and minimum value we're going to set to be one we're not going to set any maximum because obviously you're pretty much if you're going to sell a house you want to have at least one bedroom in it otherwise it's not really much of a house again we can set any values we want inside there so for this example we're going to set the field width to be 33 percent and we're going to add another meta field in this time this one's going to be for bathrooms so we're going to just repeat the same process again underneath come down choose set this to be number minimum value we want to have at least one bathroom in there and we're going to set this to be 33 as well and then finally we're going to add one more meta field inside that little group and this one is going to be for ensuites you can see that automatically replaces where i put the space in the label with a little dash so that's perfectly fine it's almost doing it for us and again we're going to set this to be number and we're not going to set any minimum maximum value on there but we are going to set this to be 33 okay so we've now created a couple of fields but we want to sort of group these together because we want to add more fields in that just don't really kind of fit into this particular group so can we do that inside jet engine absolutely it's really actually quite simple let's just add a new meta field and this takes us back to what we talked about a little earlier let's call this basic information again let automatically generate that but this time we're going to change the object type from field and this time we're going to choose the option for tab and you can see now that changes all the information we know have no ability to put in extra information because it's just a tab it's just a placeholder that kind of encompasses the next group of meta fields we can choose between a horizontal and a vertical layout if we want to and now what we need to do is actually reposition this because at the moment our basic information is sitting underneath the tab will be created at this point and none of these options would sit inside that tab so we need to do is just simply drag this up to the top or wherever you actually want to position it drop it there and you can see that automatically indents all of the other meta fields are going to sit inside that particular tab so now we've done that let's add another tab in doing exactly the same thing again we'll just select this option we're going to come in and we're going to say this is going to be features again we'll let that pre-fill out the name and id we're going to set this to tab again and as you can see that now pushes it back so no longer is it indented inside you because jet engine is smart enough to know that you're going to create a new tab therefore it's not going to be part of this first tab so there's our second tab we're going to set this to be horizontal as well and now we're going to create another field group inside here so let's just say new meta field this time we're going to call this property features and we're going to just select underneath automatically pre-fill that out for us field type is perfectly fine and we're going to set this to be a different option this is going to be a check box allows us to create a group of check boxes so people can choose whatever features are available for this particular property so let's just open this field type up and we're going to come down and choose the option for checkbox again now you see we get a whole different range of options so let's take a quick look allow custom do we want whoever's going to be able to add properties in and apply details to them to be able to automatically add their own custom options into this particular property features section if you want to you can enable that option and then it'll allow them to save the custom fields as well so you could have you wouldn't have to do that round tripping kind of thing to go back and forth and add extra features in up to you if you want to sort of allow this i would depend upon the kind of user levels user roles and access you wanted to give them now the next thing is we can choose to get the options from a glossary now even though we haven't covered glossaries in much detail we've just brushed upon it if i wanted to and we will take a look at this in a moment i can use the glossary i previously created and pull that data in or if i don't think i want to do that i have no real need for it i can simply come in and add a new field option manually so you can see we can just come in we can set the option value the label and whether this is a selected option by default so you may have certain things that are automatically selected you want people to uncheck them or you could just set this option to be enabled and therefore that's automatically checked we're going to do that let's just delete this from here and let's just say i've already created that glossary so i'm going to say i want to get the options from that glossary so now i'm going to open this up and you can see now all i need to do is choose what glossary i want to use now i've already created one so i'm going to just choose the property feature glossary from there select that and that's now enabled i can now choose to save this as an array so you can see this if this option is enabled checked values will be stored as plain php in an array in other words it just means each of the checked values will be separated by a comma and there's various different reasons for doing that so if we're going to allow a front-end form which is something we will take a look at in a future video we can enable this and allow that to be associated with it description as we've already seen if you want to drop a description in you can do field width we don't need to worry about that and conditional logic is not something we want to worry about either okay let's add one more meta field into this section and we're going to do is we're going to call this one feature description we'll simply set the field type to be wysiwyg so this allows us to have a wysiwyg editor so we can have a little bit of formatting and styling and so on and yep everything else looks fine in there so let's just close these up a second just so we can see what we're doing just a little better in our organization so currently we have two different tabs inside here the basic information with all these options and the features with these two options we're going to do is we're going to add one more tab in with one more meta field so let's just add that tab in and we're going to call this gallery and we're going to come down set this to be a tab set this to be horizontal and we're going to close that down i'm going to add in our new field and we're just going to call this image gallery so this is for our additional images of the property allows us to keep it all nice and simple and organized and we're going to do is field type we're going to just choose the option for media gallery there we go gallery value format you can see we can choose various different options inside there so we're going to just say we want the media id and field width is perfectly fine so now we're going to do is we're going to close all that down so let's take a quick look we've got our basic information tab with all the custom fields inside there we've got the features tab with our property features which is a checkbox and also a wysiwyg description and finally we have our gallery with an image gallery now there are a couple of ways in which we can make our new post type list a lot more useful and this is where admin columns comes in super handy we'll now take a look at adding some of our custom meta fields to this page as well as adding one of the main wordpress meta fields as well as adding the ability to sort our custom data before we do take a look at actually starting setting up our admin consoles let's just take a quick example of what admin columns actually are in context with wordpress so this is the pages section this gives us a listing of all the different pages on our site and it also gives us four different columns these are admin columns we've got the title the author any comments that associated with it or number count in this case and the date that this particular page was created or last modified these are basically admin columns so when we create our new custom post type using jet engine we don't really have many options inside there we'll just start off with the title which is going to be the name of the property and the date that it was posted or published which is perfectly fine but we've also got a lot more information inside you that would be really useful to allow us to filter and search and find the relevant types of properties so it makes sense to actually go ahead and add some of that information in it would also be useful to have a featured image thumbnail so we can see the property that we're looking for quick and easy visual way of finding that info so let's have a look how we can do that the admin column section allows us to add new columns in so this is basically where we choose the admin column this can kind of lead to a bit of confusion because at first it can seem kind of daunting you might not necessarily know how to go about doing various different things or how to reference some key information for example the featured image it's not immediately relevant so let me just show you first of all how to do that we'll start off with the featured image so we'll just call it this image then we've got the type we currently have four different types of admin column fields and where we can source that information from meta value is basically any custom meta field we've created so for example our property features the number of bathrooms those kinds of things the post terms is if we create in taxonomies we can reference a taxonomy so when you start to group your custom post types together for example when we're keeping with the analogy of properties you might have the property type for example houses apartments condominiums those kinds of things we can reference and pull those in as well which can be incredibly useful post id which is a specific post id kind of column and custom callback which allows us to reference various different features that are part of wordpress itself and that's where we're going to start off we're going to choose the option for custom callback and then it says what callback do you want to use well this isn't something that most of us would really know too much about and the nice thing is with jet engine they've already created an easy way of hospital to reference a lot of normal standard wordpress features without having to remember or type anything in all we need to do is choose this select from an existing callbacks and you can see this now gives us a selection of common callbacks now hopefully this will be expanded upon as more things come on board and we have more features but for now it gives us most of the things that we would actually want and need so we want to put in the featured image so we can do that you can see we've got jet engine custom cb render image for example and you've got things like custom cb date and it gives us information about it next to it well let's just choose the right one which is going to be this option which is the c b render image we'll select that option and that says set the field thumbnail is perfectly fine we can change that if we want to put something else inside there and the size a numeric value this is just a pixel value for the size of that thumbnail that's going to be displayed and this is a square value so if you've got rectangular it doesn't matter it's still going to show it as a square so 100 pixels it's probably a little on the large side so let's just say we'll set that to something like 75 and we'll just hit apply now what we can do is we can choose the column order and any prefix or suffix and if we want to make certain things sortable so for this example column order we want this to be the very first column inside our custom admin dashboard so we're going to set one inside there no prefix or suffix is required and we can't make this sortable because at the end of the day it's just an image it doesn't make sense to try to sort that so there's our first option so we're going to just minimize that let's add another one in and this time we're going to just create something from one of our custom meta fields so first thing we want to do is put the price in there so let's just say we'll put price and we'll put the currency that's going to be used inside there now we've got the type metavalue is perfectly fine because this is coming from one of our custom meta fields so we need to do is put in the field name now if you're not sure what the field name is let's just simply scroll back up until we find the price field and you can see if we expand that out there's the name and the id which is price we can simply copy that from there scroll back down until we get to our admin columns and we're simply going to put that into the field name and that's all we need to do next step we can drop in the column order so we'll say we want this to be the third field for example a prefix is basically when the values are going to be output into the column not the title of the column the column itself the values what do you want to put before it or if you want to use a suffix you can put that after that so we're going to say we're going to put the pound sign in there because we're dealing with the currency of uk pounds we're not going to worry about a suffix and is sortable it makes sense to be able to sort these into the pricing so let's just say yes we want to make that sortable and is it a numeric field because we've set this up as a numeric field again if we scroll back up until we find this you can see we've set this to be a number field we can just simply tell jet engine that this is a numeric field and there we go so we've now set that up inside there so i'm going to do the same thing again now for two more fields doing exactly the same as what i've done with the price field this time for bedrooms and bathrooms [Music] and there we go there's our four admin columns all set up so the final thing we need to do is simply click on add post type to commit all the things we've just done and create a new custom post type let's do that and next up we'll take a look now we've set things up let's look over the end result add some data and see how everything works together with our custom posts i've created you can see we have a new section in our dashboard called properties and inside there we've got properties and add new properties will list all the properties and add new as its name suggests allows us to add a new property in so let's take a look at the properties listing itself this is where we've got a list of all the properties currently don't have any but you can see the custom fields we created in the custom admin columns that we added in are now listed inside here so things like the image the title the price the bedrooms the date the bathrooms and so on so we can reorder these if we want to for example dates and bathrooms is in the wrong order so all we need to do to change that is come back into jet engine into our post types and inside there there's properties we can click to edit that and we can simply come down until we get to our admin columns and we can adjust any of the values inside here so for example our bathrooms is currently has no value set in there whereas bedrooms is set to be column order four what we could do is now we can simply come back into bathrooms and we can set the column order in there to be five for example update our post type hop back over to our properties and just simply refresh this and you see now date is at the end so nothing we do is written in stone we can very easily come back in and make changes to it reorder things change the names the descriptions all those kinds of things whatever we want to change okay so now we've seen this let's take a look at adding a new property and see the new custom fields that we added into our custom post time so we have is the normal gutenberg editor at the top you can see we've got the title we've also got the content which is the normal default fields we spoke about if we take a look on the right hand side we've got the featured image option and the excerpt option so these are the features that we enabled when we created our custom post type so under our settings section you can see there's the three tabs we created the basic information the features and the gallery so all those are inside there now you can see i've got a spelling mistake or i've got a capitalization mistake at the beginning of basic information as with all these things we can simply go back in and update the details let's come back inside here let's open up this section we'll put the capital back in there which is missing we'll update our post type hop back over and refresh our page and we should see there's our spelling or our grammatic error all sorted out so now we can do is we can simply go through and fill out these boxes to create and add a new property so i'm going to quickly go ahead and do exactly that i'm not going to bore you by what making you watch me do it i'm gonna speed everything up just so we can get some information in there but you can still see what i'm doing [Music] so there's all the details inserted in all we need to do is hit publish and we'll just confirm this and that's our first property added into jet engine so let's come back out of this and you can see now there's our featured image there's the name of the property the price the number of bedrooms bathrooms and the date it was published so everything is listed inside your using jet engine and all the core features we have as part of jet engine itself i've already gone ahead added another property in and i'm just going to demonstrate some of the other things we set up as part of our admin columns before we wrap this up so you can see our price bedrooms and bathrooms if i hover over those i get a little arrow pointing up what i can do is i can click on this and then we can sort these based upon the price the bedrooms for example you can see we can set those to be ascending or descending and the same goes with the bathrooms so we can very easily use these to sort based upon the price the number of bathrooms in our bedrooms and so on to the dashboard of wordpress without a custom post type really easy to set up but worth taking the time to go ahead and actually do this and make various different columns sortable because it can just make finding things in the dashboard so much quicker and easier now you have a solid foundation in using croco block jet engine's basic functions you should be well on your way to building dynamic websites with custom post types and custom meta fields now to continue learning click this link next it'll help you get so much more out of jet engine now if you found this video useful please consider hitting that thumbs up button it really does help me out however if you didn't find the video useful well feel free to hit the thumbs down button twice as that seems to work pretty well too my name is paul c this is wp tats and until next time take

Channel: WPTuts

Views: 41,582

Keywords: WPTuts, crocoblock jet engine tutorial, crocoblock jet engine, jet engine elementor, jet engine relationships, jet engine wordpress, wptuts jet engine, crocoblock elementor, crocoblock tutorial, dynamic wordpress website tutorial, wordpress tutorial for beginners, wordpress website tutorial, custom post type, dynamic website in wordpress, dynamic wordpress, dynamic wordpress page, dynamic wordpress website

Id: OlNyXXC88S0

Length: 32min 14sec (1934 seconds)

Published: Tue Jun 01 2021