Frontend Dashboard Elementor & JetEngine | Listing Website Part 2

in the first part of this short series i showed you how to take elemental pro jet engine and jet smart filters from croco block to build a fully featured listing website in this second installment i'll be covering the whole process of creating a custom account section on the site to allow users to upload and add their own content as a bonus though not only will they be able to add and upload content they'll also be able to edit delete and generally manage all the content they add to the website now if you're concerned as you should be with the website being flooded with spam content you can rest assured that i've got that aspect covered too for this example only logged in users with the right user account will be able to add content and this will still need to be approved by site admins to add an extra level of security interested on how to do all this cool let's take a quick look at the end results and then we'll get started on building everything so this is the site we created in the previous video if you haven't seen that link in the description we have a new section called the account section so we click to go into there if you're not logged in you'll be asked to log in and once you're inside there you'll see you have the ability to contribute add extra recipes and so on and also manage the recipes that you currently have so what we have on the left hand side is a really simple setup main is going to show you all of your recipes it's kind of your landing page but you could set this up to be whatever you wanted it to be then we've got user set in so if you wanted to upload your own profile picture and so on you could use that inside the design the ad recipe as its name would suggest allows us to add all the various different pieces of information to do with recipes and you can see if we scroll on through all the same information inside there including our repeat of added nutritional information and all the different kinds of recipe types we go into my recipes and it's basically the same as the main section but like i say you can set that up however you want inside there you've got each of your individual recipes with a brief overview of the description tells you the publication status whether it's a draft where it's published and so on you can choose to edit this which will take you into actually edit this particular individual recipe or you can choose delete it if you choose to delete it you will be given a notification say are you sure you want to delete this at which point you can say yes or okay if you want to or cancel if you've done it by accident hitting the edit option will again like i say take us in now to the same layout as we have with the ad recipe but obviously everything is pre-filled out for the particular recipe that you're currently editing so that's what we're going to look at creating now we've seen the end result let's start the tutorial off by enabling the profile builder and the forms function inside jet engine so we're going to do is we're going to come into jet engine and we're going to go into the jet engine itself and inside there we've got all the available modules we just need to enable the ones we want to use so we're going to say we want the forms option and if we scroll down we also want the profile builder hit save on there and once we've done that that will then enable those features with those enabled if we look at the jet engine option on the left hand side you can see we now have profile builder and forms if we scroll up we're also going to go into the skins manager and inside there we're going to use these presets and this allows us to pull in some basic default pages and a basic setup for working with the profile builder so the first thing to do is say import profile and we're going to import this option you can see this uses the preset to create a main and edit post and a new post option we also need to go ahead and just save out the permalink settings just because there's been some changes made to that so we're going to click on the permalink settings option all we need to do is simply come down and say save changes we don't need to change anything so we hit save changes on there we're going to go back into jet engine and choose the jet engine option at the top back into skins manager back into our presets and we're going to hit this second option which is editable user settings page for the user profile now you don't need to do this this just gives the contributor the ability to upload their own profile picture a bio and any other information you may want to make available so this can kind of be used then if you wanted to on the recipe details page where it'll show information about the actual author you know it's up to you if you want to use that for this example we'll just hit on import so you can see how it all includes so that's all you got to do with that we click on close and we have set that side of things up now behind the scenes a few things have been done if we come out to the pages section and open that up we'll see we've got an account page inside here so that's the first thing it's done so we've now created our account page if we come over into jet engine and into the forms section and open that up and you can see we now have edit user new posts and edit posts so they're the default ones for us and also if we come into our template section into saved templates you'll see we have some new options edit user edit post ad post user post and so on so these are automatically created when we use those import options and it just speeds up the process it's also a good way that if you're unfamiliar with how to do this you can kind of use these as the basis to see how everything actually works with things enabled we can now set up the basics of the profile builder ready to build our custom user dashboard so if we come back into jet engine and we go into the profile builder we can take a look at the settings we have available to us we've got three lots of options on the left hand side our pages is where we can tell it what page we want to use as our account page our kind of home page now by default this is using the account page that was automatically created with that import option but you can easily change this should you want to you can also do things like add user pages single user page template mode hide the admin bar and restrict admin access what we're going to do though is we're just going to enable the hide admin bar we don't want that to show up to non-admin users and restrict admin access once we enable that we can say what user roles we want to allow access so we're going to do is we're going to leave that blank because we're going to say anybody other than an administrator so things like our editors contributors authors and so on they cannot access the dashboard the admin section of wordpress itself they can only access the account section which we're going to be creating so it has that little level of security they can't get in and start playing around however if they have an administrator role they have full access to both the account and to the dashboard so you can still access that yourself but if you want to change those roles you can do you'll see administrator just isn't an option inside there because administrators always have full access so we'll hit save on it we'll hop over now into our account page and in here you can see this now tells us a few different things so for non-authorized users what do you want to do do you want to redirect them to the default wordpress login page for now we'll leave that as it is because we're going to create our custom login page in a moment then you can say for users with restricted access so we're going to set all these things up once you've created all the pages and the templates and so on but what we have underneath is basically the structure of the account section so the main is going to be your account page what you land on when you log into your account then you've got things like add new post edit post user settings and so on so you can if you want to open this up and you can see you've got extra options inside you so we're not going to be using the add new post in this example so what i can do is i can either choose to delete this completely which is perfectly fine you can do that if you want to however you may want to set the varying different levels to have different access so you may have an author that can have access to both the recipe and maybe something add in posts it's up to you you can control that basically through the template you want to reference and also what user roles have access to any of these features hope that makes sense what we're going to do though for this example just because we want to keep this to only recipes is just hide this from the menu we'll do the same we expand out the edit post and you can see same setup is inside there and we'll go through all these options when we start to build everything out i'm going to hide that as well we'll leave the user settings because then they can control their email address and those kinds of things we'll hit save on there and then if we go into the advanced section inside here we can set up post restriction rules so you may say you only want to allow users to do certain things it could be something like restrict the number of posts well you can do that inside you so you may say that as an author for example you can add 10 recipes but as an editor you could add 20 recipes or unlimited well you can create a new rule you can choose the role you want to apply this to you can choose what post types this rule applies to and then you can set limits and error messages so really cool if you want to control how many items any particular user role with any particular post type can actually create we're not going to worry about this an example though but it's there should you want to use it we'll just delete that say yes and we'll just save our changes make sure we've got everything set up so that's basically the overview of the profile builder now to make our lives just a little bit easier let's start off by creating the blank templates that we'll later flesh out with the custom forms listings and a lot more so let's hop over into the option for templates and saved templates now it's worth noting at this point you do not need elementor pro to do this because we're only using page templates you only have to have elementor pro if you want to do things like single post things like that just so you know that if you are working with a profile builder you don't need to have that feature or that particular version of elementor installed okay so we're going to create three templates we're going to come up and add new we're going to just set this to be a page and then we're going to do first of all is we're going to set this up to be list my recipes and we'll just put template at the end of that so we know what it is okay so there's the first one we're going to say create template and once that's done we're just going to close this editor down and go back we're going to worry about creating the content later so we'll hit publish on there and we'll just simply come back out of this back to our templates and we're going to create a new template so we're going to add another one in so we're going to say add new again set this to be a page and this one is going to be called edit recipe template create our template do the same thing again we'll just publish that and we'll just come back out and do our third and final template file again we'll just hop back out of this back into our templates back into add new page and this is going to be add recipe template okay so that's our third and final template created once we've done that we're ready to move on to the next stage now we've finished creating the blank templates let's go ahead and add those into the profile builder so we can start to build up the basic structure of our custom user dashboard so we're going to do is we're going to head back over into jet engine into profile builder and from there we're going to come into the account page now inside the account page we can create our extra pages so first of all we're going to add in the add recipe page to do that we're going to say add a new sub page we'll just set the title to add recipe you can see once we underneath that will automatically add the slug in there for us then we can choose the template we want to use which we've just created so we're going to just type in add and see add recipe template so select that option inside there we want to let this be shown inside the menu so we're not going to worry about hiding that we are going to say we're going to set some available for user role options though we're going to open this up and say administrators editors and authors and contributors so a subscriber won't get access to this but those roles will get access to it we'll close that down and we're going to add another sub page in and this sub page is going to be the option to edit a recipe so again i'm going to do the same kind of thing edit recipe slug what may be created we'll just type in the word recipe and we see there's edit recipe template so that's what we want we're going to choose that option from there and again we're going to do the same thing again who the role is going to be used for we've got administrator we've got editor author and contributor okay so those are the options we want so we're going to hit save on the uh finally we can add another page in if you want to it's up to you how you want to use this main page so i'll just show you how this is done so we're just going to add another page in and we're just going to say list my recipes same again template we're just going to do a search for list and i say list my recipe template there we go and we're going to set this up to be available for the same roles again so we just add all those into there and that's the last sub page created and also we can come up to the main page if we want to and we can change the way this works as well now the template for this is set to be the user post we're going to get rid of that and we're just going to put in list and we're going to say list my recipe template so this will show us all our recipes on the home page of our account section so those are the main things that have been set up for us i'm going to hit save on there and that's all the profiles things set up for us now a key part of any dynamic website built with jet engine are listings in this section we'll go through the process of building the recipe listing layout and add in the edit and delete buttons for later use so to do this we're going to come into jet engine and into listings and inside there we're going to create a new listing so we're going to add so we're going to say post is perfectly fine but you have other options should you need them we say post type we're going to open that up and choose our custom poster that we created in the first video which is the recipe which is our custom post type and we're going to give this a name so we're just going to call this edit my recipe listing just so we know what this is all about we're going to be using elementor in this example as the editor so we'll say create our listing item and that'll take us over into elementor and we can start building things out now one of the things i like to do whenever i'm working with listing items inside jet engine is come down to the settings in the bottom left hand corner and come into the listing settings and then what i do is i set the preview width to be around 450 pixels wide that's a good indicator of the space that we were working on and it just makes the whole design process a little easier you can also set up your listing source you can see we've got post terms users repeat it feels like we saw when we created this particular listing but also you can say from post type now by default this probably isn't going to show recipe which is our custom post type it will probably show posts so it makes sense to change this to recipe so we'll see when we're creating this list in layout we'll see the data being pulled in from a listing item sorry from a recipe item now one thing i do want to note at this point is do not click the make listing item clickable at this point if you created a normal listing that doesn't have an edit and a delete function which is what we need to have inside you then you can enable that perfectly fine however if you enable this this kind of works against what we're trying to do with the edit and the delete functions and when you click on either of those it just literally takes you over to the page showing you the actual recipe itself which is not what we want to happen so if you find you experience that this is probably what you've done you've accidentally clicked on the make listing item clickable leave that set as no okay so with that being done i'm gonna hop back over and we're just gonna start building everything out so we're gonna be using all jet engine features for this so the first thing i'm going to do is grab the dynamic image drop that into our section and this is then going to pull in what it considers to be the right image in this example is going to be the post thumbnail which is perfectly fine that's exactly what we want next up we're going to come down and we're going to select another option which is going to be dynamic field we're going to drag and drop that underneath our image and again you see this pulls in what it thinks to be the right data and in this example it's the title for this particular recipe and that's perfectly fine that's exactly what we want we do the same again we're going to simply add in another option for a dynamic field underneath our heading and this time we're going to change this we don't want to use the source that it thinks we want to use we want to change this so we're going to choose the option for metadata and then we're going to choose the meta field that has the information that we want in this example is the description field so we can choose the select option and we can find the recipe custom post type and we're going to choose description we'll add that you can see that now pulls in the description for this so we've got the basics inside you the next thing you want to do is add the publication status now you don't need to add this but it is quite useful because the way that we're going to be setting up our account and the listings of all the recipes is that you will see all of the recipes you've added whether they've been set to draft status published awaiting approval any kind of status but you'll see that status on there so it's a great way of letting the end user that's actually adding content to your website to see what is the status of their particular post you know whatever they're adding in so once again we're going to add another dynamic field in i'm going to drag and drop that underneath there and we're going to just choose the option up source is perfectly fine because we can use the options inside here so we're going to open up the object field and change that from title and we're going to be looking for post status this is the status of any of the posts that have been added now it's not perfect as you can see it just says the word publish for something that's been published it would make more sense if it said published however that's what we're kind of working with so we kind of kind of work with the content that we have the features we have but at least it gives some information so how do we actually set this up so it makes a bit more sense for people well the easiest way to do that is to customize the field output so we're going to do is we're going to come over to the left hand side and choose customize field output and you can see we've got this percentage and the s this is a macro that's being used inside jet engine to output the content of in this example the source and the object field of post status we can add on to that if we want to for this example we're going to add in publication status so now that just makes a little bit more sense and if we want to we can also put in html code inside here so we want to make this bold we can do just that so we can simply put inside here and we'll just open and close the strong html tags and once we've done that we'll have that first section in bold and publish in normal case so that's the first part of that okay so now we're going to add some extra functions in we need to make sure that this is all going to work with the editing and the deleting side of things to do that we're just going to drop in first of all a inner section and this is just going to allow us to have the edit on the one side and the delete on the other to keep them separate and make lives easier lots of ways you could do this this is just a quick and simple way of doing it so what i'll do is i'm going to select this and we're going to come over to our options just for layout set our column gap to be no gaps we've got no extra spacing on there that makes it look a bit funky and we're done with that part so now we're going to add in first of all the very first option which is the edit option we're going to add in a dynamic link so we're going to drag and drop that into there so let's make this a little bit more usable at the moment it says the source is permalink but we need to change that we're going to just open the options up and choose profile page once we do that that now gives us a second set of options we can choose what profile page we want to link this through to so we're going to link this to my edit recipe option now even though it's a blank template we'll flash all that up in a little bit we just basically set up the link to this so that's the first part second thing is read more makes no sense whatsoever so we're just going to say edit recipe and once we've done that we've now created the first part of it we now need to tell it how we're going to tell the edit page what actual post to edit or what recipe to edit to do that we just choose the option to say add query arguments choose that option and that automatically pre-fills out this argument which just basically says the post id which is the unique identifier number for every single post whereas a post a recipe a page doesn't matter wordpress treats them all exactly the same so your post id is equal to and again we're going to be using one of those macros that are part of jet engine in this example it's saying the current id so it's going to pass over the current id for this individual recipe that's all we really need to do there for it if you want to you can set up some icons so we can say we want to put an edit icon in there we'll do a little search for edit choose that option and insert it and then we can style that if we want to we can simply come into the style options and we can say let's just add a little bit of space in to the side of that and there we go so you can do whatever you want now to style this and i'm not going to worry too much about that aspect of things i'm sure you're more uncomfortable dealing with styling and editing things okay so the edit recipe is in place the next thing we need to do now is deal with the delete option so this works in a fairly similar fashion so we're going to come over and we're going to just do a search for that dynamic link again and we're going to grab and put that into the right hand section we're just going to set this to be aligned over to the right i'm going to do the same kind of thing again the source is permalink that's incorrect we need to open that up we want to choose this time though is delete current post link so we're going to click on that and say there's our deletion message which i showed you earlier on in this video just to confirm it and what are you going to do afterwards well we're going to send this back to our account page our home page for our account so for that we're just going to use this simple link which is for slash account for slash but obviously if you change yours to something else you've got a different page set up your account just drop the link inside there what you want to do after you delete the post you can move it to the trash or you can delete it permanently i would suggest leave it move to trash as it makes a little more sense then you've got your label which we're just going to put in delete recipe question mark and again if you want to style that do whatever you want with it we're also going to add in the query arguments again we're going to select that all that's pre-filled out for us we've had to do nothing else inside there and again like i said if you want to style this and do what you want on there you can do but that's pretty much it we've set up what we need to do now this is going to delete it or edit it based upon which option we choose now i'm going to do is i'm just going to quickly apply a little bit of styling to this just to make it look a little better and then we'll crack on with the next step okay so there's all the styling applied to that so that's that laid out styled and everything we need so we're going to click on update or publish whichever option you have available to you so that's that side of things done so now we need to go ahead and actually start to use these things with our listing created we can now start to build out the first part of our custom dashboard the post or recipe listing page okay so let's use this now inside our listing and we can take a look at what things are starting to look like let's head back over to our dashboard and back into our templates so inside our templates we're going to go into our save templates and we want the option to say list my recipes let's edit that with elementor once that's done we're going to create the basic structure so we're going to add in a simple two column section we'll select this we'll also come down to our settings disable the title even though that won't actually show up just makes it a little easier when we're working inside you we're going to do is make sure that it's selected come to advanced and we're just going to add in about 50 pixels top and bottom to give us a bit of breathing room we'll also grab this and pull this over to about 25 somewhere around there okay so first thing i want to do is just do a search for listing there's our listing grid so we're going to drag and drop that into there it says please select a listing and we're just going to do a search for recipe and there we go there's our recipe listing and edit my recipe listing we want the edit option and that shows us the different recipes we'll set this to be two columns wide now at the moment this is only showing certain things this is only showing published i show in for everybody which is not what we want to do so we need to rectify that okay so what we need to do is come down to the post queries we're going to add a new item inside there and we're going to select the type of query we want to create and we're going to set that to be post and author parameters we'll select that that now gives us a range of different settings we can tweak to get what we want so we've got things like get posts with status publish well we can say we want to set that to any so it'll show all of the different posts because we've got the status inside there you can see once i do that that notion shows me some of the ones that i've been testing out that are set to pending so not showing all those things but it's still showing for every single author we need to change the posts by author to be current user so when we log in we will be the current user and that's pretty much all we need to do on that front so that now is going to show us all of the recipes that we have associated with our particular account now you can also add extra post parameters on here if you want to you can stack these on top of each other and just say how you want these to interact with each other we're just going to keep this fairly straightforward for this example now we can come back to the general section and we can just fine-tune and configure how this is all going to look so you can see this is currently showing us six posts we can change that number inside there we can change any of the different date messages we have for when there's no posts found or anything we can set things to be masonry grids if we have things that are different sizes we can lazy load this to make sure that it keeps it nice and smooth especially when you have more recipes with potentially more images and so on and then you can just filter all these things and set exactly how you want so we're going to say load more and that will just allow us to load more options in say load more type by click or infinite scroll just use whichever option you actually want to work with you can also set up your post types inside you if you want to you want to be like doubly certain you're only going to display the posts that are recipes well you could if you want to add the recipe option inside here and that'll only show the recipes but that's basically our listing side of things so we're going to update that template whatever did that now that should be forming part of the home page before we finish this off we need to add one more section in so we're going to add in a new widget and we're just going to do a search or we're going to come down at least to find the option for profile menu drag and drop that into there you can see the content or context is the account so that's perfectly fine show menu for role if you want to set that up but we've already kind of configured those things inside the actual profile builder itself set those to be vertical and you can see that now drops in all the relevant links for our structure we'll hit update on there and now we can test this out okay so this is our account page and as you can see there's our navigation to the left hand side there's our posts and if we scroll down you can see there's six posts we go a little further you can see it automatically loads in more with that automatic option so this is just basically using that scroll to load so there's our account page starting to take shape now we've laid the groundwork we're ready to start adding the core functions to our dashboard we'll start off by creating the add new recipe form this will form a key role in our custom dashboard we're going to come into jet engine again and we're going to come down to the forms section now you can see there's already a couple of forms inside here this part of that setup that we've got when we create the profile builder and we import things we'll leave those as they are they're perfectly fine so let's add a new form in and this form is going to be our add new recipe form okay so if you've never used the forms inside jet engine before they're fairly straightforward they're just a little time consuming to actually create now i'm going to go through this section fairly quickly i'll focus on a few key points and show you some of the key things you need to do but if you want to see this in more detail i already have a dedicated tutorial that's based around this recipe website so you can take a look at that if you'd like me to go into a lot more detail i will link to that in the description down below so you can check that out when you're ready but basically the forms are broken down into three distinct sections the field settings the actual action that's going to happen when you submit your form and then any messages that you want to apply to the various different states of your form so you can customize all these different messages your success message all those kinds of things you can stack multiple notifications on top of each other by default the send email is an option and we'll go through that in a second once we've gone through and start building out the field settings so the field settings are basically all the fields you want to reference or create inside your form now because we're working alongside an existing setup as a custom post type inside jet engine what we're going to do is marry up both the forms from those recipes and also the section to deal with the taxonomies which in this example is going to be the option for the recipe type so all those are already created we just now need to duplicate all of those inside here and then link those up to do what we needed to do that might sound complicated but like i say it is fairly straightforward just a little time consuming when you create a new form by default you're going to have two fields in the field setting and one notification in the notification section we have to keep in the post id and the submit button they are kind of the basics of what you need but now we just need to effectively go through and flesh everything out so to do that we're just simply going to add in add field we're going to reposition that where we want and then we're going to click on the edit option this then allows us to configure what this particular field inside our form relates to what we wanted to do and all those kinds of useful things so the first thing we have inside here is going to be the recipe title now we've got the type and as you can see we can choose from all the different kind of field type options we have for custom posts and so on so what we're going to do is just set this first one to be a text field next up you've got the field type and you can see we can choose between text email url telephone and password so if you've got some kind of checking that you want to do for example it's an email address you want to confirm it is an email address has been input you can choose these kind of field types we're going to leave this set text for this one and for everyone inside this particular tutorial but there are more options should you need them the name this is kind of where you want to put the name of the field now i tend to use the same name inside here as i use inside my custom post type just to make my life easy to know exactly what's linked to what so let me just show you what i'm talking about if we hop over into our custom post type list this is the custom post that we set up previously which is the recipe we'll open that up and inside there there's our meta fields so you can see there's preparation time cooking time and so on we've also got if we scroll right the way down to the options for advanced settings we've also got a couple of fields that we're using as part of wordpress itself the title the editor and the thumbnail and also the excerpt option now the excerpt isn't actually used in this so i if i want to just delete that we've got three different fields that we're referencing so we need to put those in alongside our custom meta fields because they're integral to the recipe itself so the first thing to do is hop back over into our form and the first one i'm going to do is we're going to call this recipe underscore title now i always like to put the name of the actual post type itself if that's relevant inside you because it means it just makes life a little easier when you're referencing things you can't have spaces inside you in the name so make sure you separate those with underscores or dashes next up we've got the label for this we're just going to put in basically the same this is more of a friendly label that's going to be part of the form itself so we're just going to say recipe title if you want to drop a description you can do we'll leave this set as being required because we want to put the title inside there you can put a placeholder if you want to that just fills that some basic info inside the field itself and it's quite useful in various different instances if you don't use labels it's really really useful default we're going to leave that as it is and what we're going to do is don't worry about minimum length maximum length and so on all we want to do is come down and say set the field visibility this just means that we can add an extra level of error checking with regards to our account and we're going to set this to be only available for logged in users so once we do that if you're logged out and you actually get access to this particular section and you could see this form then none of the fields that are set up is only for logged in users will show up and therefore there's nothing much you could really do inside there so it's just another level of preventing people from causing problems if they get access to this kind of thing okay so that's the first field done so we're gonna do is we'll hit apply changes on there and now we're just going to repeat this for all of the other fields inside this setup so i'm going to go ahead and do that until we get to the point where we're going to deal with the repeat the section and i'll show you how that works and i'm just literally going to repeat the same process over and over again linking up creating the fields choosing the relevant field type and then linking them either through to the title editor and thumbnail or the custom meta fields that we've created so i'll do that and i'll come back to you now while i'm working through things i thought i'd just pause a second and just show you an extra field type that is worth making note of and how it works we're setting this up this is the featured image so the field type is set as media because we want to be able to upload images the name and the label exactly the same as i've already talked to you about user access in this example we've got a couple of options we're going to set this to any registered user so that basically means anyone that's registered and obviously logged in will be able to upload content via this setup but again we've set restrictions to who can access add-in recipes in this example anyway then we've got the option for insert attachment and this is going to insert it as an uploaded file we're going to specify that the field value is the attachment id so we can reference that later on maximum allowed file upload is one because obviously you only want to have one for the featured image and we've got a five megabyte limit and also i've set the allowed field types to be jpegs gifs or gifs pngs and bitmap files i've also set this to be field visibility for only for logged in users so i wanted to show you that one because i think that's useful and it might cause a little confusion when you're working with this so again i'm going to crack on with the rest of these and i'll come back to them when we're back to the repeater field options okay so now ready to take a look at how we can deal with those repeaters so all my fields pretty much are in here so we're going to add another field in we're going to position that above the submit button i'm going to edit this and we're going to do is we're going to set this up to be the start of the repeater so this works in a little different way to what we've seen before so let's open this up and say repeatable field group start we'll click on that i'm going to give this a name which we know is going to be nutrition which is the name of that particular field group the label again we're going to put this in nutrition and description if we want to put that inside there manage repeater item count we're going to set this to be manually and the add new label so we're going to do is this is just what are you going to use when someone goes to add something new well let's make it as obvious as possible add new nutrition info we're going to uncheck this one being required because people may not know the nutritional information if they're submitting a recipe and therefore we don't want to force them into trying to put some false information in the calculate repeat of row value we're going to click on that we're going to say default returns rows count and we're going to do is we're going to come down and we're going to say this is only for logged in users and hit apply changes so that's the start of our repeater so this just says this is now a repeater block and what we put underneath it is going to be the actual fields inside the repeater itself so again we're going to add another field in move that up we're going to position this to be about one-third because we've got three entries inside here we're just going to drag the right-hand handles over click on edit and then we're going to start editing this side of things so we're going to do is first of all we're going to put in the first field that we've got so we hop back over to our post type scroll down to our nutrition information and you can see there's what we have we have three fields type value and percentage of allowance let's just expand the first option out and we're going to copy the name from there so we don't have any mistakes hop back over text is fine text is fine the name we're just going to drop that inside this we'll paste that and our label is going to be type make sure required is unchecked and make sure we have this set only for logged in users we'll hit apply changes on there we'll add another field in reposition that resize this like we just did position that we want click on edit and this time we're going to just change the values inside you for the value option so we'll do the same again we'll copy that from there head back over field name the label for this uncheck required and set this to be only for logged in users hit apply third and final time so we're just going to resize this position it edit it change this over to be a number hop back over here and if we scroll down there's our percentage of allowance again you can see this is set as a number so we're just going to grab that from there hop back over put that inside the field name and we're just going to put percentage of allowance as that option inside there uncheck required and set this to be only for logged in users and hit apply so that's the starting point so we've got our repeater start we've got our three fields inside our repeater we now need to add a final field which we're going to position that we're going to edit this and we're going to choose this type to be repeatable field group end so once we've done that there's no other options inside there hit apply changes and we've now wrapped those three repeater fields inside the repeater start and the repeater end so that's that side of things then we've got one more field set to put in so we're going to add one more field in drag and drop that into position and we're going to do with this one is we're going to link this through now to the recipe type which is a custom taxonomy i'm going to open this up i'm going to change this then to check boxes because it's the easiest way to work with these and we're just going to change this to recipe underscore type recipe type for the label and we're going to leave required because you do need to put that in there and now we need to change the fill options from change that from manual input and we're going to choose the option for terms because whenever you create a taxonomy it's grouped together as terms so there's our terms now we can tell it what taxonomy to reference we're going to click and we're going to choose the option for recipe type other than that there's not much else we need to do we can just scroll down and set this to be only for logged in users hit apply changes and that is our form pretty much done so now we built the form we've got to tell it what we want to do when we hit that submit button so let's just make sure we save or update our changes just to make sure that all the work we've done so far doesn't go awry if something happens okay so there's our form built now we've got our notifications or post submit actions now send email is the default let's click the edit option and we can change that based upon quite a few different parameters so the first thing we have is the option for what type of notification or post submit action do you want to carry out we want to set this to be insert or update post so we're going to click on that what post type do you want to insert or update we're going to change that to recipe which is our custom post type and the post status is whenever this is submitted what do we want to set the post status to be no it depends upon how you want to work with your particular site because this would be potentially a public site that could have authors and things like that associated with it you want to have some semblance of control over what information gets posted on there so to do that we can change the post status option and i would recommend we set that to be either draft or pending review so we set a depending review for this example we can now set up the rest of our form and what we will do is we'll set up another action which will be an email that will notify the admin of the site that there's been a new recipe submitted and then they'll know they can go in and they can just check make sure everything is in there correctly there's no problematic information and then they can confirm it and make it live on the site just as an extra little level of security to make sure you don't get junk being posted on the site okay so now we've got to map the fields to our form so you can see field maps this might look a little complicated to start off with but really it's just another one of those repetitive things you have to do with jet engine forms now the first thing what we have on here is the post id now it's worth noting at this point that because we are not updating a post we have no post id this will be generated when we actually submit a new post so we're not going to put any value inside there we're going to leave that as select post property other than that though we just now need to go up and marry all the different fields up so our recipe title we're going to click and we know that's going to be our post title which is a built-in wordpress feature recipe content again same thing again post content recipe featured is our featured image so post thumbnail and that's the three fields that we set up as part of wordpress as part of our custom post type the rest of these now are custom meta fields so now we just need to do the same kind of thing but reference our custom fields so first thing is recipe preparation time we're going to choose that option and say post meta so anything you create inside a custom uh post type is a meta field so we're just referencing that meta field so we're gonna do is this our recipe preparation type and because we copied the name exactly as we have it inside our custom post type so we scroll back up there's our preparation time and if we expand that out name id is preparation dash time what we can do is either copy it from here or to make our lives just a little easier we can simply copy it from here and once you've done that we can copy and we can paste it into that box however you want to do it so i'm going to go through all of these and i'm just going to quickly fill out all this information okay so that's all the post meta fields carried out you'll notice though that the recipe type i haven't set anything inside there and that's because this works slightly differently this is being pulled in from a custom taxonomy so nothing complex about this just worth being aware that it's slightly different they change this and we're going to say post terms because you remember i just said whenever you're dealing with a taxonomy it's basically referenced as a term so we choose post terms and then we can just choose recipe type from the list of options and make sure you hit apply changes if you hit apply changes that will apply those changes to that particular action if all you do is come up and you hit update or submit or post whatever that sort of option is on there that will not save what you set inside there and you have to go through the entire process of doing it all over again super frustrating so just bear that in mind it's always worth taking your time and making sure you hit that option okay so the next thing you want to do is set up the send email so we're going to add another notification and inside here we're just going to edit this and we're going to set up what we want to do so the type send email is perfectly fine who do you want to mail it to you can set this to be the admin email which is the default email as part of wordpress for the admin user or you can choose various different other options email from a submitted form field or custom email we'll leave it as the admin because there's only one admin user reply to what you can do is you can set that and say that's gonna be set to a custom email not selected blah blah blah this is just a notification email so there's no real reason to reply to anything from there then you can just sort of drop in a subject line so i would just recommend doing something like this new recipe submitted for approval then you've got things like the from name so we'll just put in website admin you can drop in the email address you want to use i'll just drop in this and then you've got the option for the content of the email itself now you can see we've got all these available macros down the left hand side it's up to you you could reference these drop those in there style them to all the formatting whatever you want to do it's entirely up to you how you work with it but those are really really useful short codes all i'm gonna do though is just say hey admin there's a new post awaiting your approval and if i want to you could put in the post id and things like that we'll just leave it as it is for a really simple option but customize this as you see fit again hit the apply changes to commit those options add a new notification and this time we're going to redirect this now to a different page so we can make sure that this goes somewhere after we've submitted this form let's edit this choose the option to say redirect to page and where do you want to redirect it to well we wanted to go back to our account page which will have a listing of all of our posts anyway but you can set it to whatever page you want to go to so you say option inside there we're going to just choose static page and then we'll say select the page you want to send this to we're going to send this to our account page now you've also got these url query options arguments and so on so if you wanted to you could pass all these different values any kind of combination you wanted through via the url so you might want to do the inserted post id so you may want to go and have it so like approval so this is what you posted or something you could do that inside you but again i want to keep this really simple i don't want to get too complex with how we're working we'll hit apply changes on there and i'll leave all the messages as they are but let's just have a quick recap we've got our form set up to submit a new recipe so therefore there's no post id we've set it up to insert a post we've mapped all those fields we've set a send email so when this form is submitted an email will be sent to the admin to let them know there's a new recipe and then we're going to redirect the user who submitted a new recipe to a specific page in this example the account home page which will list all of their different recipe posts okay once that's done we're going to update this and that now is our form created and everything is set up we just now need to put this form into the template that allows us to create a new recipe okay so we're back into the templates now from elementor and we're going to go into the add recipe template we'll edit that with elementor and then we can set our new template up we'll create the same two column layouts so we're just going to select that option we'll just quickly set this left-hand column to 25 okay so we'll do like we did before we're just going to simply find that option for the profile menu drop that inside there we'll set this to be vertical all we need to do is just find our formula to go into the right down column so we'll come back there we'll search for form grab our form option drag that over there select our form which is going to be the add recipe form so we're just going to search for add add new recipe select that option and there you can see there's our form inserted into our page all the relevant different sections all set up perfectly for us so we'll hit update on there and that now is our add new recipe form completed let's quickly just take a look at that in our dashboard for our account let's just go into add recipe and there we can see there's our form all set up we're now ready to add in the form to allow us to edit any existing recipe post thankfully we don't need to start from scratch as we'll be reusing most of our add new recipe form so we've got the add new recipe let's just duplicate it so we're going to duplicate that option and we're just going to edit this and we're just going to change the name we're going to just say edit recipe and we'll get rid of the copy inside there okay so the reason we're doing that is because we now have the first part of the form all done for us but we need to change a few things first you can see we have an option that says preset form field values at the moment this is all a completely new blank form so if we just use this we'd have no values inside there which would make no sense we need to pre-populate that information to fill out this form with the information for the post that we're currently going to edit just going to choose the option to preset form field values so we'll select that option inside there and you can see this now looks very very similar to what we had earlier on which is where we map all the fields and in all honesty it works in pretty much exactly the same way however we just need to set a few things up it says get post id from current post but we don't know what the current post is even going to be so we need to change that to drop that down we're going to choose the option for url query variable because when you click on that option to edit a post if you remember we use that little macro that says it's going to transfer over the current post id this is where we're going to pull that post id in that tells wordpress it tells jet engine what data to pull in so that's all we need to do we haven't had to fill anything out we're just using all the default values here so with that being done i just need to go through the same process now of marrying all these up but this time the post id is super useful and we do need to fill that out so the first thing i want to show you is post id and we're just going to select post id let me quickly recap what's going to happen the source is a post so in other words it's going to look for a post type it's going to look for the url query variable which will be sent over via the url that's going to be used as part of that edit now all a url query variable is in this example is it's going to pass over the number that's unique to every single post inside your wordpress database that's all this is doing and then this is going to look for it and it's going to filter out just the data for that specific post hope that makes sense you don't need to worry about the technical side of things here just wanted to explain it so you kind of know just what's really going on okay so the recipe title we know is going to be post title we know that the recipe content is going to be post content and the recipe feature is going to be recipe thumbnail or post thumbnail sorry we're going to jump down to the bottom we're going to say the recipe type we're going to expand that out let me just put the screen up a bit and we'll say post term and we're going to set that to be recipe type so now what i'm going to do is i'm going to go through and i'm going to just configure all of these again i'll come back to you when that's all done okay and there we go there's all that pre-filled out next up we need to deal with the actions so what we're going to do is we're just going to get rid of these options so we're going to get rid of both of these we just want the insert update so we're going to edit this because we need to make a couple of changes most of this information is perfectly fine the post status is up to you you could leave this as switching back to pending review or you can use the option to keep current status when updating a post i would caution with this if you do say keep the current status you need to make sure that you trust the people that are submitting content to your particular site because the last thing you want to do is them end up putting something in there first of all then making some changes with some information that you might not want them to have inside there okay so we want to change the post id and we're going to set that say post id will update post which is what we wanted to do so we're going to choose that option inside there the rest of these are pretty much perfectly fine so we're going to hit apply changes on there and now what we have is everything in place so we can just go back up we can hit update on there making sure that everything is laid out the way we want we'll hit update and we've now created the edit option so again we just need to apply this to the template for the edit post layout once again back into the template section we're going to edit the recipe edit recipe template template a bit of a mouthful there we'll edit that and what we're going to do is we're going to set this up in the same way as we did before so we'll just create our two column setup set our column to be 25 we'll drop a little bit of spacing above and below 50 pixels and we're going to do is we're going to search for the navigation option profile menu drop that inside there set that to be vertical we go and this time we're going to just do a search for form drop our form in the right hand side select our form we're going to do a search for edit and we want edit recipe we'll hit that and hit update so now we've created the update option so next thing we need to do is test it and take a look it's all working okay so we're back into our account dashboard we're looking at the listing of all of our different posts and all different recipes i should say and let's take a look edit our recipe which is our fiery chili soup we'll edit that and we're going to go over and there's our fiery chili soup all the details images all the information including all of our nutritional information and including the different recipe types so everything is inside then if you want to make changes we can make changes we can hit submit and that will make the changes for us and i want to because this is all information i want to keep as it is but you can see really really easy to do so now we've created the main section we've got a list of all of our different recipes we've got the option to delete the recipe to edit the recipe we can add new recipes so we've pretty much done a huge amount of information all set up inside our custom account section now before we wrap this up there's one more thing i want to do to make it a bit more of a seamless kind of setup and let's create a custom login page using elementor pro and what we're going to do is we're just going to then use the profile builder to control exactly where people go when they log in so we're going to do is we're going to come back over into our site exit to our dashboard i'm going to come into pages we're going to add a new page and we're just going to call this login so we'll just set that up as a login page we'll publish that and we'll edit it with elementor now you can set this up to look any way you want i'm not going to worry about making it look particularly fancy i just want to show you from a practical point of view so we'll select this we're going to do is we're just going to simply put a bit of spacing above and below like normal 50 pixels and we're just going to do a search for login there we go there's our login option we'll drop that widget inside there we'll set our inputs we'll change the labels and we'll just basically say we're pretty much happy with this we'll just add a little bit of styling to this and we'll say a border shadow we'll bump that right the way up we'll drop the opacity down there we go and we'll add a little bit of space in around that as well so we say we'll put 50 pixels of padding okay so there's our login section now we've done that we can exit to our dashboard and we're going to do is we're going to go back into our profile builder so we're going to come to jet engine into the profile builder and we can do now is we can control what happens so we go to the account page we can choose for non-authorized users what do we want to do so we're going to say redirect to the default wordpress login page no we don't want to do that we're going to say redirect to page so we're going to select that option and what page you want to redirect to well this is our login page we're just going to type in login like so now this login just basically references the page we just created which was named login so that's the the link to it it just ignores whatever url is before it's if you move your site you work on a test site this is just an easier way however you can easily put the full link inside there including your domain and everything else next up we can choose how we handle anybody with restricted access we can choose to either redirect a page or show a template for ease i'm just going to redirect them to the same page which is the login page but you could redirect them to a page that has a message on it saying you need an account blah blah get them to register however you want to handle that side of things but this is just a simple and easy way of setting things up so with all that being in place we can hit save on there and our dashboard is pretty much done now that we've created our custom dashboard for contributors we have a much more useful custom website one where we can get other users involved and should help you see the potential in building a powerful listing websites with relative ease now in the next video in this short series we'll be expanding on the front end of the website more to add in the ability for site visitors to rate and provide feedback on our recipes as well as add recipes to their list of favorites as always all the applicable links are in the description below and if you've made it this far the video why not give that thumbs up button a click it really does help me out while you're at it if you like the content why not also click the subscribe button slap the bell icon but if you didn't get value for this video well feel free to hit that thumbs down button twice as that seems to work pretty well too my name is paul c this is wp test until next time take care

Channel: WPTuts

Views: 19,440

Keywords: frontend dashboard elementor, frontend dashboard, frontend dashboard wordpress, frontend dashboard wordpress plugin, frontend dashboard wordpress plugin complete setup, wordpress frontend dashboard, dashboard wordpress, create custom wordpress dashboard, creating a custom wordpress dashboard for your clients, custom front end wordpress dashboard, custom wordpress dashboard, how to create custom front end wordpress dashboard, wordpress dashboard, wordpress dashboard customization

Id: fwGon7N7fZQ

Length: 54min 54sec (3294 seconds)

Published: Fri Mar 12 2021