How To Create Custom Front End WordPress Dashboard For Your Website Clients | Elementor Pro

building a wordpress website for a client is great but handing it over to them and seeing the look of complete confusion on their faces says a lot for the wordpress dashboard now even if they aren't overwhelmed there are still plenty of times where you simply don't want to give them full access to the dashboard for various different reasons so this is where building a more streamlined user dashboard can become invaluable especially when you have control over what features they'll have access to in this video i'm going to show you how to do exactly that using a selection of free plugins alongside elementor pro now we need elementor pro because we need to have access to dynamic tags everything else though is 100 free so let's just take a look at what we're building today so let's kick this off by just demonstrating what you're going to have access to depending upon your user role now currently i'm logged into my user dashboard as an administrator which means that i get some extra privileges which i'll show you in a moment but the first thing i want to say is pay no attention to the design that's being used in this dashboard this is put together to show you the function over the design aspect you can design this any way you want it's more important to understand how the whole process works without the way what do we have well the user dashboard is going to show me my six latest posts if i have six or more so this is exactly what we see here gives me information about each of the posts the title my logged in user details that's there so you can see basically the differences when you're logged in as different users who the user is and so on the date time those kinds of things i can edit the post if i want to and i can click and i'll go in and have access to editing all the key functions inside there i come back out of this we take a look at the top of the page you'll see we have some basic navigation we have the dashboard home which is what we have at the moment my posts which will take me in to see my posts my specific posts again this will give me all my posts now with full pagination so i can go through and find what i want i've also got all posts and i only get this because i'm an administrator if i click on that i can see all the posts no matter who has actually created the post so you can see now the first post is a different user this is test user 001 then there's my posts and so on and so forth and again i can click and i can edit this information so i can edit someone else's post because i'm an administrator if i wasn't i would only see my own posts then finally we've got the add a new post which as this name was suggested allows us to add a new post this will then automatically be placed into pending to have approval before it goes live on the site but you could set this up whatever way you wanted to so that's what we have there if i'm not logged in as a user i'm logged in as an author or an editor i'll see some slightly different things let me just open up a different browser and i'll show you the differences so this time i'm logged in using microsoft edge as opposed to chrome i'm logged in as a different user you can see my avatar at the top is different and i also have less options i can see on the home page of my dashboard i can see all of my posts in this case there's only one at the point and i can edit that or you can see but i don't have access to the information to do with all of the posts the other thing i want to draw your attention to is the fact that even if i know the numeric value of someone else's post i still can't get access to it so let me show you what i'm talking about i'm going to click to edit this let me just bring this down a little bit so you can see that i've got this post id of 155. let's just say i'm going to randomly try some other numbers like 138 for example i click enter on there and you can see i do not have permission to view this post so if there's a post associated with it which i know in this example there is because i'm not an administrator even if i randomly start putting numbers in there i still can't get access to edit someone else's post and this is important when you're setting things up if you want to give full access as an administrator you don't want people that are not administrators to be able to hijack that information and be able to access content that they shouldn't have access to because their user level doesn't allow so i hope you understand that and i'll show you as we go through this process how we set those permissions up and how we make sure that people can't get access to someone else's info as always let me just quickly show you the tools that we're going to be using to create this some of these are purely optional if you don't want to use them you don't need to however there are most of these are going to be things you need to have in your to make everything work first up we've got advanced post queries because this means we can filter things based upon the author the currently logged in user those kinds of things totally free plug-in really really useful blocks your companion you can ignore that because i'm just using the bloxy theme for this example just to have a theme installed to show you what it would be like if you were working on a site of your own elemental custom skin and content control these are two things that we absolutely need content control is going to allow us to control who has access to certain pages that's going to be really powerful and really useful an elemental custom skin we're using that to create the custom post loops but there are other tools out there if you want to use something else that's entirely up to you all works in the same way elementor and elementor pro pro being the only paid for plug-in in this entire process and that's because we need to have that dynamic functionality to be able to get this all working fully elementor panel i use that just because it means i can close things down that i don't want nothing more than that front end admin we need that because obviously that's the main tool for allowing this to all work the nice thing with this this is the new version but it's based on the acf front-end admin that i've used in plenty of other video tutorials it just means now we have no reliance whatsoever on acf being installed so that's one less plugin we need to have installed when we're not using it and nav menu rolls is again an optional plugin it just means it's a very easy way of hiding things for user roles that don't have access to it in this example we want the admin to see that list and edit all posts whereas non-admins you know editors and authors they won't see that but it's other tools out there that do the same thing you could even hand code this into your functions php file if you so desired other than that that's all we need to get this up and running the first thing we're going to do is create the structure for our dashboard we're keeping this fairly minimal but you could expand upon this there's lots of other options you could take and there's lots of ways you could expand this but i'm going to show you first of all how we set it up and why we set it up in the way that we do so we're going to add a couple of pages in i'm not going to go through the entire process you see at all i'm just literally gonna do one or two and then you can flesh out the rest based upon what i'm using so the first thing we're gonna do is we're gonna have the user dashboard which is effectively going to be the home page for our dashboard we'll publish this and we'll set that up okay so that's our first page we're going to do now is we're going to add more pages in so the next i'm going to do is add new post so i will do add new post and what i want to do with this is i want to set this to be a subset a sub page in other words we have a parent page so at the moment with parent pages set to no parent we're going to set that to be user dashboard and this just makes our lives easier when we're setting up the content restrictions so i'll do one more page and then like i say it's up to you then to flesh out the rest of them so this one we're just going to say all posts and we'll do exactly the same thing again we'll just set this to be parented to the user dashboard publish that and you can see now what we have is we have this hierarchy that we're starting to work on so we've got user dashboard add new posts and all posts i'm going to quickly add the extra couple of pages and then we'll crack on okay so there's our dashboard hierarchy our five sub pages underneath the user dashboard now we can go ahead into settings and into content control and we can set up our restrictions to show these to only the people that have the right level of access so let's add our first restriction first we're going to do is going to give this a name we're just going to call this user dashboard who can see this content logged in uses this file and then we're going to say only administrators editors and authors have access to this if you're a contributor or a subscriber you won't have access next up we've got the protection option and this is where we can set up how we want to deal with the protection choose how to protect your content you can set this for a custom message or you can set it to redirect we're going to set a redirect so it'll take you to the login page and then back once you've logged in just in case you try to access a page and you do have access you're just not currently logged in then we can choose the content option and from there we can now choose what options or what content we want to restrict access to so let's just change this we're going to set our first rule we're going to scroll this down and we're going to say a selected page and then we're going to select the pages so we're going to say use a dashboard so we'll add that in there we're going to add in my posts so you can see it's my posts and we'll do edit author it all posts and we'll say edit author post as well so now we've set up the rule for those four pages we'll add that and now we're going to create another rule so we're going to set this up just specifically for the admin user to have access to that one or two specific pages so to do is we're going to add in a new restriction and we're going to call this edit posts admin always good to name it to give sort of information about who has access and those kind of things you can quickly at a glance see what these mean so who does this access relate to again administrator only this time the protection we're going to set up inside there we're going to set up a unique piece of protection so we don't want to say redirect we want to set a custom message and then we'll say overwrite the default message and then we're going to simply paste in our message which says you can't edit this content and then we're going to come to the content option and we're going to choose what it is we restrict access to so again we do the same thing again we're going to come down to a selected page and from there we're going to do all posts so edit all posts and we're also going to do all posts so that's the all post function control to only allow access to administrators that are logged in everybody else will not be able to access any of this we'll add that and there's our two levels of restrictions set up obviously if you have more pages or more functions you can get as creative as you want with this function all we're going to do now is hit save changes and we are done with our content control i would recommend going to test this out in a browser where you're logged in logged in with a different user level and also logged out i've already done that but just go and do it just to make sure that for peace of mind you know everything is working the way you need it to so now we've gone ahead and set our restrictions the next thing we want to do is create the custom header the navigation and so on for our dashboard so let's start with the menu structure into appearance and into menus and from there we're going to create a new menu so we're just going to call this dashboard menu we'll create that and then we'll add the pages we want inside this we're going to say we want the user dashboard we want my posts we want all posts and we want add new post so add that to the menu and there's our menu structure now like i said this is the global menu and this is where we're going to use that extra plugin that allows us to control who has access to these various different things so we know we can only access this based upon administrators editors and authors we don't need to worry about that however we want to hide all posts from anybody that's not an administrator so we're going to say this is display mode is logged in users and once we do that it opens up the roles option from there we're going to say administrator so if you're not administrator you're an editor an author you will not see this entry so we'll save that menu now and that's our dashboard menu our user dashboard menu created now we want to go create a header for this and a footer that is unique to the dashboard so i've gone over into the theme builder for elementor pro we're going to create our custom header so we're going to add the header option and from there we're going to just basically create a really simple header so i'm going to close this down i'm going to create something really simple ourselves so we'll add in this two column section we'll just select it and we'll make sure that the vertical align is set to middle and that our right hand column is set to something like 15 percent and again you can get as creative as you want with this you can do whatever you want style-wise content-wise whatever we're going to do with this though is we're going to simply drop in an image and from there we're going to set a dynamic value by using the dynamic tags option and we're going to just choose the option for use profile picture we'll just add a little bit of styling to that so everything looks nice and tidy we'll set the width to be 50 pixels so it's not too big and we'll just set the border radius and we'll set that to 50 percent because it's a nice little round avatar okay next up we're going to just drop in the navigation so we want to choose the option for navigation so we're going to just grab nav menu drop that to the left hand side making sure that the menu is the right menu in this example dashboard menu and you can go ahead and style this as you want to the final thing i'm going to do is just drop in a little bit of styling on the actual header itself and we're just going to put in a little bit of box shadow inside there just to get some separation in our design okay so that's the first thing done next thing we need to do is just publish this and we need to set up a couple of conditions now the conditions on this are pretty simple and straightforward but it does allow us to control this only is going to show up inside the dashboard and not affect the front end of our site so we'll add our first conditioning we're going to set this from entire site and we're going to choose singular then we're going to just change that over to pages and then finally at the end of it we're just going to search for user dashboard there we go we're going to add another condition in and this is why the hierarchy is so important when we create these pages because it allows us to make the whole process really simple to singular again and we're going to say any child of and we're going to do a search for user dashboard again so we're saying is we want to show this for the user dashboard page and any child of the user dashboard page we'll say save and close that's our header applied now to our custom dashboard pages we can repeat that process for the footer and i'll do that now behind the scenes so you don't have to watch me do the same thing again okay so that's our templates done there for the headroom photo let's just quickly test this out just to make sure that everything is working as we expect so let's just preview this opened up in a new time you can see there's our navigation i'm an administrator so i get access to my posts or posts and add new post there's our header our footer we can jump over to the different sections you can see we go to the right pages because the title at the top is changing so all the things we need are currently set up and in place now we need to start building out the feature set of creating our customer dashboard and adding content to it so the next step is now to create the loop that allows us to view the posts for our logged in user and also have the ability to edit that content to do that we're going to create a loop so we're going to click on the loop option and we're going to add a new loop item and we're going to give this a title of dashboard post loop by author create our template and now we can start building the relevant pieces we're going to close this down and create something from scratch now we're just creating only the loop item in other words this is an individual post layer it's just going to have the post title the featured image the meta information and the edit post button you'll see what i mean in a moment once we actually finish this and apply it to the site it'll make a little bit more sense then okay so we're going to do is we're going to just grab some basic info we're going to grab the post title and drop that at the top we're just going to change that to make h5 now like i say i'm not worried about styling this at all i'm more interested in just showing you how it works we'll drag the featured image underneath we'll set that inside there we're going to come back out we're going to just grab some post info this just comes in handy because it allows you to see things like comments dates and so on and you can take off anything you want to on the you know to streamline this the way you want okay so the next thing we want to do is add in the edit option now to do this we're going to use our front-end forms plug-in and we have these extra options and what we're looking for is the edit button so i'm going to drag and drop that underneath and that'll drop the edit button in we just need to make sure we've got a few things in place now that this all works the way we'd expect it to so we need to do is make sure this links to the correct page so this is the edit in the authors post so we're going to click we'll take anything out that's already in there and we're just going to start typing in author so you can see we've got our pages showing up and we've got edit author post which is the page that's going to be the one that we want so we'll click on that make sure that the url query is left and sent to post underscore id that should be the default if for any reason it's not just put post underscore id inside there now you can set anything else if you want inside here so we've got things like permissions and so on so we can choose who can have access to this so at the moment it says only logged in users selected by role we're going to change that administrator is perfectly fine but because this is for the user in other words the author editor or administrator we need to make sure that we have the permission set correctly for all three of those roles obviously if you've included contributor or any custom roles you need to include those inside there as well we're going to remove the select by user because we don't want to limit this to a specific user we want to give anybody access that fits into those three roles but we also need to make sure that it only shows information to do with the post author so i'm going to do is just dynamic selection and just choose post author from there we're now basically putting some extra restrictions into place that says you have to be in administrator editor or author all and you have to be the post author okay so i hope that makes sense now what we're doing there now if you find this is starting to get a little confusing with all these different permissions and things like that what i would suggest is a piece of paper and a pencil just sketch out really roughly the different pages for your user dashboard how they interact with each other and what links they need to have to each other and then when you're doing this you've got a visual representation right next to you to see exactly what it is you're creating once you get used to it though it is pretty straightforward okay so let's just publish that page now we don't want to add any conditions because this is just for our loop so we're going to leave that as it is and we've created the first part so we can exit back to our dashboard now and we can use this loop to create the actual page we want that will display our posts so let's do that next so now we need to head back over to our pages section and from all our pages we're going to come down to the my posts i'm going to edit that and we'll open that up with elementor now and start creating what we need okay so this is where things should get a little easier now what we're going to do is we're going to do a search for post and we're going to grab the posts widget which is just part of elementor pro drop that onto our page and that'll just pull in the posts using the normal loop template so you can see no edit button nothing at all so pretty much useless at this point in time what we need to do is change the skin to custom and then that opens up the ability to use the elementor custom skin plug-in that we've been using to create our loops we now just need to choose the loop template that we've just created so we're just going to drop that down and there's our dashboard post loop by author click on that and there you can see that's now pulled in the different posts so now that we've created that we can now just configure anything else we want for the layout now all these options that you can see that are all locked this is part of elementor custom skin pro which you don't need to use for this particular feature but if you wanted to or you already have access to it it does open up some extra options you may find useful okay let's just change this now from three columns to two columns just so you can see how things work and we'll set this to show four posts only because i want to show you how the pagination works and so on so you can see it in action query is the next thing we need to set up and this is important right now you can see we've got include exclude our source is posts which in this example is perfectly fine however we need to set up the query that says only posts by the author that we're currently logged in as will be displayed to us so let me just show you how easy it is to do that advanced query options we're going to click on there we're going to choose the option for dynamic user this will then open up an extra field and we can choose the dynamic user options we're going to click on there and we're going to say the post author is the current author in other words we are the author we're logged into our user dashboard so we're going to filter it based upon our logged in user id you won't see any of this just goes on behind the scenes but that filter is vitally important to show you the right information select that now you see nothing changes on there and the reason being all the articles currently are written by me logged to my particular user account so i'll show you we'll change that we'll add a new user in once i've completed this and i'll show you how everything is working the way we expect it to finally we've got pagination all i'm going to do is just drop in the simple pagination option and you can see we now have pagination to see the next six or the next four or whatever we've kind of set up on there so we'll update this and we've now created that listing to show us our logged in posts okay so the listings are completed we now need to set up the edit page so let's come back out of this and go back to our pages and what we want to do now is choose the right page which is going to be edit author post just bear in mind that the all is for the administrators the author is basically your logged in user so let's edit that and do the same thing again we're going to open this up with elementor and once we've done that we're then going to create the edit page now this is pretty simple and straightforward we're going to do is we're going to scroll down until we find those options for the front end forms and from there we've got edit post form so we're going to drag and drop that onto our page you can see that now pulls in the basic information all we need to do is just make sure everything is set up before we go ahead and add in the extra fields the most important thing at this point is coming down to the posts option and from here we need to change this from post to edit as current post we need to change that we're going to say url query and we're going to leave it as post underscore id so if you remember back to we just created the loop item i said you need to make sure that you've got post underscore id as the variable that's going to be passed this is where we're going to use it so that's the most important thing so just make sure you come into posts post to edit change that to url query and make sure a url query is set to post underscore id which is the default value for that okay so now we can go back and we can just make sure everything is in place for this whole process so let's step through these one at a time now so the form structure is what do we want to allow people to edit when they're editing this particular post well first of all let's get rid of that title at the top because it's just duplicating what we have right at the top underneath that now we've got the various different sections the various different fields so by default we've got title and featured image we can click add item and then we can choose from a range of extra items so we want to put post content inside there that'll give us the ability to have the content editor you can then configure whether you want things to be required hid disabled you can set styling inside there you've got plenty of options to configure so i'm going to go through these quite quickly just to add in what we need so next up we've got the option for categories we're going to specify under style that this is going to be set to 50 width and also coming back to the content option you can see we've got check boxes and if we scroll on the page you can see there's our check boxes but we have other options for either single choice values or multi-choice values it's up to you which one you want choose multi-select you can see it's slightly different check boxes so set that up the way that you want it to if you want to allow people to add their own custom terms you can also enable that and then they can add extra terms in again this is one of those things it's entirely up to you how you want to set your site up i'm going to disable that for now and add one more item in and this one is going to be set to tags i'm going to do the same thing again we can't style we're going to set this to be 50 width so it sits next to our categories and we can leave it at that to be honest you can change the values and so on and there so what we've done now is we've created the key fields we want if we want to reorder these we can simply reorder them like so so it's all nice simple drag and drop now even though the content area looks blank at the moment it will pull in the basic editor with all the formatting functions and options and things inside there okay next up you've got your actions section and you can see we've got what do you want to do after you submit in other words what you want to do after you've updated the information you can choose from various different options i'm going to leave it as reload the current page because it's nice then that you can make some edits and then once you save it you'll come back to the same page and if you wanted to carry on editing you can do you can do other things inside there and i'll leave this up to you to decide which way you want to go with it it's up to you there's no real hard and fast rules configure it the way that you want to then we've got the option we've seen posts already we can say whether we want to enable the delete post option so it's up to you again if you want to allow people to delete their own content we'll switch that on you can see the delete button now appears so next up we have the permissions option this is the important section so i'm going to do is we want to say we've got the permission message you can set this to none drop in your custom message or custom content we're going to make sure that's left as message then we're going to say who can see this you can see we've got the options for logged in users and so on so we say only logged in users will leave the selected role as administrator we're going to remove the option for select by user and then we're going to move into the option that says dynamic permissions and we're going to just click on there and say post author your display options then you can set things up like whether you want to have this displayed in a modal window and so on we're going to leave those as they are now this is the free version so you don't really have access to any styling options inside here but you can you know leverage the power of elementor and elementor pros theme styles to get at least a little basic styling for your tags for the boxes and stuff for your different fields so you can get a little bit of styling i'm just quickly going to apply a little bit of styling to the actual box itself nothing much just to give it a little bit of style then we'll just make sure everything is saved and we have finished with this so let's test this out now to make sure that this is all working as expected so i've hopped over to the front end of the site we're on our dashboard let's click on my posts once we do that there's our post with our edit button our navigation our pagination all those things are in place so now if we click to open this up and edit it you can see we can now edit all the content everything is inside there ready for us to start editing updating deleting whatever we kind of want to do with that side of things so that's all set up i'm working the way we want now let's just do one thing before we go any further let's just change this first post to be owned by a different user just so we can double check that everything is working the way we expect it to so i already have a separate user test user 01 set as an editor so we're going to do is we're going to come to our posts and we're just going to change the ownership of this very first one i'm going to set this to be owned or published by the author test user and we'll update that so now when we come back to this there's our post let's refresh this and once we do that you can see that's now disappeared we don't have access to that one because we're not the author of it now i've opened up an incognito window and we're going to log in as test user 001 into our user dashboard so let's log in here's our user dashboard you can see we have no longer have access to that all posts option because i'm an editor not an administrator let's say my posts and you can see there's my only post which is this audio one we'll edit that and you can see we can edit that post so you only have access to that particular post now while we're here let's just make sure that we've got everything set up so we can't accidentally go in and edit someone else's post so you can see at the top we've got post id is 155. let's just change that to 134 i believe is one we hit that and you see we don't have access to that however we don't have an error message telling people that well you can't access this content so we don't know what's going on this could be an error it could be a million one different things let's just quickly rectify that and come back into our edit author post and what we're going to do is we're going to come up to the option where it says no permission message we're going to click on the say message and we're going gonna just drop in our own custom message inside there so we'll just refresh that update we're gonna do now is we're gonna open up that incognito window again and we'll refresh this page and there's our error message so we've now made sure that we can't jump onto someone else's content and edit that because we don't have the right permissions and we've also dropped in there an error message so people can see they're trying to do something they shouldn't okay so we've done those key things next up on our to-do list is to create the loop for our admin user so they can access and edit all posts so we're back into the theme builder we're going to come into the loop section again and from there we're going to add a new loop item and we're going to call this dashboard posts loop admin edit just because we know this is admin related we'll create our template and we'll do pretty much exactly the same as last time now close this down we're just simply going to grab the post headline or the host title we'll set that to h5 just a bit smaller we'll come back out we'll drop in our featured image and we'll do the option for post info underneath there we go and finally we're going to add in that edit option so again we're going to choose the edit button we'll drop that underneath there now we just need to set up a few slightly different parameters for this because obviously we want to limit this to only being accessible to admin users so they have access to everything but only an admin user so what do we need to do well let's just make sure that button is selected and then we're going to go through our options on the left hand side first thing we need to do is make sure it goes to the right page to edit things let's just remove this and just start typing edit and you can see that pulls up edit all posts our page we created earlier so we're going to select that making sure that the url query is also set to post id and then we're going to come down to our permissions option and from there we're going to just choose who has access to this all we need to do is only logged in users select by role of administrator and that's it there's no dynamic selections because this is going to show all posts so we can leave that as it is there we'll hit publish and we'll just say save and close we don't need to set any conditions up once that's done we can close this down and we can go and create our page so again we're going to do the same thing we're going to come back to our pages all pages and from there we're going to choose all posts and then we'll edit that with elementor so we'll open elementor up and now we can just build that out so we'll do the same like we've done the last time we're going to hit posts drag and drop that onto there change the skin over to custom choose our custom template which is going to be dashboard posts loop admin edit and you see that pulls everything in you can see now we've got test user we've got all users on this if you had multiple users they would all be displayed inside you so now if we want to we can set up any styling on here so i'm going to quickly just apply this basic styling that i've got and we can just do things like change the number of columns that will be displayed you know all those kinds of things like we've done previously up to you how you want to do it we don't need to set any query because this is just going to show all of the different posts no matter what user and finally we just add pagination like we did the last time so let's just update the page and then we just test that out so let's come back over to the front end of the site we'll refresh this and there's all posts and you can see we've got edit which we haven't done yet which we'll do next but you see test user my own logged in account so all of those records are there all the posts ready for us to edit so now we just need to create the edit post option for all posts now to do that we just need to come into our edit all posts page we're going to edit this and then start working with elementor like we've done several times already okay so let's open elementor up and what we're going to do is we're going to scroll down until we find that option for edit foot post form we're going to drag and drop that over onto our page and you see we've got all the same fields we had before so we started off with the title and the featured image so i'm going to quickly just go and add those in in exactly the same way as i did the first time so there's nothing different here i just want to speed this video up okay so there's our fields all set up next if we come up to actions you can see we can choose what we want on here so we're just going to make sure that reload current page is set show the success message and if we want to change that success message we can if you come to post for example we need to do like we did the last time we need to change the post to edit from current post and set that to url query and make sure that post id is set inside there we're also going to give the option for delete post and if you want to just do any of the other options you can do that inside there as well next up we've got the permissions and this is the important part right now we just need to set this up to be only logged in users select the role to be administrator and administrator only and then we're going to say select by user remove that from there and that's it that's all we need to do on there display options we're not going to set anything inside there we don't want to use modals or anything so we've now set this up the way it needs to be done so we'll hit update on there and now we can just come back over to our site we'll just refresh this page and make sure that everything is working so we'll say edit post and you see that opens up a new page and you can see there's our post let's close that down we'll try the next one which is by me as a logged in user not my test user so we'll edit that and you can see this allows me to edit that particular post now there's something you may have noticed you may find that when you do this you'll open up a new page every time you click on that edit option or that edit button which isn't ideal in a lot of cases all you need to do to rectify that is come into your loop inside your template and you have to do this for any of the loops that you create using this method we'll edit this with elementor and inside there we're going to select the edit post button and when you have the link to edit page click on the little cog icon and just choose uncheck the option to open a new window and click on update save and close that and you'll then find this will open up in the same page at which you're actually choosing what post it is you want to edit okay so we've done most of the key things there's a couple more things we need to address before we wrap this video up let's come back to our dashboard back into our pages and we've got two more pages we still need to focus on we've got the option for adding a new post and also for the user dashboard so let's start off with the user dashboard first let's edit this what we're going to do is we're just going to simply edit with elementor and we're going to add in our latest posts with the edit option in place so we're going to do is same as we did before we're going to add the posts widget we're going to choose the custom option inside here now this is going to be to everybody so in other words whether you're an administrator an editor or an author so we're going to do is we're going to choose the dashboard post loop by author because this isn't going to be specific to an admin user this is just the six latest posts for your account that you're logged in as okay so you can see that now pulls that information in obviously at the moment we see an all post so we need to address that and to do that we simply come down to the query option and inside there we choose the advanced query options set that a dynamic user like we did earlier change that to be post author is current user and you can see that now immediately removes anything isn't related to me as the logged in user and author of these posts now if you want to adjust the styling on this you can do just that so we'll just paste in the style that i've done and we'll just change this over and we'll set this to have a layout of for example two let's set that to four just so you can see and then we'll add the pagination in there so you know again it's up to you how you want to do this you can set it to as many posts as you want to show for the latest posts we'll hit update on there and that's our dashboard homepage setup so let's come back to this go to our user dashboard and you can see there's our posts we can edit that and we'll go in and start editing that particular post so really quick really easy to do the next thing we need to address is the add new post option so let's come back to our dashboard back to all our pages and we're going to just create that option so add new we'll edit that we'll open that up with elementor and then we're going to add the add new post option in so again we're going to come down to our front end forms we're going to add in the option for new post drag and drop that onto our page and now we can start building this up so it works in a very similar fashion to what we saw before so i'm not going to bore you by go through adding all these fields in i'll quickly add those in for brevity and then we'll move on okay so that's all that in place now we've done that let's move on to the actions option and this is we can choose what happens so redirect after submit reload the current page do you want to clear the form or take it to the edit form option it's up to you how you want to go with that i'm going to leave it to clear form just for the speed success message well pretty self-explanatory you can drop what you want inside there now underneath posts this is where you can choose how you want the data to be submitted how you want the post to be handled and so on so you can see post status is set to published as default i would recommend generally setting that to pending review this means then that a post will be submitted won't automatically be added to the site so it allows an administrator to just make sure that they're happy with the content that's being added you then have the option for new post type you can see we can set this to post page and other things so if you wanted to use this to create pages you could do it's up to you how you want to work with things i generally think setting up to work with post is the more intuitive way of working okay next you have your permissions option now this is where we can set up like we've done many times before who can access this and so on so i'm going to say is this is for editors administrators and authors because this is a kind of general feature for everybody that's logged in with access we'll remove the user option and we'll then jump over to display options and make sure everything is set inside there so if again if you wanted to set this as a modal you could do that all those kinds of things so we've now created our add new post and set everything up inside there let's update this let's come back into our site and we'll refresh this and we now have our add new post you can see everything is blank ready for us to start adding content in so let's just give this a test make sure everything is working so we're just going to call this sample post we'll drop in some content inside there we'll say it's canyon tags we won't worry about that we'll add an image and we'll just upload something doesn't really matter too much what the image is and we'll just upload this image once that's uploaded it might be a little large image there we go we'll say select and we've now created that so we'll submit this form and we get a message at the top it it's been successfully added and now if we come back into our dashboard and we go and take a look at our posts we should find we've got a new post inside there so there's our post section there's our new post set to pending the author is set as me and now if i want to i can just quick edit that and i can say that's now been published we'll update it come back out to this and take a look at my posts and we should find there's my new post and if i want to edit that i can edit it super simple everything's set up exactly as we need it for our full front end dashboard with admin level access user restricted access and the potential to do a heck of a lot more all just using free tools alongside elementor pro if you want to see what else you can achieve using similar pro level tools check out this playlist next now if you like this type of content and would like to see more please give the video a thumbs up hit the subscribe button and smash the bell icon but if you didn't find it very useful well feel free to hit that thumbs down button twice as that works pretty well too as always all of the applicable links for everything i've covered are in the description below name is paul c this has been wp tets and until next time take care

Channel: WPTuts

Views: 49,224

Keywords: WPTuts, how to create custom front end wordpress dashboard for your website clients, how to create custom front end wordpress dashboard, custom front end wordpress dashboard, creating a custom wordpress dashboard for your clients, custom wordpress dashboard for users, create custom wordpress dashboard, custom wordpress dashboard, dashboard wordpress, wordpress frontend dashboard, wordpress frontend posting, wordpress user dashboard in frontend, frontend dashboard

Id: U0yLNGCAVaM

Length: 40min 56sec (2456 seconds)

Published: Mon Nov 02 2020