Crocoblock Jet Engine 2.2 - Front End Forms & User Profiles

so earlier this week Krakow bloc released an major update to jet engine this now releases 2.2 and will that they brought some of those much-needed features that a lot of people have been requested including myself that's the ability to front-end to upload content so you can have forms to upload content at the front end that are not restricted like they used to be and the second thing is the ability to actually have actually use a control panel in this video I'm gonna try to give you a brief overview of these new features and in a future video where I've kind of got my head around this a little bit better I'll give you a lot more in-depth tutorial and show you how you can integrate this into your entire design process so join me as I kind of take a swig say a second walk through this one thing to bear in mind this is the first release this is two point two zero so there are potentially some bugs and some issues some things that I've come across that the developers are gonna take a look at releasing an update in the next day or two so hopefully when you see this these are either going to be fixed or they'll be fixed in the next day or two but if you come across anything let me know in the comment section below any problems you've found any quirks anything that just doesn't work as you would expect it to and I'll try and pass that on to the developers and see if we can get some fixes pushed out quite quickly without out the way let's just jump over into the dashboard now and let me take you through and show you how these new updates to jet engine impact the way that we can start creating more dynamic content with this plugin now I've already created a very simple kind of setup to use with this particular video and all I've done is created a simple taxonomy we've got a couple of templates to display the archive on a single post Liston's we've got a listing set up so all these things are the kind of thing you'd expect to do as normal when you're working with jet engine if you'd like to see the complete video on how it done all of this put a link in the description below and drop a card in the corner now so you can take a look at that and you can see exactly how this is all set up but as long as you have some basic sort of jet engine set up in there you've got some data some custom fields and so on you can sort of harness the power of this kind of feature quite easily so first thing we do is we've got to enable this particular function so to the dashboard now by default jet engine has a lot more functionality than you may be aware of but you have to activate it so we come to the jet engine section inside the dashboard and we come to the first entry which is jet engine once you open that up you can see we've got a lot of different modules we can enable now what we need to do is enable some of these to make sure that we can start working with these new features that are part of jet engine 2.2 so first of all I want to make sure we've got the forms enabled so we can start to harness the functionality therefore this front end or posting and editing and things along those lines listing grid injections are not gonna worry about that at the moment you can say we want the profile builder as well now once we hit save on there we now have those modules enabled so you see it says one of the activated modules needs to be refreshed and blah blah blah so we've done that it's that's the first part of it next thing to do is gonna come over to the skins manager now inside here you can see we've got import and export skins which is perfectly fine so this is import new post type stacked Ibiza mist ins items for a JSON file so if you want to transfer data back of for between sites you could use this function to get import and export from there we also have input configuration parts from preset so if we click and open that up you can see we have some options now that are kind of tied in to this profile builder side of things so it says use a profile with editable content we could import that an editable user settings page for the user profile we could import that as well so we start off with the user profile and editable content we'll click on import on there so this says now this is imported various different things for us main with the posts created by the current user an edit post and a new post section so the final thing we need to do is update the permalink settings so this is something you have to do but only with this particular import and only the first time you do it so we click on permalink settings all we need to do is come down and hit Save Changes that's it that's all you've got to do so we're gonna come back into jet engine back in to the jet engine first option come back in to the skins manager back into presets and they say editable use the settings page with a user profile we're going to hit import on the as well and that's gonna import the release different set in CC that tells us that's done it it's created a user setting sub page for the account and so on and so forth now I'll take a look at those in a little bit so you'll see how that side of things works so let's click on close we've now done the basic setup so we can start to use these various different functions these different modules now you'll take a look underneath the jet engine section and you'll see we now have a couple of new entries we've got profile builder and we've got forms so let's just jump into the form section first of all and take a quick look inside there now you can see there are three new entries or three forms that have been set up for us as part of that import process we have edit user edit post and new post so we've got the basic set up and this will work with the normal posts that's part of WordPress it doesn't work with your custom post types this sort of things you've set up through jet engine where you've set up taxonomy and post types and so on you'd have to create those independently so if we just take a look at one of these forms let's just say we'll say new post for example we click to open that up and this takes us into the form editor now this is something you're going to get used to working with because a lot of what you do with this new functionality requires you to set up a lot of different forms like I say for input in taxonomy is custom post types and so on and the same then for editing those now the other thing to bear in mind is when you're working with jet engine 2.0 there's a lot of - and froing going on so this is something that can lead to a lot of confusion when you start working with it and this is something that I'm still working through myself like I say this this update was only released yesterday and I've had a few problems where I've been testing things out and it doesn't necessarily work in the most logical fashion to my brain your brain is probably completely different to mine but I just want to make you aware of that so if you feel some frustration when you're working through this don't think that you're alone it is something that does take a little bit of getting used to breath in once you get your head around the process that's involved it'll be pretty simple and straightforward like I say there is a lot of tooling throwing now before we move on and start working some other set let's take a quick look at how these forms are broken down you've got the field settings now these are basically the fields that make up your form so you have text fields media fields you can have WYSIWYG editors and so on you've also got a button which is going to be your submit button which will be the action for that form and by pressing that button the next thing happens these notification settings these are what happens once you trigger that form shall we say you can see with this particular form we've got insert or update post and redirect to page so it's gonna do exactly that it's gonna insert new information for new post or updated if you're editing one redirect a page then we'll just say once that action is complete then redirected through a specific page or you know what you kind of want to do and there are various different notifications that we can say that and again I think this notification settings is not really the best name because these are not necessary notifications inserting or updating data is an action in my opinion so maybe the terminology could be a little confusing and could hopefully in the future be a little bit more logical in the way that it's been set up but it's a minor gripe that's just something to bear in mind when you're working with this if you can't into thinking well this is just notifications it might cause some confusion then we've got the message settings so in other words when you do something with this form submitted for example these are the different messages that can pop up to inform the user what's going on and you can customize these or you could leave these as they are an or pretty self-explanatory you've got form successfully submitted and you get a message that says much they're the same a validation error required field is empty and so on and so forth so you can fine-tune and configure these to make sure that they say exactly what you want in whatever language you want you know whatever kind of wording you want and that's basically what makes up a form and we will come back a little later and create a form that'll show you how you use this and how you build these different aspects up okay so that's the first part of it that's the form side of things so now let's hop over into the user profile builder again let's expand the jet-engine section out don't a profile builder I didn't say there we have two individual tabs pages and account page so this is pretty self-explanatory like I say account page what page is going to be used for this if you used the little wizard that I showed you will import these settings it'll create an account page so you can use that however if you wanted to create your own and not use that sort of wizard you could do that and then simply select the page that you want for this account page section and then jet engine will no that's going to be the sort of home page for all the account settings next up we've got the user page you see and add a public page for a user list single user page and so on so these are things that if you want to you can utilize these I'm not going to cover these in detail we look at these in a future video where I can really focus on how this plug-in works in a lot more detail hide admin bar just basically means that the admin bar you'd see at the top of the page on the front end of the site is just disabled completely next up we've got the account page and this is kind of where you will customize that profile area that profile page at the moment you can see we've got main which is kind of like the Welcome the index whatever you want to call it for the account page you've got add new post edit post and user settings so these will basically take you to a page that references the form that's automatically been set up for things like adding a new post editing a post or editing your user details so that little wizard has done all of this for us but we can if we want to do it all from scratch or we can utilize that little wizard and we can create our own custom sub pages so you may want to have a page inside the account that links through and shows all of the posts that you're particularly user that you're logged in as that's done and then you can edit those or you can have another one that allows you to create and add a new post for your custom post type which is something we will take a look at do in this video so you can come in and you can use this profile builder and create as complex or as simple an account page as you want as you can see fit for the project that you're working with now before moving on now we've seen what the dashboard side of things looks like and how we can set this up let's take one more look at what it looks like on the front so this is just going to be the account page that's been set up as part of that wizard click to open it up and you can see we've got add new post and user settings and main which is basically decussate it's just your account home page for that so if we went to add new post you can see that takes us through and we can add a post thumbnail post title and post content so the basic building blocks of any kind of post if we go to user settings from there you can see we can do things like upload a profile picture we can set our email address our name and about me now obviously you can customize this if you want to with various different fields but this should give you a good idea of the basics of what you've created as part of jet engine 2.0 is used to sort of profile area okay so let's come back into the dashboard and we now need to go through and create all the different components that we need to be able to add in a new section to this now for this example we're gonna really keep it straightforward we're gonna create a new section that allows us to add a new property so we're gonna do just that let's hit save on here to make sure that anything that I've done is saved and before we move on you can see it says for authorized users what to do when a non authorized user tries to access the account page so before we sort of move on you can see you can say redirect the default WordPress login redirect to a page or show a template so this is how you can just kind of handle anyone that tries to access this page normally you preset it'd have to go through to a section says you're not logged in please log in but you can set it have to pretty much whatever you want okay so that's the user profile builder section right next thing we need to do is move on and start creating the form which is the first thing so to do that we're just going to come back over to the jet-engine section and down and choose the forms option now we need to do is click on add new and we're gonna give this a name so we're just gonna say this is gonna be the add property section so I'm gonna do is drop that into the title inside there we'll leave all these message settings as they are and as you can see we get a couple of default entries for both the field settings and also for the notification by default is going to pull in the post ID which is going to be if you're editing a post this is going to be something that will be pulled in from a link however because we're creating a new entry a new post there's not going to be a post ID so we can just remove that and to remove it you simply click on the X on the left hand side and it says are you sure and we say yeah we're happy with that we then have three options add field add submit button and add a page break now the page break is more to do with just creating sort of broken-down simpler forms where you can break them down into different pages submit button is already been added in there but if any reason you deleted that you could add it back in an add field just effectively does exactly we expect it to allows us to add a new blank field so we click on that and you see now we've got our blank field we'll drag and drop that into position we can just come in and edit that if you want to in a click on the little pencil icon or from there we can start editing all the different aspects of this particular field for our form so you can see we've got the field type field name the label and so on so we're going to do is we'll fill some of this out now you don't have to worry if you don't know the name of some of the key fields that are part of WordPress because we can assign those later and this is one of those new things that's been added into this latest iteration of jet engine and something that I've been asking for for quite some time which is the ability to reference things like the title the content and the featured image previously in the older versions you couldn't actually store those values in there so we can now which is great so we're gonna do is we're gonna change this name I'm going to set that to be property name like I say doesn't really matter what you call this we can tell it we can reference it and link it through to those key fields that are part of WordPress just a little later so the label we're gonna do the same thing in there so we're gonna just copy that from there and drop that in there if you want to put a description in you can obviously we want to set this as a required field because we need them to put in the property name then you've got placeholder you've got default visibility and so on so we can click on there you see it says for all only for logged in users only for not logged in users so if you're making a form that doesn't require a user to be logged in it's just for anybody to submit then you can set the rule up in there to make it available to anybody so it's up to you how you want to set this up I know it as it is for now because I could say this is just a demonstration but those options are there should you need them we've also got a custom CSS class if you wanted to you can assign custom classes to any or all of these fields inside your form and then you can customize those later on using the normal CSS panel inside the customizer or any other method you'd have for customizing your CSS so we've done the first field on there we can just simply come down now hit apply changes and this is something again I'm not too fussed on with this if you forget to hit apply changes especially if you come in and edit the field so you can make change let's just say you wanna change this from text to email and then we just carry on we just carry on working and then we hit publish the say the changes are not saved so bear that in mind you need to make sure that you hit apply changes to save what you've done into that particular form field okay so the next field we're going to work with is going to be the option for the WYSIWYG editor for our content the description of our property saying say add field again reorder this click on the little edit button text is perfectly fine field type is text again and we can do then is we can say we want to we can come into the text here at the top and say we want WYSIWYG this time instead of just plain text and you see that now changes the options below so these are all context sensitive for the most part there's going to be different field information depending upon the field type you choose so we'll do is we're going to call this content actually not gonna call that property description there we go do the same for the label then we'll copy that drop that inside they leave everything else as it is hit apply changes and I gotta go through now and I'm gonna add a couple of extra fields in and then we take a look at I didn't feel this a little different like a select field or something I'll come back and show you how we can set that up but I'm gonna show you the same duplication over and over again okay so I've added in all the rest of those normal text fields we're now ready to add in some different types of fields so the first one we will deal with is the featured image for this particular property so we'll do the same thing again we'll say add field we're gonna drag and drop that into position and click the edit icon from there we're gonna change the field type to media so I'm gonna come out and choose media and the field name now you can call this whatever you want we're just gonna call this thumbnail label we'll just call this featured image there we go required yes user access now this is something you can set up for who can actually upload files and you see we have three different options any registered user any user who's allowed to upload files and any user who's allowed to edit posts we're gonna set this for any registered user because I don't want any real restrictions on this other than you have to be a registered user and logged in but it's entirely up to you how you do it we will say if checked new attach will be inserted to the uploaded file we say yes we want to do that and then we've got three options for how the data is stored in our database the attachment ID the URL or combination of both for this we're going to say we want the attachment ID maximum number of files allowed now this is the thumbnail so there's only one of these so we'll say one on there and we can say at the size we want let's say five megabytes and then we can choose what file size we want to allow so we're going to say JPEGs gifs and PNG s then we've got a visibility we would say for also they say this is dealing with the visibility of this forum entry and once you've done that we say apply changes so there's our first fields like that type so next I'm going to do is we're gonna add in the gallery now this works in pretty much exactly the same way with one key exception and I'll show you that now how did you feel then position it edit it we're gonna do is again we're gonna choose media as the type change the name of this and we will call this gallery the label is going to be gallery as well now you don't need to worry too much about linking these through to their counterpart names that the meta field names which I will jump back and show you in a moment because we can kind of link these through as a little later step when we insert and update the post so don't worry too much about having all these details exactly the same as your meta feels because they're linked separately okay so we'll do is same thing again anyway the user attachment option field valid with a attachment ID maximum number of files we're gonna set this to 10 and a maximum file size to 10 megabytes we'll come down and choose the same file types everything else is going to stay the same hit apply changes so we've added in those couple of extra fields we still got a couple more to do but I want to show you one other thing before we move on the thumbnail and the gallery don't need to have full width layout in our styling so we can do is we can come over to this right-hand side and we get this little two-headed arrow I can now drag that across to get into position where I want and you can see it tells me across the grid of columns that were working with in our design exactly how much space that's going to take up so I do it exactly the same for this and you should see we can now reposition that so we've got our thumbnail and our field gallery side by side so you can easily and visually set up your form to look as good as you want in any kind of structure to get exactly what you want okay we've got two more fields to add in so we can say add another field in position this what we want and edit it now this is going to be the status of this property and we've set this up as a kind of custom select list so we're gonna do is we're going to come in and set down APIs when you say select is the option for the type field name we're gonna set this to status label we're gonna set this to property status we leave the description as it is we're gonna set everything else as it is on their required manual input is fine however if you wanted to you can see we can actually pull this from various different area so if we set up a taxonomy we could reference that taxonomy or we can use posts or we can use a meta field but we're going to keep this as a different option with a manual input we're now gonna add in our first option so our first option is that the property is available so we can set our value and our label would not do any kind of calculation so we can leave that field empty and another option in we're going to say under offer and a third and final option which is just going to be sold so there's the three different values we've got in our select field then we can drop in if we want to a placeholder which is going to be the first end every item in that select list that tells the user what to do I'm going to say please select a please choose we'll hit apply changes and that's that field setup we've got one more field we want to put in and this one is going to be for using the taxonomy so it'll say what type of property it is so we're gonna do drag that into position edit this I'm going to change this and we're gonna choose again select and this is where one of those little buggers comes in normally I would set this as a checkbox but if I do that I can't actually select any values and it doesn't assign it to the custom post type this is something I made the developers aware of and they are going to take a look at if they find there is a bug then they will fix that and push out an update they said probably tomorrow so fingers crossed this will be rectified by the time you get to see this video okay so we do is we're gonna say the property type is the field name I will say label is the same on their required is fine this time we're going to change it from manual input and we're going to say terms because we've already created that taxonomy and we can reference that now to fill out the values inside the select so select terms you can see that opens up taxonomy click on there and we're gonna say property types placeholder will simply drop in please choose again and we'll say apply changes so that set those things that we're going to do with the same as we did last time the status we're gonna drag that over to set that halfway same for the prototypes and we're just gonna position that what we want so we've now created our form the next thing we need to do is tell it what to do with that form now you can see it says send email and I would recommend that you have something like this set up because if someone is a submitting content to your website then you go to set up to be it has to be confirmed or you just want to be notified that something's been submitted to the website this send email trigger this notification is very useful and again we can simply edit this by click on the little edit icon on the right hand side and you can see we can come in it and choose exactly what's going to be set up and sent through so you can see we've got things like send mail and so on so these are the kind of actions that'll actually be triggered you've got who you want to mail it to and you can see we've got admin and we've got a kind of different options in there so that's pretty self experimentation don't need to go through all that but for this example I'm going to delete that from there and say ok and I got to create my own new notification which is just gonna be to insert or update this data so you say add notification you can see it automatically puts in send email as the default value I'm gonna click on there and we have to change this to insert update post and as you can see we have those different options if you want to update a user depending upon what the form is for what you're letting someone do then you'll choose exactly what happens with these different triggers so we'll say insert update we then got the options for what exactly are we going to insert or update where does it go now click on there and we're gonna say this goes into properties which is the custom post type I set up as part of jet engine so click on that you see then we've got the option to set the post status and this is basically saying when someone submits this content to your website what status does it get as part of WordPress click you can see we got draft pending review private and published now I would highly recommend unless this is something you do in yourself or you don't mind anybody publishing content to your website you've set this up either as draft or pending review set up an email then that gets sent through to notify you that some information has been added to the site and then confirm it to make sure everything is ok before you publish it so we're gonna set this to be pending review then underneath that we've got the field mapping and this is where we can go through and specify exactly where each of our form entries is linked through to so couple things we can do with this property name we know is going to use the title field that's part of WordPress to click on there and you can see we say post title the description is going to use the post content again one of the native fields that we've got as part of WordPress property price location thumbnail and so on well we'll come back to the property price and location in a moment we're gonna set the thumbnail to be the post thumbnail because again that's utilizing the default core functionality that's a normal post type inside WordPress so we don't need to do anything other than just map it through those built-in functions however the next thing we need to do is things like property price so going to select that and we know that's a meta feel so we're gonna click on post matter and that gives us then an empty box or the right hand size that says what exactly does that link through - this is where you need to know the names of your fields so I'm gonna come into my jet engine and I'm gonna open up my post types open up a new tab open that up in there and there's my properties if I click to expand we've got four custom fields property priced location gallery and status next to that we've got the field name property - price location and so on so these are the things that we need to use to reference those relevant fields that are part of our custom post type so I've already got this information on a screen by the side of me so I'm going to copy and paste that over so the property price is going to be property - price the location I can click and I can say the same thing again there that's a post meta so I'm gonna set that to be location thumbnail is perfectly fine the gallery gonna click will say post meta again just gonna copy these values over so you say these are just those meta field values status well status is going to be a matter against women say post property status and the final one which is going to use a taxonomy is a post term so we click on that and you can see we don't have to put anything in there we can just select from any of the custom post terms that we've got as part of WordPress click to open that up we've got categories tags and formats which are normal things you'd have as part of WordPress we've also got property types which is the custom taxonomy that I set up so that's what we're gonna choose now click on that and that's all the fields in our custom form now map through to the relevant counterparts for the data that we want to store got default fields you can set up default values inside here if you want to so something that doesn't require to be part of the form but you need that data to be inserted into your custom post type you can do that from there we're not doing that in this example but it's they should you need it so what's it there now I'm going to click apply changes and that should now have set up everything that I need if I click on publish that should now be my front end form or setup ready to start being used and referenced inside our custom panel okay so now that we've added the form or we created the form how do we start to use it so let's just jump back over into the account section and refresh this page now I've refreshed the page and as you can see our new form just doesn't show well this is we're talking about the beginning this video there's a quite a few different hoops you've got to jump through to make sure you get exactly what you need so let me just show you one of those hoops come back at the dashboard that'll come in the template section that's part of Elemento coming to the save to template section and from there we're gonna create a new template so say add new we're to set this to be a page and from there we're gonna give this a names we're gonna call this add property and say create template once you've done that we can now go through and add the relevant elements into this particular page let's get rid of this title at the top so I'm just gonna turn that off we're gonna come back in and choose the widgets so we're gonna just type in a form and you can see this is the form element that we want you can see the icons a little different and the icons for jet-engine are all different again it was one of those things I'd like to see the logo in the top right hand corner if you've seen any of my recent videos you'll see that I comment in quite a few times where you've got different plugins that add in extra widgets into the dashboard or enter element or I should say and where they put the icons in it makes life a lot easier especially when they have the same name as some native other functions so just something to bear in mind and I'd love to see the developers of jet engine and all their plugins just drop in their logo in the top right hand corner of their icon so we know exactly what we're working with anyway but that being said drop this into our page let's make a bit of space at the top and bottom so it looks a little neater I'm just gonna put in 50 pixels top and bottom so you see what it does is it says please select the form to show we've created that form so we can now go through and select it so we're says select form click on there and you see the three that are set up by default when you use our little wizard are all listed they however we want to use add property which is ours so you click on that and you see that now pulls in our form with everything showing exactly as you expect including the different messages for either successful or for an error being displayed underneath and you can then say what kind of layout you want you've got options for column and row it's up to you how you want to set those out we've also got the submit type we've got reload or we've got Ajax so you can choose which is your preferred option from those two and the final option we have is whether we want the cash they form output again up to you if you want to use that we can't obviously come in and style things and set all the various different things up one thing you will notice though is that you don't necessarily get to see all the different features that are part of your form so you don't see if it's a WYSIWYG editor you've chosen and some other different things but I say that's just from the dashboard side things of WordPress itself on the front end of the site it'll all will perfectly fine okay so let's hit publish now on this new page or this new template I should say and that's the template saves let's just jump back over the accounts page on the front-end the site and refresh and you'll see that once we do still nothing actually appears and that's because we need to tell the new profile builder that we have a new section that we want to use as part of this profile pages a count section so we need to do is come back out of this we're going to exit out of the template editor we go to template all set up and come back in the jet engine we're going to come down to profile builder a from profile builder we're gonna come into our account page tab and you can see there's the fall we took a look at earlier we're gonna click on add new sub page and click on they're gonna give this a title we're going to call this add property the slug as you can see what might fills that it this has the template select the elemental listing item template to show on a current page you're going to click on there and we're gonna say add and you can see it now filters through for any of those templates that match the keywords that we typing in so we want the add property and you can see that allows us to do that and then we take hide from menu so this page will be hidden from the profile menu but accessible via the URL so if some reason you didn't want to display it on the left hand side in this particular design but you still wanted the page to exist then you could set it up in that way for me I want this to make sure that this part of that navigation structure will hit save once we done that if we come back go to our accounts page now and refresh there's our new ad but each section so we've added that new entry into our account into our profile click an ad property and there you can see is our layout all set up now obviously some reason this isn't showing as the WYSIWYG editor but that might be my error I might not have chosen the right thing but we can see that everything is now set up the way we would expect it to we come down you can see that where we put the options in our cell for the property status they're all listed and if we take a look at the property type which is being pulled from the taxonomy you can see there's any of the items we have inside there okay so we created our form we've added it into our account section we've done all the things we needed to do with this side of things and if we add some content in now it'll go through and upload that relevant data through into our actual dashboard of our WordPress website for our properties so that's the first part of this side of things done like I say there are quite a few different hoops to jump through but when you create something like this you'll be doing the same thing time and time again so you will kind of get accustomed to it but I would like to see a much more logical way of doing this maybe something as straightforward as if you want to add a new page in you get a complete wizard that says do this then do this then do this and then once you've done those steps is added into your account page and/or your profile page whatever they kind of want to call it and everything is set up for you this to and fro in especially if you're not used to it can lead to some serious frustration as I found out myself yesterday just trying to get my head around exactly what was going on with this side of things but there we go that's how we set that those side things up let's move on I will take a look at some of the other things we can do okay so we've seen how we can insert data into the website how about editing that data well this kind of uses a very similar approach to what we just done so what we need to do is create that form that can allow us to edit the content so we're gonna come back into jet engine and back into the form section from there we're gonna create a new form so you say add new for this one we're gonna call this one edit property and we're gonna with the same process so what I'm going to do is I know pause the video now I'm gonna add in all the relevant fields which are going to be exactly the same as what we did the last time with the exception of one thing and that is the post ID field we need to have that in there so when we click to edit a particular post when it comes out this form this data will tell it exactly which post we wish to edit so when you create your blank form the two fields you have in there the post ID and the submit button you don't delete the post ID if you do you just need to put it back in and you have to have that in it just bear that in mind that's only for the edit option okay so I'm gonna pause the video add all the fields in it we'll come back and take a look at the next step okay I've gone ahead and created all those fields now so everything is set up identical to the previous form with the exception XA of the post ID what we need to do though is say pre set form field values gonna click on that and you can see that now opens up the option to map through the various different fields to the data inside our custom post type and also as part of the normal WordPress feels like the title and the thumbnail and so on so what this is going to do is it's going to pre fill out all the data when we click on edit for that particular post type they say it could be a post it could be a custom post type like this one is where we're dealing with editing the property details so all we need to do is exactly the same thing again is come through and map these to the relevant different sources so post ID post id post title post title post description post content will come down and set the thumbnail to be post um nail property type is a post term because we're pulling that from that custom taxonomy so pull down from post property types and then the rest of them like I say are the relevant different field entries that are part of the sort of the custom fields we've set up so what I need to do is just set those up and I will pause the video again apply those values and then I'll show you exactly what I've done ok so there's all the values put in so everything is now configured the way we need it with the field mapping we also need to set up though is this get post ID from so it's saying where do we pull the data from to find out which post we're working with current post is not what we want we're not editing based upon that we're going to do is gonna click to expand that and we want to use the URL query variable to click on there and you can see it automatically pulls in the post ID so it's prefilled that out because we've got that filled in there and nine times out of ten that's gonna be exactly what you want but if for any reason it's not you want to create a form that uses a different query variable you'd simply change that inside there and pass that as part of the URL okay so that's how we set those things up next we've got to go through the same process as before which is the notification settings which is where once we trigger it by hitting that submit button what is the action we want to happen so we leave the send email in there if you want to go click to add another notification now click to edit and then from there we're gonna choose how this particular trigger works so we don't want to send an email we want to insert or update a post so you click on that says what's the post type so this is pretty much exactly the same as what you had in the previous world because we're doing the same thing again we're just editing it this time as opposed to creating a new overall the field mappings are exactly the same again except for the post ID which I could say is unique to the poster we're editing so post type we're gonna choose the properties from their post stayed us it's up to you again what you want to do with this and again this is one of those things that it would be good to see an option inside here that just says to leave it as it is because let's just say for example we create a new post then we come back in and edit it and our post has been confirmed we come back in and edit it and then we sort of say well what do we want to happen now we don't know what state this is is the previous one was in before we edited it could be published it could be still pending review it could be any of those things so we'll be good to sort of say that whatever the current status is remains the same so just bear in mind this could have some strange effects if you set this to be published and you're dealing with something that isn't currently published it would make those changes and then publish it that's my understanding anyway so I'm gonna say that we're gonna put this back into pending review so if someone makes a change it's not automatic confirmed it goes back into pending the email we sent out to the the administrator of the site they'll be notified and then they can when ready so let's just quickly map these post ID post title post content and we want thumbnail property type as a post term I'm gonna just set that to property types then I'm gonna quickly just add in these last couple of fields used in those meta field names so there we go there's all the fields now match their counterparts and again we've got the option if we want to add in default fields we can add those directly inside here as well so we may want to put something in your the triggers this and says this is an updated post I just marked as being updated or edited or something along those lines so that's something you could do if you wanted to we'll leave it as it is we'll say apply the changes to that so now we've got everything in place our form is set up the actions we want to do the prefilled out data the actions there afterwards to send the email and to insert or update that post with all that in place we're going to click on publish and we've now created our edit option now how do we get access to this well we will do a couple of things first before we even touch that we've got to come back in and do like we did the last time we created the form but there's no template assigned to this or anything else we need to do that first code the templates I'm going to come into the saved templates the section from there we're going to say add a new template select this to be a page and we're just gonna say edit property create our template once that's created and we go into Elementor we'll just quickly get rid of this title we'll come back in search of forms drop in our form add a little space above and below so you can see it's just repetitive like I said at the beginning of this video you are going to do a lot of the same things over and over again select the form this time we want edit property we leave the layer as is reload we're going to set this to Ajax so everything is being pulled in the way we want hit publish that's our form set up with that in place we're going to come back out of here exit to our dashboard come back in jet-engine and back into our profile builder from there we're going to come to the accounts page so we're just back into the same section where we can set up all the different actions we want to do for part of our account now this is where that option I talked about when we said add property actually comes in useful I'll show you what I mean now and say add a new sub page from there we're just gonna call this edit property slug will pre fill out the template we're just gonna type in edit and choose edit property but we're gonna choose to hide this from the menu so click on that and hit save and the reason we're doing this if we come back over to our account section just come back into our accounts homepage refresh that you can see the Edit property isn't listed there now if you think about if we put this into our account dashboard we clicked on edit property and it takes us over to the edit page there's no post to edit custom post or anything else because no data has been transferred we haven't chosen what we want to edit so by having that link in there makes no sense whatsoever you'd be better off having a section that lists all of your posts and then making the option to edit by selecting the post and then going to that page so this is where that particular function does come in quite useful so with that in place we're gonna come back into our profile builder we finish with that now so we're gonna come out of this I'm gonna come into our listing section I'll show you the reason why in a moment now you're not familiar with listings it's basically a way of creating one single item that's part of your loop so if we come back over into our property section floor as an example and we take a look at our properties you can see we've got three individual properties that are part of that loop so when you create a listing you are effectively creating just one of these items so we've got the image we've got the type the price and the location so the three pieces of dynamic data then that just repeats and just changes the data based upon the next property and the listing and the next property and so on so when you use that little wizard that's part of the jet engine setup it'll create a new section inside this listing I didn't call it user post items and you can see that's linked through to posts which is not what we want to work with we want to work with our custom post type so I've already gone ahead when I created this set up and created these custom listings I've already got a listing set up in there called this thing so I'm gonna come in and I'm gonna edit this with elemental now this is a really really simple example just to demonstrate how these tools work you wouldn't put this on the front end of your site but you could use the same kind of technique create a listing item that's only going to be used in the dashboard in the account section and then you could create a listing that filters based upon the users ID that's logged in show them all their entries whether they draft publish pending review and so on and put an edit button in there like we're gonna do right now that's going to give you more security over doing it this way so just bear that in mind this is more a case that me showing you how this new tool works they're actually putting it into a real case scenario which if you are interested in find out more about this and you'd like me to do a fully-featured tutorial on how to utilize this and build it into part of a fully dynamic website like this real estate site that we did in the introduction video then let me know in the comment section below and I'll take a look at putting something together in the future that encompasses not only jet engine and using that in conjunction with the theme builders part of WordPress and Elementor Pro but also how to use these new features of jet engine 2.2 and create a user account section where you can manage and control all your content let me know in that comment section below if you'd like to see something like that okay so we need to do now is we're going to do a search for word dynamic and we want dynamic link so we're just gonna drive that over drop that underneath into then you can see it says read more by default and it says what's the source it says permalink well we want to change that we want to set this up to do something else we want this to go through to that profile page that we created now if you wonder why we would use that profile page because we've sent the profile page up and we've created that template and we've linked it through even though we've turned that switch off that says to show it as part of your profile page the function is still built into it so we need to reference that and again like I say this is where it just gets a little convoluted it would be nice to just have a simple wizard that says step 1 2 3 booth you've got it done okay so profile page choose the profile page that we want to work with what we want to edit a property so you can see this lists all of those templates that we set up and this is the thing to bear in mind what this section shows you is only the templates that you've assigned to your profile page you could create a hundred page templates but only the ones that are associated with your profile page as part of jet engine will be shown in this listing okay so we say edit property we then got some options underneath now obviously read more makes no sense whatsoever so we're gonna say edit property and you'll see that we'll update the link on our page which is gonna simply gonna come down and we're gonna say we want add query arguments once you click on there you can see this pre fills out the relevant data now this is the right data for this particular example we take a look at what's going on we've got two different sections we've got first of all post id equals now if you remember back when we set things up we said post ID is that hidden field that's going to pass the data over so it knows exactly what to edit part of the query well that's exactly what this is doing and then what it's saying underneath is sorry so the right hand side is current ID so it's gonna pull in the current ID for that particular post and that link will then be the current ID for each of these individual posts then you can click and it'll know because it will query that data and send it over and you'll be editing the correct page so if you used to work it with URL query parameters this is exactly the same kind of thing this is exactly what's going on hope that makes sense we scroll down we can then set things up like we can choose the alignment that we want to work with we can put some spacing around it so let's just come in and go to advanced and we're gonna save a little bit of padding so we'll just say we'll put five pixels all the way around this just give it a space if you want to we can drop in an icon just to make this look a little nicer and we'll just say edit we'll choose that icon and we'll just add a little bit of space around there by the styling and we scroll down icon go so there we go we've basically set up the link through to the edit page where we can then edit this particular property that we choose so we hit update now providing everything is now in place we should have that feature set up so let's come back over to our properties and refresh this page that shows a listing and there you can see we now have edit property and if we click on any of these we'll go to that edit page that we'd have to be logged in on so we couldn't access this page if we're not logged in and we click Edit property and we go over to that page you can see that now pulls in all the relevant data all those fields are prefilled out all the image fields are prefilled out and we can make changes directly inside here so let's just say this house is now sold we can click change that to be sold hit submit form has been submitted successfully and you see now the property status has been set to sold so that's how you deal with the editing of your data now even though this is showing you how to do with this custom post that we set up the options inside the account section all working fundamentally the same way whether you edit in a post and so on and so forth you use the same kinds of techniques and that's pretty much what I wanted to show you in this video it's fundamentally gone over a lot of the areas that were covered in the promo video of the Krakow Brock released yesterday but hopefully I know a lot of people don't necessarily find those to be the most clear and formatted in the right way should we say to impart the information that you want so hopefully if there's any gaps in that video this has helped you understand some of the things you can do with this plugin but like I say if you'd like to learn more let me know in the comment section below let me know the kinds of things you'd like to see covered in that video if you've got a specific type of website you'd like to see it used with again let me know and I'll see if I can create content that will demonstrate how to use the functions you want to know about in a kind of website that you also want to know about well that's it that's the new Krakow block jet-engine 2.2 update that's some of the key features not all of them some of the key features that we added into this major update let me know what you think of the plug-in and also what I covered in this video in the comment section below as always all the applicable links are in the description and if you use any of those affiliate links it cost you no more money but does help support the channel and help me create more content like this moving forward for you as always - important WP Tetzel until next time take care

Channel: WPTuts

Views: 54,738

Keywords: crocoblock jet engine, crocoblock elementor, crocoblock tutorial, elementor tutorial, elementor wordpress, elementor pro, elementor pro tutorial, elementor page builder, Frontend forms, frontend post submission form wordpress, wordpress frontend dashboard, wordpress frontend posting, wordpress frontend file upload, wordpress frontend user image upload, wptuts, jetengine plugin, jet engine elementor, custom post type

Id: JPnwN1bLYLw

Length: 50min 50sec (3050 seconds)

Published: Wed Jan 22 2020