How to work with Crocoblock Profile Builder | JetEngine from A to Z course

[Music] the wordpress dashboard has a lot of options but it isn't always the ideal place to allow contributors or clients to add or edit their content this is where the ability to build your own custom front-end dashboard can really help in this video i'll show you how to start using the powerful profile builder tools in jet engine now don't let the name fool you though this isn't just a set of tools to allow your users to edit their profiles no you can pretty much build any kind of sophisticated custom front-end dashboard with all of super useful features so i'm going to split this guide into two separate parts part one will show you how to use the built-in features through using the import options to kind of get a quick head start on building our custom dashboard in part two though we'll be expanding upon what i've covered in the first part by creating our own custom post type and then building an easy way to manage the content in our new custom dashboard before we start building let me just quickly introduce myself my name is paul c from wp tets and i've teamed up with croco block to create a series of tutorials on using dynamic jet plugins like jet engine and jet smart filters okay so now that we've got that out of the way let's just get started okay so the first thing we're going to need to do is actually activate the features that we want now for the profile builder we have to have the profile builder enabled and the forms option enabled this allows us then to create that front-end form option where we can do things like edit posts content you know user profile things all those kinds of things to do that really really easy come down to the jet engine option and just open up jet engine inside there you have modules now modules gives us access to all the extra great features we have available as part of jet engine as you can see there are quite a lot like i say what we want is forms so we'll just enable that we'll scroll down and we'll also say that we want to enable the profile builder hit save and that will then activate those options for us once they're activated we then have more options available so if we come back over to the jet option area you can see we now have profile builder and forms inside there if we go back up to the top we come into the skins manager option and we've got presets let's open that up and because we've enabled the profile builder we can also enable these quick starts so things like user profile with editable content and editable user settings page for user profile we can import some pre-designed pre-setup pages templates those kinds of things this just speeds up the process of working and that's what we're going to do in this video however just be aware that you don't need to do this you can manually create everything you want this is just a quick start so let's go ahead and import so we'll choose the first option and you can see this is a preset that's going to set up an accounts page with three sub-sections the main which will show us all the posts we have the edit post and new post we can change any other options we want you can see we also need to finalize the process by going to the permalink settings and resave the permalinks so let's just do that let's close that option down head over to our settings option coming to permalinks and we'll just save it now you can see we've got post name set up but you may have something different you can set this to whatever common options you want which leave it as is and just say save changes head back over to jet engine again go back into our skins manager into presets and this time we're going to choose the edit user settings page for user profile click on that you can see this is now going to do that for us and we'll click close we don't need to do anything with the permalinks again we only need to do that when we use a profile an editable content set up and we import those settings so with that done we've done the first part we've enabled what we want give ourselves a bit of a quick start so let's take a look at what's being created if we head over to elementor's templates and go into the save templates area you'll see we've got four different sections edit user post ad post and user post so these are templates that have been set up that we can use we can edit these and do what we want with them we also come into the pages section and if we come into pages and we've got all pages we now have an account page inside there which is kind of the home page now where all of the different options we can do for our user account adding new posts those kinds of things all that information is going to be situated inside the account page also if we come down now and take a look inside jet into forms we'll see there's three new forms being created the edit user edit post a new post open up there and we'll see everything has been configured for us again we can very easily come in and change any options we want inside here so we can add extra fields in we can link these through the custom fields that we set up inside jet engine there's a whole host of what you can do once you get the fundamentals in place and that's what this video is all about explaining those fundamentals so you can't expand and grow what you want to do with these features now we've seen what's being created on the dashboard side of things let's take a look at the front end in our account section and see what's inside there so we're going to hop over to the test site and i've just logged into the account this is just whatever your domain is forward slash account so what we have is main which is going to show us the listing of all the posts that are associated with my particular account when i'm logged in i can add a new post if i want from here and you can see we can put a post title upload the featured image put the content in and that's what we currently have but we can like i say add more to this should we want to and we hop over to user settings you can see inside here we've got our email address the profile picture you want to use the name and about me now it's worth noting that the profile picture and the about me are unique jet engine custom fields that have been associated with the user profiles so let's hop back over to the dashboard and i'll show you what i'm talking about come back into jet engine and let's go to our meta boxes option and inside there you can see we've got user settings this has been created by using that import option at the beginning we open this up we have two meta fields the profile picture and the about me just a media field and a text area field if we come and take a look at my profile and scroll right the way down you can see there's our custom meta fields profile picture and about me and we can tell these are to do a jet engine because the styling is jet engine styling so those are custom fields that have been set up as part of jet engine and associated with users we can now if we want to set things up and manage the content that goes into this and we can add more fields if you want to create a more feature-rich sort of user profile you may be working with authors or contributors and you want to put more information like links to their own websites bios all those kinds of things this gives you the ability to do just that so let's go ahead and quickly test out these extra fields so first of all let's just do the profile picture so we'll just choose a file and i'll choose my image and we'll say okay and if i want to i can put let me go unless that upload put my name in pull c and we'll just put in this is all about me okay we'll submit that and that's now been saved to my account now it knows it's my account because it's set up to work with the logged in user i'm logged in i know it's going to associate with my account so let's hop back go to my profile we'll refresh this page and there we go there's my profile page that's been added in and the about me now the beauty of this is normally you have to link through with wordpress to use the gravatar service which is free to get a profile picture and this is sort of displayed throughout your site however by doing it this way we could then use this instead and reference this throughout any custom designs that we may set up and we don't have a reliance upon gravatar anymore which is something not everybody wants to use so it's pretty cool we can do that and like i say really easy all done with that simple wizard so now we've seen how this kind of works let's take a look at some of the things we can do how we can customize things and then we'll also take a look at how we can create our own custom feature inside our new custom profile area okay so this is where we are at the moment with the default setup and as you can see it doesn't necessarily look that great it's picking up fonts from the theme that's being used but we might want to customize this to make it a little bit more interesting it's very easy all these options are totally editable using the features you've come to understand and use and know when you're working with jet engines so listings and things along those lines so let's deal with the way that this looks first of all this listing of all of the different posts that we've got associated with my particular account heading back into the dashboard we're going to come to the jet menu and we're going to come into listings and inside there we've got the user post items this is the list of oh this is the template for the list of our items exactly what we can see in each of these different sections so we need to do is edit this with elementor and once we load that into elementor and i'm using elementor free just so you know none of these features are to do with the pro version this is all to do with elementor free and jet engine on its own so you can see pro is not installed because we've got a little padlock in the corners so we want to do is we can come down to the listing elements and inside here we've got all the different kinds of metadata we can pull in from jet engine we also have the profile menu and forms now the reason i want to draw your attention to the profile menu is because if you remember back at the beginning of this video i said you don't have to use the import method you can if you want to create the entire account totally manually well the profile menu would be what you would use to display the menu items as you can see again hopping back to the front end these are what i'm talking about this is the menu setup so you can insert that into your own templates your own designs and get as creative as you want to we've done it it's already been set up as part of that import process but it's there should you need it okay let's make just a couple of tweaks to this to make it look a little bit more interesting just to show you how easy it is to adjust the design let's make this a little larger so the image is a little bit more feature-rich so let's just select this section and we'll just set that to 25 there we go let's change this font because it doesn't really kind of in keeping with what we want to do so we'll just use the typography options and we'll adjust the size on there i don't know we'll take it something like 18 we'll set it to so and so and we'll just set this to something like montserrat so it's a little bit cleaner there we go okay let's set it to 400 and 18 is perfectly fine okay so we've got our edit post option if we want to style this we can do exactly that so we can hover over the style and we can make this look more like a button as opposed to just the text link very easy to do just adjust our styling so we're going to set our top and bottom styling margins padding i should say to five uh the left and right to 15 and we'll just set a background color of a solid color and we'll just pick the primary color from here text color we'll just set to white for example and if you want to drop an icon in there you can do that and we'll also adjust the alignment of that if we want to as well so we come back over to content for example we can adjust the alignment pop over to the right hand side really really simple now if we want to add extra information in here because we got the title we've got the edit but we may want to do things like check out the number of comments the date that this was created you know a whole manner of different things well we can just reference dynamic data so let's come back out of this link i'm going to scroll down i'm going to say let's just drop in some dynamic meta for example we'll drop that underneath the title and you can see it's pulled in the date the author and the comments now we know the author is because this is only showing the posts that's associated with my particular account so we can remove the author from there but we can do now if we want to we can put prefixes in so we can say posted on and we can also put the comments and we'll just say comments i've got a colon in there and again we can style all this we can format the date if we're using the date set and so we don't want to use that date setting we can change it to whatever we want so lots of different options and you can see there's a link we can specify what any of these links do whether it's the archive the post or nothing i'm not going to edit those i'm just going to leave those as they are because everything is set up to work fine anyway if we want to adjust the styling on there we can do just that so we can say come into the items and we'll adjust the typography we'll set that to be monsterat as well we'll set this to be something like 14 pixels let me go somewhere along those lines and we'll set a weight to 400. and if we want to adjust things like padding and margins and so on we can do all of that so finally we're just going to select this entire block and we're just going to put a little bit of spacing around it so we'll go to advanced and we'll put a little bit more padding so we'll say 10 pixels of padding around there and we'll come to style and we'll go to border and we'll just put a little bit of a box shadow in there just so we can see some kind of separation now like i say i'm not trying to make this look really nice looking i'm just showing you how easy it is to make these edits to customize it totally come back over we'll refresh this and there you go now it just looks a little bit more in keep into what we're trying to achieve so you can edit this and do whatever you want with it so that's how easy it is to edit those listings the same kind of thing goes if you want to edit any of the templates so we hop back out of this and we'll just go into the template section so we'll come back out of here and we'll go into the templates save templates and let's just say we'll open up the edit post we'll edit that with elementor and that'll open elementor and then we can edit all the aspects of this again i'm not going to go into too much detail let's just select this block and we'll do is we'll just put a little bit of padding so we'll say 30 pixels inside there and we'll do the same again we'll just put a bit of a drop shadow on this just so you can very easily see exactly what's going on pump the blur up on there and we'll just adjust that slightly and we'll hit update okay so now we've seen how easy it is to customize these pages we'll hop back over we'll edit this post and you can see there's our drop shadow effect so it's really easy and all the features we need are inside you well most of them let's take a look at how we can add more so at the moment we've got the featured image we've got the title and we've got the content but we don't have anything like the category is going to go into or tags so we need to add those in again really easy to do we'll hop back over come back out of this and we'll exit to our dashboard so we need to do now is we need to go back into the forms and this is where we make those changes so we'll open up the forms option and we're editing a post at this point in time so what we're going to do is we're going to edit this and there's all of the different fields we currently have the post id is hidden that's the id the unique identifier for the post that we're currently editing the thumbnail featured image post title post content and a save button and you can see all these options underneath are pre-filled out and then underneath that we've got what happens when you click that submit button we've got two actions to be carried out first of all is to either insert or update the post data the title the content and so on and then redirect to a page so if we click edit on any of these let's take a look at the redirect to page for example and you see we can now choose redirection redirect page redirect to static page select the page you want the account page in other words it goes back to the account listing which will show all of the different posts that we currently have but you can set this to any of the different pages you've got created as part of your site you can deal with the sequence the process however you want to do it to make it totally unique and customized okay so now let's go ahead and insert the extra field that we want so there's a couple of steps to this first thing we need to do is add the field into the form itself so we'll just click add field and you'll see that now adds a new field in we can reorder this wherever we want so we'll pop this above the save button obviously the save button needs to be the last item inside the form to make sense and then we can just edit this so we just choose to open this up and now we can just fill out the details we need and tell it where we're going to get the info from what information we want to put in those kinds of things so the first thing you want to do is tell it what field type it is currently is set to default as text we want to change this for this example to be check boxes because we want to allow someone to select multiple different categories to put their post into check boxes allows us to do exactly that next up we're going to give this a name i'm going to call this category do the same for the label we're just going to drop in exactly the same inside this will drop category in there if you want to put a description in you can do you can set this to be required if it's an optional field just uncheck that option then it says fill options from and these kind of options you're going to see are going to be different based upon the different types of fields you're going to insert so this one check boxes we've got to get data from somewhere to create the list of check boxes so we have manual input so you could manually input these if you want to and create whatever kind of checkboxes you want however what we want to do is we want to use terms so terms is exactly what you can use for taxonomies in other words categories and tags or if you create custom taxonomies you can reference those in the same way so terms is what we choose then we choose what taxonomy you can see we've got categories tags and a custom one called formats we're going to choose categories it says value from meta field well we don't need to do anything inside there because it knows it's pulling the term from the categories it knows that so with that in place we can take a look is there anything else we need to do only thing i want to put in here is the field visibility we're going to choose this to only for logged in users so to get access to your dashboard your account you need to be logged in but this is just an extra little step that gives you an extra level of security and you can do this for all the different fields so if someone did log in or someone did get access to this page because you hadn't set the security correctly you could at least have it set up so no one can see any form fields they can edit okay so we'll apply those changes and it's important to apply those but changes once you've made them that kind of commits that to it okay so now we've done that we've got an extra field called category so all we need to do now is tell it what we want to do with this so category select post property we're going to select that and we say this is a term so we're going to choose that from there we've got categories tags and formats exactly what we saw we created the field so we're going to say categories so we've set those sizes things up now we need to tell it what to do and how to use it when we insert the data so currently we've created the form element but we haven't linked it to anything to do anything when we update or insert data to do that we're going to click the little edit and i'm going to come down and we've got exactly the same things here you can see post id thumb and so on exactly the same as we can see there which is pretty much exactly what you have in the form at the top so what we need to do is simply do the same again post terms choose categories apply changes we've now done everything we need inside here so the final thing is to click update and that now has created the link it's also set up that when we update or create a new post item that data will be inserted and saved alongside the new post or if we're editing a post so let's hop back over now to my account and let's refresh this and we should see our new entry and there we go there's our category check boxes and you can see currently this is in hills and waves so let's uncheck that and save so now you can say that the form has been saved successfully and it's taken us back to the account page let's come back and edit that again and you can see waves is now gone so we've created the link between the taxonomy and the post or edit post so everything is set up in there and it's really easy to add in so you can do that over and over again so you could say you wanted to add in tags for example well you could do the same thing inside there as well using the method i've just shown you now we've seen how to use the import option to get a quick start setup let's move on to building something a little more unique there are a few important steps to go through to get everything set up the way that we need it to if you find yourself getting confused at any point well feel free to rewind and re-watch anything you find confusing or just want to get a little bit of a refresh on okay so let's get on now with building our custom post type so now we've seen how we can easily import the key pages and key sections into our profile builder let's take a look at how we can create something of our own we don't rely upon the import process so we're going to use jet engine to create a custom post time then we're going to take a look at how we can add the front end functionality into that custom post time so first thing we need to do go to jet engine and we're going to come to our post types inside there we're going to create a new custom post time so we'll add new and we'll give this a name so let's just call this custom post type we're going to call it album we're going to use this just to create a really simple collection of music albums labels will leave that as it is coming to advanced settings and we just need to tweak a few things inside here first of all let's change the icon to something a little bit more in keeping make a bit more sense and we're going to add the extra option in for the thumbnail or the featured image just so we can use that then for the cd album artwork we're going to leave that set up as it is we're going to just add in a couple of metaphiles just to augment what we have so the first thing we're going to do we're going to call this artist and we'll use that for the album artist and finally we're just going to add one more field in and we're just going to call this duration and leave that as it is and there we go so we'll leave that as is our post type and we've got our custom post type setup come over you can see there's our listing so we've got title and date we can customize this to our hearts content if you want to and jet engine gives us a lot of control over how this works but we're more interested today in how we can link this through to the front end and create the whole process so next on our list is to create the form that allows us to actually input information from the front end so let's come back into jet and into forms and we're going to add a new format so we'll say add new and we'll just put new album okay so you can see it automatically creates a couple of fields for us we know we've got the post id and we've got the submit button and then we've got the basic send email action we can edit all of these and that's what we're going to do okay so let's start by adding in the fields that we want to use to create and link through to our our custom post type so we'll add some fields into that the first field we'll just reorder this underneath the post id and we can click to edit this now we can set up all the different options so let's start with using the cd artwork so let's change this from text and we're going to set this to be media i'm going to give this a field name we're just going to call this underscore thumb and the label we're going to give this is album so we'll set this as required user access we're going to say to any registered user and what is important is we need to ensure that we click the if checked new attachment we inserted for uploaded file so we're going to click on that and then we can say what is the field value we want to use so we're going to set this to be attachment id now make sure that when we upload a file a media file it will then insert it into the database save everything and it'll be available when we want to edit things and view things on the front end of the site next up we can choose the number of files well this example is just one and you can set your maximum file size what we say five megabytes for this example and then you can choose what file types are allowed so we're going to set these to all of the image types and then once we've done that we've got everything in place we can click on apply changes and we now have our first custom entry inside there now before we go back and add all the extra fields and let me show you how we now link this up to submit this data so the first thing we need to do is come down to the post submit actions and change this send email you can have this you might want to notify the admin of the site there's been a new addition and then they can go through and they can make sure they're happy with it and you can set it from being pending for example or draft status to be in something that is posted and actually available on the site that's up to you we're not going to worry too much about that right now so what i'm going to do is i'm going to click to edit this i'm going to change this now from type send mail i'm going to say insert or update post so we're going to do i'm going to select that option and then we see right what post type do you want to link this through to we've created a custom post type we'll open that up and you can see there's our album so we can choose that option we can set the post status which i was just mentioning so we can say draft pending review private and so on and one thing that's great to see here is that keep current status so if this is an update action so someone's making a change to an existing post that's already been posted and published you can keep that status if they come in and make a change obviously if you wanted to change that to be pending review if a change was made you could do that here as well so it's great to see we have options to keep the current status that's pretty pretty useful okay so we're gonna do is we're gonna say this is first of all because it's a new post we're gonna say this is pending review so it has to be reviewed by an actual admin of the site underneath that we now have to map the fields to these field mapping areas so you can see currently we've got post id and thumb this is your post id and your thumbnail and the submit button obviously isn't going to show up inside you so all we need to do now is choose how we want to link these so the post id you can see post id this will update post but obviously there is no update this is an insert option this is adding a new item so we're going to leave that select post property leave it as it is the thumb we're going to set this to be post thumbnail so now we can go through and add more options in so let's do that let's just apply those changes first of all so we've now committed that to our action our post action and now we can repeat this and add some extra fields in so let's just add the rest of the default wordpress fields that we're using which is going to be the title and the actual content itself and then we'll add our custom fields in so let's add two new fields in reposition these where we need them and we're gonna come to the first one text is perfectly fine and we're gonna set the field name to underscore title we'll drop a label in and we'll just call this album title and then we can leave pretty much everything else except for well actually we can leave everything else if we want to we'll apply changes on that and we'll do the third of the default fields which is going to be the actual content we'll change this from being plain text we'll have the wysiwyg editor so there's a little bit of styling options inside there and we're going to call this underscore post underscore content i'm just going to put in post content for the description on there and we'll leave everything else as it is so we'll apply those changes so now we've set up the thumbnail the title and the post content we now need to add in our two custom fields so if we don't know or can't remember the names of those we can hop back over to our custom post type and inside there you can see this artist and this artist and duration so that's the information that we need so we're gonna hop back in add two new fields position those where we want them and let's just edit those like we've just seen so text is perfectly fine the field name is we're gonna call this our first custom field which is artist and we'll just put album artist as the description or the label i should say and we'll leave everything else there apply those changes and we'll do exactly the same then for our final one we'll edit this text is fine we'll leave that and we're just gonna call this duration i'm gonna call it album duration there we go so we've set those options up everything is where we want it to be now we just need to update our insert posts and we're going to map those custom fields so title is going to be post title post content is going to be post content artist is going to be custom or post meta and inside there we can just drop in artist and the duration is the same thing again post meta and we're going to call this duration so we just basically linked everything up except for the post id because this is a new post we'll take a look at the editing a little later but that's basically all we need to do if we want to apply changes and add another notification we can do that so we can say let's add a notification send email as the default and we can say where is this going to go to so the admin gets an email that's fine and reply to well we could set custom inside there if we wanted to have a reply we're just going to say there's a new cd album added for approval and then you can drop in some information inside there you know and you can see there's a pile of available macros so we can put post id the thumbnail the title so we can easily build up an email inside you very quickly let's just quickly do that just say hi admin there's a new album awaiting your approval and then what we can do underneath this we can just say album title and then we can just simply use the short code so we could say there's the title we'll just grab that short code we'll copy that from there and we'll pop that into there so now we can just repeat this process to get everything set up the way that we wanted to any information we wanted inside there and then once we've done that we can just save this so i'll apply this notification or that the options we just set up on there and now everything is basically set up for us so now let's just quickly publish our form and now we can go on to the next stage which is to create the template that's going to house our form and then we can look at adding that into the custom dashboard we're creating so what we're going to do is we're going to come over to our save templates and inside there we're going to add a new template so add new select this is going to be a page and we'll just give this a name of our album create our template and then we can just add the form in okay with elementor open let's just create what we need inside here first you want to do is just add in two columns and once we've done that let's just adjust this ever so slightly but they will do okay so we need to add in two separate widgets first of all we need to have the navigation for our actual profile area our custom account section and then we need to put the form on the right hand side so let's come over to our widgets scroll down until we get to the jet engine options and inside there first of all we're going to grab the profile menu drop that into the left hand side you can see that now just pulls in the basic info we'll just change this to vertical and i'm just going to apply the styling that we have so i'm just going to paste my style inside this this is going to map out the same stylings we already have on this section okay so with that being done we've put in the navigation as you can see our new section is missing and we'll rectify that in a couple of moments what we need to do now is just put the form on this side so we just do a search for form and we want the form option which is the jet engine you can tell by the color of the icon we're going to drag and drop that over to the right column select our form from there so we're just going to say album start typing that in you see there's new album add that and we can see that's dropped in everything we need for our new form element we can set anything up inside here that we want to i'm going to change this submit type from reload to ajax but you can choose whichever option you prefer i don't see you can go through and style this to make sure it looks exactly as you want add padding and so on so we say let's add 30 pixels a pad in for example so you'd style this as you saw fit so let's publish this page let's template and once we've done that we can now add this in to our custom dashboards we need to add it into this section on the left hand side our navigation again to do that is really easy we'll come back out of elementor gonna go to the jet engine section and down into profile builder now this is where we can control a lot of aspects of the overall functionality of profile builder outside of the forms and so on that we build independently we've got pages account page and advanced you can see this is if we didn't want to use the default created account page you wanted to use something different you could set that up inside you and all of your pages will show up inside here as well by default it's gonna if you use the import option it's going to show the account section we can add in user pages single user pages we can use template mode there's a various different things we can do one thing i would highly recommend you do is restrict admin area access this will stop people getting into the normal default admin if they log in to their front end profile area to add content and so on but if they know it's a wordpress site which they will do you don't want to then just change it to wp-admin and then be able to have access to that so this gives you the ability to disable that based upon user roles so we can just say that only select roles can access this it's up to you to set these to what you want but we could set it to editor and so on and so forth so you can select that and set it up how you want you want to hide the admin bar you can do that as well so this will get rid of the the bar you see at the top of the screen so we'll save the changes on there hop over to the account page and this is where we can now go in and easily add in extra pages or extra sub pages so we're going to do is we're going to add a new sub page we can set up then the title for this who can have access to it and so on so you could still limit various different functions to different user roles which is great to see so let's just fill this out now so the first thing i'm going to do is give this a title and we're just going to say add album the slug automatically pre-populate but you can change that if you want to the template is the elementor template we've just created so let's just start typing in album and you can see there's our add album template so then you can choose to hide this from the actual menu for the profile area if you wanted to do that you could do it the link is still available we're gonna leave that as is and then we're gonna leave this available to all user roles so you can still choose exactly who has access but we'll leave it as it is for now okay so let's just save these options and we should now have that new section added in so we can add in our custom cds and albums okay so we're now into our account section and you can see there's our new entry add album if we click we'll go in and we can now fill out the relevant details for an album so let's do that let's just add our first album and see how this all works okay so i've already gone ahead and filled out the relevant details for ease let's just submit this and there we go form has now been successfully submitted so now that's added that in and into our dashboard but also it sent an email to the admin and set this to be pending review hopping back over to the dashboard you can see we go into our custom post type for albums there's our album title tells us it's pending and we can go in if we want to we can edit this preview whatever we want to do there's the title of our album there's our information featured image is inserted and also our custom information underneath and if we open up the emails we'll see exactly what comes through so there's our custom email hi admin there's a new album awaiting your approval then the album title and that's dynamically inserted from from the macros we saw so now we've seen how to insert we now need to go through a very quick process of creating a way of listing the albums and then also being able to edit and update those albums so let's take a look at those options next so let's start off with setting the format that allows us to actually edit any of our albums so back into the form section now of jet engine we're going to add a new form in and we're just going to call this edit album now this works in a very similar fashion but there are a couple of steps that we need to be considerate of in the way the things work we need to first of all have this to know exactly what post it is we want to edit so there's a couple of little changes we need to do to the way this form works in comparison to how we insert new information in so first of all let's go into the post id section because in the first example and we sort of set that up begin to insert a new post it didn't need to know anything to do with what post we were trying to update or edit because it was all new so we need to change this a little bit we can leave hidden post id current post id all those things are perfectly fine but we need to change this field value from current post id and change this to be url query variable so we're going to choose that and then we need to put a variable key in so all we're going to do is we're going to use underscore post underscore id so this is just going to be the id that passes over when we create the edit this album link button whatever we use that's going to pass over the query variable for the post id so underscore post underscore id that's it we'll hit apply changes on there and we've now edited the post id to know exactly what post it is we're going to be editing next up let's make the submit button a little bit more obvious what we're going to do let's edit that and we're going to change that from submit to update and apply changes nothing else needs to be changed on there okay so that's the basics of our form we'll come back and deal with the post submission actions afterwards we need to do the same as we did the first time and link all the different fields that we want to be able to edit so let's add a couple more fields in so first of all we're going to need to add in for the thumbnail the title and finally for the actual description or the content we'll come back to our custom fields in a moment so let's just position these where we want them above the submit button and let's edit these so the first one we want to do is going to be for the actual thumbnail itself like we did the first time we need to change this from type to come down and we want to choose media as our option could change the field name again because this is one of the inbuilt fields to underscore thumb label if you want to put a label in you can do that required we're going to uncheck that because this is it to edit things so as long as there's one in there we don't need to worry user access we're going to say any registered user like we did before if checked we're going to check this and the field value we're going to set to attachment id so this now knows that it's going to upload the file and insert the attachment id information into the database we can set the same values up inside here so only one file maximum of five megabytes and whatever image formats you want to apply for this once we've done that and everything is set up inside there we can just make sure that we just hit apply changes to commit those options next on our list is the actual post title itself so let's edit this field and we'll do the same text is fine text is fine on there this time we're just going to put in underscore post underscore title and if you want to shoot a label you can do that inside here as well uncheck the required and just make sure everything is set up the way you need it to be obviously you can tweak this to make sure it's exactly how you want to be most important thing is to make sure you've got things like the post title the right links in there so we'll just put in a label apply our changes on there and our third and final option is going to be for the actual content or the description of the cd or the album that we're actually putting in so same as we did first of all wysiwyg field name underscore post underscore content label is going to be post content or album information whatever you want to put in there and we'll leave everything else set up as it is and we'll just hit apply changes now without those two extra fields in for our custom fields and drop those underneath so we know the first one is going to be for artist text is fine just need to change this for artist and we're just going to put album artist in the label required we're going to uncheck that option and apply the changes on there so you can see this is repetitive but it's pretty quick to do just change this one and we're going to call this one duration okay i will uncheck the required and visibility for that's fine okay so we've now set up our form but there's one more thing we need to do and that's to check this option it says preset form value or form field of values so this now has one key purpose and that is to pull in the data from the post we're editing into the form fields so the title the thumbnail all those things are going to be pre-populated because we're editing a post as opposed to creating a new one now we need to do something that's important if you don't do this you can get yourself into a little bit of hot water because things are just not going to work source post that's fine and there are some other options inside there but we're going to leave that set to post but we're going to say get post id from now current post it doesn't know what the current post is so we need to change that to url query variable you can see that pre-fills out the underscore post underscore id for us so we don't need to do anything there so now this is just saying pre-fill these form fields out using the url query variable from a post and then prefated out pull out data from the database using the post id as the indicator for this particular post hope that makes sense so now we just need to map those fields so post id we're going to change that and it's going to be post id thumbnail is going to be the post thumbnail oops there we go let's lift this up and we've got post title content artist is going to be post meta and artist is going to be filled out in there and then duration is going to be post meta and duration in there now if you're wondering where we get these values from they're just basically the field names that we set up when we create our custom post type so artist and duration so again i hope that makes sense so now the first part of the form is done we've created the fields that we want we've set how they want to work we've pulled in the information from our database using the query variable and we've pre-populated each of those field entries now we need to go through and tell it what we want to do when we hit that submit button like we did when we created a new post so let's remove this option for send email and change that over to insert or update so insert an update your post type in this example is going to be album your post status we can set this up to be going back into draft or pending review whatever we want or if you're comfortable we can set it to keep current status so we'll choose that option and now we're going to map those fields again because we're now mapping to where that data is going to be inserted into the database when we hit that update button so post id post id will update the post so that's really important we need to set that and then we just need to do the same again so your thumbnail your post title because content the artist so we know is going to be artist is the name of the custom field and then postmatter again which is going to be duration which again is the name of the custom field we've basically done what we need to do now this is going to create that updated version and insert the data into the database for us now once we've done that we now need to do one more thing which is going to be useful which is going to redirect us to a page so let's just close this down let's say apply those changes i'm going to add another notification in we're going to change this type into redirect to page so redirect to page which you want to redirect it to we're going to say we want to go to a static page and you can select the page you want to go to so once it's updated you could take it back to your account home page or if you wanted to you could say the custom url or the current page so we chose current page add a query argument to the redirect so do you want to pull in the post id and so on which you would want to do it's up to you or you want to deal with this what we're going to do though is we're going to say this is going to go back to our static page and we're going to set this back to our account page okay so we're not going to pass any query variables or anything else we're just going to say once someone's updated the album they're going to go back to their accounts page so now just make sure you hit the apply changes and you update or save the form so that's now been done we need to create the template so to do that back to our templates save templates i'm going to create a new one and we're just going to set this to be a page this is going to be edit album and we'll create that template now i'm going to quickly go through the process we're just going to add in our two columns and we're just going to insert our form and our navigation so we're going to just come back over to the left hand side we're going to come down until we find the profile menu we'll drop that inside there set it to vertical and just apply the styling to it and then we're going to do the same thing now as we did before which has come down choose our form choose this to be edit and we've got edit album and set this to be ajax all we need to do now is just hit publish on this section come back out of here exit to our dashboard and we're going to go back to jet and from our jet menu we need to come down to profile builder because we need to do now is insert this into the account section into our profile builder section but we don't want anyone to be able to see it it just needs to be there so we can reference it and i'll show you what i mean as we go through the process so i'm going to do is going to come to account page we're going to add a new sub page and we're going to call this edit album it's like it's perfectly fine the template we're going to search for edit and we're going to choose edit album from there i'm going to select the option that says hide from menu choose that and what that does is it means that the page is accessible so we can still use it we just don't see it in the dashboard where it would make no sense whatsoever because you'd click the edit and there'd be nothing to edit so we'll hit save on there hop back over to our account page and we'll just refresh this and we'll see that that link doesn't show up which is exactly what we want so now we need to create a page that'll have a listing on it that'll show all the albums including an edit button to do that i'm going to come back into our dashboard and we're going to go this time into listings and from there we're going to create a new listing specifically just to show and allow us to edit the albums so let's just create add new and post is fine we're going to change this then to albums for the pro from post type because it's our custom post type and we're going to call this list albums and we're going to use elementor for this design purpose so we'll say create listing and then we can just build this out now i'm going to keep this really really simple i'm just going to simply just drop in a simple layout on the left hand side we're going to put the image of the album itself on the right hand side the title and the edit button so to do this we're going to come down to our widgets for jet engine again we're going to grab the dynamic image drop that into the first area and you can see post thumbnail is being pulled in which is exactly what we want if you don't see what you're expecting to see inside you which you may not if you work with a custom post type you can simply come down to the settings option in the bottom left come to the listing settings and then set up what you want inside here for your listing source and from post source and you can adjust your preview width and so on so we're going to leave that as it is going to come back to our widgets we're going to scroll down until we get to our jet options again and we're going to grab a dynamic field and we're going to use this then for the title of our album now you can see this pulls in the data because it's intelligent enough to know that chances are you're going to want the title but if you want to change that you can adjust it from the source and from the object field so we can choose from post term user object data then metadata options and so on and inside your object field this will change depending upon what you choose as the source but for this example everything is exactly as we needed to be okay so the next third and final step for this is to add in the button that allows us to edit this particular post so we're going to just come back to this and we're going to scroll down i'm going to grab a dynamic link widget i'm going to put that underneath the title and there we go so it says read more makes no sense so let's just say edit album makes a lot more sense and now we need to specify where this is going to go when you click it so we need to make a couple of changes here first thing you want to do is just specify where it's going to go now permalink would just take us to the post we couldn't edit it we would just view the post which would make no sense so we're going to change that and we're going to choose profile page because we need to send it to that profile page the edit album template we just created but we hid from our navigation so we're just going to choose this and we're going to say edit album so we've created the link now but we need to tell that edit page what url we want to work with in other words what post we want to edit and this is where we took a look at sending the query url so we now need to send the argument or the query parameter via the url to do that we enable add query arguments so we select that and that will give us this option underneath which pre-fills out what it thinks is correct in this example it is exactly correct the post id which you've used several times in this example the underscore post underscore id is going to have this little section added to the end of it which is one of the typical macros if you've ever used anything to do with macros inside jet engine you're going to be familiar with these you can see there's a list of them above but what this is basically saying is we're going to add this on to the url post id equals the current id in other words the current id for this particular post that we're clicking on to go through to to edit again i hope that makes sense it can be kind of confusing to start off with but we're just literally building the url parameter from this individual listing item so with that in place we've pretty much done what we need we can style this and make it look more like a button if we want to so let's just quickly do that just so it makes a little bit more sense we'll set this to white we'll set the background color to be a solid and we'll just use this blue like we've used before and all we'll do is just add a little bit of padding around this so we'll say top is going to have five bottles going to have five left and right is going to have 10 each so now it looks more like a button and what we'll do is just to make it a little bit easier to see what's going on we'll simply come over and we'll just specify this is going to be aligned to the right-hand side okay we'll hit update on this so now we've created the listing we've linked it through with the edit link and we're coming to the end of what we need to do so let's come back out of this exit to our dashboard and we're going to create one more template so we're going to come back into our templates into save templates i'm going to add a new page template and we'll just set this to be page and we're going to give this a name of album listing create our template and once we've done that we're just going to drop in our listing scroll down until we get to our jet engine widgets drag our listing grid inside there i'm going to set this up we're just going to do a search for list list albums there we go and we're going to set this to be just one row okay so you can set this to as many as you want so let's just say we'll set it to 12 and if you want to you can just put in any kind of sort of navigation around here anything you want to do to make this in keeping and have all the functions you need hit publish on there and now final stage we need to do to get this working is to come over back into the profile builder inside jet engine and we're going to come to our accounts and we're going to add another sub page in this time we're going to call this list albums and then we just need to search for the template we just created which was the album listing template there we go album listing and we're going to do now is simply hit save on there and that should be all done so we can hop back over to our accounts page and we're just going to refresh this make sure everything is up to date there's our list albums click on there and there's our album we can click edit album and now we can make any changes we want to that particular album we want to add a new album in we can add a new album in so this is how you can create your own customized setups inside this dashboard so you don't have to use it with the inbuilt functions you have as part of wordpress or to deal with just your actual profile you can use this for anything you can create with jet engine there's so many options you can use with this it's kind of crazy now we've covered a lot of ground in this video and it's quite easy to become confused with all the steps we need to cover to get everything set up correctly so feel free to use the timestamps in the description if you want to go back over any of the sections of anything i've covered or you simply want to recap on the overall topic now if you found this video useful please do consider subscribing so you don't miss any of the future tutorials i reached for croco blog now all the applicable links are included below if you have any comments questions or feedback please pop those in the comments section my name is paul c until next time take care

Channel: Crocoblock

Views: 36,458

Keywords: elementor user profile, wordpress user profile plugin, wordpress user profile, wordpress user profile page, wordpress frontend profile, wordpress frontend user profile, profile builder wordpress, wptuts elementor, wptuts jet engine, paul charlton elementor, jetengine plugin, jet engine relationships, jet engine elementor, jet engine wordpress, jetengine listing, jet engine listings, metafields, сrocoblock, crocoblock tutorial, crocoblock elementor, crocoblock plugins, crocoblock

Id: DloUYSFmAvs

Length: 51min 35sec (3095 seconds)

Published: Wed Feb 10 2021