Custom Front End WordPress Dashboard with Elementor Pro & FREE plugins

if you've ever built a website for a client with wordpress and they've logged into the standard wordpress dashboard and caused all kinds of problems well you know how frustrating that can be on the other hand there are times where you may want to build a site and have several people collaborating and adding simple content to the site but not give them access to the dashboard at all in this video i'll show you how you can build your own custom front-end dashboard for clients and users without breaking the bank in fact the only paid tool you need to follow along is elementor pro and that's simply because we need the dynamic tags option all of the other plugins are 100 free now if you're ready to follow along and build a more focused and unique front-end dashboard for your wordpress clients let's start by taking a look at what we'll be building and then we'll follow on and take a look at the tools we need to actually get started so this is our very simple custom dashboard that only displays the posts that we've created and that have been approved by an admin as you can see we've got some nice simple clean options add a post you've got your site home to take you back to your site your dashboard which will bring you back to this section list posts which will show all of the posts if you have a lot of posts and finally the new post which is basically the same as the ad post option on the left hand side come down underneath then you can see we've got each individual article or post we've created and if i click edit post it'll take me in and i can start editing the content of that post in a nice simple clean editor and then i can update or i can delete directly from inside you so this is what we're going to create in this simple dashboard option but even though this is pretty simple and straightforward what we're going to create you can do a lot more than just this and if you upgrade to the pro version well i've already created a really comprehensive tutorial on how you can create a much more advanced dashboard where you can create custom post types normal post types edit user profile and loads more so if you want to check that out link will be in the description however for a lot of use cases where you just don't want people to have access to the dashboard of wordpress and you just want to allow them to create content edit content delete content and so on that's associated with their own user account this should be a really simple option and apart from elementor pro which we need to have everything else is absolutely free so like i say pro is the only option you have to pay for everything else totally free so let me just show you what we're going to be using now we've got acf front end which allows us to create this sort of front-end dashboard side of things advanced custom fields the free version you have to have this installed for acf front end to work advanced post queries because it allows us to apply some extra queries to filter things out based upon the user that's logged in which is really useful and again totally free content control to restrict access to the dashboard section without needing to touch any code elementor custom skin so we can create a custom skin based loop and elemental and elementor pro for the obvious reasons okay so let's go through and start building things so let's kick this off by creating the first couple of pages we need let's add a new page in and we're simply going to call this dashboard and we'll just publish that page take this off and just publish it now we're going to create three more pages so we're going to add a new page and we're going to call this edit post publish that we're going to do one more which is called all posts and we'll publish that and finally we'll add our third page which is called add post and we'll publish that okay so now that we've done that the next thing we want to do is set up the permissions for who can actually access this the information these pages and restrict them from prying eyes to do that we're going to be using the content control plugin that we've installed so what this allows us to do is just basically set up what pages can be accessed by what level and what we want to do if they do or don't have access so we're going to add a new restriction and we're just going to set this up to be dashboard restrictions who can see this content logged in users and then we can choose which roles we want to allow to have access to this particular content so we're going to say administrator author and editor we're going to leave the subscriber and the contributor out so anybody that's associated with those levels can't access this particular section next up we've got the protection and this is choose how to protect your content we've got redirect or custom message and we've got where will they be taken login and back home page custom url so it's up to you how you want to deal with this i'm going to leave this as redirect and login and back and i'm going to jump to content and we're going to specify what we want to have in here so it says is a post which is not what we want so we're going to expand this out delete that expand that out and we're going to come down and we're going to say is a selected page so we say a selected page and we can choose what page or pages we want so we've got edit post we've got dashboard and we should have all posts and finally we'll add the add post option and that's the sections now that we want to restrict access to with inside our site if you want to get more creative and like say if you add more pages you just need to remember to come in and add those in to what is and isn't allowed to be accessible we'll hit add on there and that's our restriction all set up if you want to edit that at any point you can simply come back into edit make any changes you need to okay so that's that we'll hit save changes on there and we've now set up the conditions to stop people that don't have access to that trying to get in there so let's just quickly test this out now just to make sure that everything is working as we expect so this is our demo site on the home page we'll click to at the dashboard and we don't have access because it's redirecting us through to the login section so if we just log in that'll take us into our dashboard which currently is empty obviously but we've got that all working now so we can see everything is set up the way we want it to okay so let's start building out these pages let's start off with our dashboard first of all so we're going to come in and edit that we're going to edit with elementor once you've opened that up we're going to set a few things that before we even start going to come to the settings and we're going to disable the title we're also going to specify this page layout is going to be the canvas because we don't want the header and the footer we want a completely blank layout because obviously things inside the dashboard are going to be different to what the front end of the site looks like so with that being said we need to create our own custom header section so we start by adding in a section and we're going to just set this to be three columns one row making sure that's selected we're just going to come in and we're going to specify the vertical align is going to be middle so everything will line up in the middle we're going to squish this over to about 15 percent on the right hand side we're going to just drop in an image inside there so let's just grab an image we'll drop that up into there i'm going to do is going to set this up to be a dynamic value so we're going to hit this dynamic tags option and this allows us to access all the dynamic information to do with our site and various different aspects so what we're going to do is we're going to just choose the user profile picture and there's my picture so you can see that's now being pulled in so all we're going to do is just style that however we want now you're not limited to using this profile picture if you want to you can do other things you've got various different options come back out you can see we've got local avatar we've got local avatar we've used an acf image you can do lots of different things but i say we're going to keep this to the user profile picture because that just links it through to my gravatar we're going to come into style and from there we're going to just choose to put a border radius and we're going to set that to be percentage and 100 and that will create a nice round shape and if you want to put a board around that you can do it obviously if you want to adjust the size of this you can do just that as well so i'm going to make this just a little smaller maybe let's go for pixel value inside there set that to around about 65 somewhere around there that should look good okay we're going to put a border on that we can do what we want with it so let's say a border type solid we're going to put a three pixel board around it and we'll just quickly change the color on that to the color i want to use and then we're going to apply this to our global colors and we'll just set that to orange create that so we've now got a global color we can reference now i'm not going to spend a lot of time in this video showing you how to style things because if you're following along with how to create a custom dashboard i'm sure you're more than accustomed to working with elementor and elementor pro styling features to do all those kinds of things so i'm going to go through those quite quickly and probably just apply styles that already have saved just to speed the process up so you can get to the good bits okay so let's just squish this over a little bit as well and we're going to do is we're going to grab a button and we're going to place a button to the left hand side and we'll style that in a second and we're also going to come in and we want the menu we want nav menu and we're going to drop that into the main area set that to the right hand side and we'll just set up a few parameters on there a little later because at the moment this is not the the menu we want to use we need to create a custom menu for this and we'll apply that a little later so don't worry about that just yet okay let's just quickly change this button now to make a bit more sense and we're just going to say add a post and from there we're just going to link this through to this to to add post so there's our post page okay so we need to do now is just quickly change the coloring and so on and there and we're going to do is we're going to style and apply our global color so we're going to change that background color to a global orange okay so that's the basics of that done next thing we want to do is just put in our bio section so we're gonna do the same thing again we're gonna add in another section we're gonna set this to be three and we can just adjust this if we want to so we're gonna set this first section a bit smaller like so roughly it doesn't really matter too much you can style this like i say as much as you want let's just add in some spacing around this as well so let's come into advance we're going to drop some padding in the top of let's try 50 top 50 bottom i should do to start off with okay so now we can go in and set up whatever things that we want to so let's just say for example you wanted to drop in a larger version of your avatar inside there well you could do that just simply by dropping the image in choosing the dynamic option choosing the user profile picture and doing the same thing again so we can adjust the size on that if we want to go to styling border radius and we're going to set that to percentage 100 and we're just going to make this a little bigger there we go which is a percentage you should see okay so it doesn't look great quality but let's not worry too much about that and the same again we're going to just drop the solid border on that three pixels set our color to orange okay next up we want to put some bio information in so we're going to do is we're just going to drop in a heading to start off with change this to dynamic and this is the beauty of this is all this information is dynamic we're just creating this sort of structure for this information and this is what i love about using dynamic info so i'm going to come down to user info this time and we're going to click on the little wrench icon and from there we're just going to choose the display name and depending upon what the display name is you can see that's been set up on there now obviously you can change your display name in your bio very easy to do next up we're going to drop in another piece of information so we're going to come back to our widgets we're going to do another heading this time we're going to set this something like h6 and we're going to come into our dynamic info back down to our user info and this time click on the wrench icon we're just going to come down and choose the email and there you go there's the email and the final thing we're going to do is just drag this text editor into the dynamic tags again down to user info and from there we're going to choose the bio okay so that's the basics of the page laid out what i'm going to do now is i'm just going to quickly run through and style these and then we're going to come back and take a look at moving on to the next stage let's say you can style this in any way you want so just bear with me and i will be back soon okay so now we've created the header and the navigation we're now ready to move on to start building out the actual list of posts to do that we're just gonna create a new section inside here and inside there we're going to drop in a title which we're just going to call latest posts again we'll style that a little later okay so before we can move on we need to create some way of listing the posts for this particular logged in user now to do that we're going to use a plugin called elementor or le custom skin this allows us to very easily create a loop layout that we can then do whatever we want to with it so let's do that next now to create our custom loops we need to go back into the theme builder and from the theme builder you'll see at the top we've got a new tab called loop and this is for elementor custom skin if you're using the new theme builder as part of elementor you can click and you'll see loop is the first item inside there all we need to do is click on the plus and that will then allow us to start working with elementor to create this new loop so we're going to close this down because we're going to start working from scratch we'll do a couple of things we're going to come into the settings section and from there we're going to give this a name because this is one of those areas inside elementor if you're using the new theme builder and you don't set the title up at this point you have to do it afterwards and it can cause some kind of confusion so we're just going to call this dashboard post loop so we're just going to drop that inside there that's what we want now we can start creating things now you can ignore the header the title the footer all those things are basically going to be ignored when we actually call this loop up and use it in our design so forget all about those things if we go to the preview settings you can choose what you want to actually preview so if you've got custom post types you could preview those inside you to make sure everything looks the way you want and if you want more information about how to use the loop function as part of elementor custom skin i've got a load of tutorials on it so i will drop a link in the description so you can check those out after you finish with this video okay so what we're going to do i'm going to come back over i'm going to start building out exactly what we want to display so we're going to grab the post title drag and drop that onto our page and you can see this will pull our sample post in which is fine i've got a sample post installed in here just to test things out i'm going to change this to something like h3 come back going to use the post content or the post featured image whatever you kind of want so we're going to grab this featured image we'll drop that in there we can reorder these if we want to to make sure everything looks the way we want to and it it's up to you how much info you want to put inside you what i would suggest as a bare minimum is the featured image the name of the post and what can be useful especially where you may have post names that are a little bit ambiguous is we can use another feature that's part of elementor custom skin what we're going to do is we're just going to simply come down and we're going to say we want to drop in a text editor drop that inside there i'm going to click the little dynamic icon option and we're going to come down to post summary and like i say this is an elemental custom skin feature we'll click on that and we click on the little branch icon we can specify how many sort of words we want to list inside here so what we're doing is we're giving it a title and we're giving the first 25 words of the article which hopefully should help clear up any confusion that may be there and obviously if you want to you can do things like drop in the post info we can drop that underneath there and you can see that will give us more information again and we can get rid of anything that we don't want so for example the date and time may be the only thing we want comments if you allow them on your blog site whatever up to you okay so once we've done that we're simply going to select this section and we're going to give it a white background so we're going to just go to style and we're going to set the background type and we're going to set this to a global color of white and we'll click on publish now we're going to set any conditions we don't need to we're going to say save and close and that's basically created that loop item ready for us to start referencing it now even though we've created it we have no way of editing it yet and this is where we're going to use the acf front-end plug-in to make our life easy we're going to go back to our widgets and from there we're just going to type in edit and you can see we've got a couple of options we've got edit post form edit user form edit button and so on we're going to choose the edit button we're going to drag and drop that onto our page and we've now got things set up so we can just make sure everything is configured the way we wanted to before we move forward with this so you can see we've got the button all the information is there the link to edit page is all set up for us the url url query key is set up for us everything we need is configured all we need to do is set the styling on this i'll do that behind the scenes and style everything else on this everything looks nice and neat and tidy and then what we'll do is we'll move on and start working with setting this up okay there's all my styling done so i'm going to hit update on there and we're going to say save and close we don't need to add any conditions okay now we've done that we're going to exit back out of this and we're going to go back to our pages and back to our dashboard edit this with elementor once we've done that we're going to just drop in a post list so this is very easy to do we'll cover the pro options i'm going to drag and drop a post option inside there we're going to change the skin i'm going to change that to custom and from there we can now select the default template and this is the template we've just created with elementor custom skin so click there's our dashboard post loop we'll click on that and you can see there's our post loop our item inserted in there with all the styling with the edit button with everything in place so everything is now looking pretty cool and as we add new posts in they will appear inside here as well now the way this listing is set up at the moment it's going to display everybody's posts it's not going to discriminate between who's logged in what logged in user you are all those kinds of things we need to rectify that and it's very easy we're going to use another free plugin we're going to scroll down when we've got this post section this post widget selected i'm going to come to the query option and inside there we're going to come right the way down and see it says advanced query options we're going to click and we're going to say dynamic user this will allow us to filter the information based upon what user is logged in and some various other parameters so you can see we've got post author is current user post author is current post archive author and so on and so forth we want to set this as post author is current user so what that's going to do is when we log in it's going to only show us the posts that are associated with the logged in users account which obviously should be you so once you've done that we've now set everything up so we only see our own posts okay so that's that side of things done we've now configured everything to only show our own content so let's update this and let's just take a look at this page in action just to see what happens let's preview it now what this does is this opens up our page and if we click on the edit post option that's going to take us over to the edit page as you can see edit post which is the other page we just created but at the moment there's nothing on there so we now need to go ahead and set up all the editing options on this page so that particular article can be edited now to keep this tutorial moving along i've already gone ahead open the page up added in the header and the bio section now this is something like i said the beginner video i'm going to go through a lot of these different things quite quickly because i want to focus on the key more important things okay that being said what we need to do now is just add in the ability to start editing so we need to do is we're going to do a search for edit and from there we want the edit post form i'm going to drag and drop that into our page and this will pull in some basic info you can see the title and the featured image have been added already we're going to get rid of the header at the top because we're going to insert that in as a custom header ourselves now it's worth bearing in mind at this point one of the limitations of the free version of acf front-end forms is you can't use the styling options if you come into styling you can see everything is locked you have to go pro for that you can however get past some of those limitations by configuring through your theme style how you want things like the different form elements and buttons and things like that to look and this will basically pick up most of those options so you still get some basic styling options through elementor and the theme styles now if you go pro you get a lot more features and is one thing that i would recommend taking a look at because the pro offers quite a lot of extra functionality you may find invaluable okay that being said my little pitch of the way let's move on okay so what we can do now is we can come in and we can add in the extra fields that we need so we're going to do is we're just limiting this video to just be in the default fields that are part of wordpress normal posts but you can link in advanced custom fields post types if you've added those into your normal post or if you created your own custom fields you know you know custom post types and so on you can still reference a lot of those features okay so we're going to do is we're going to start adding these extra options in so we won't post content we want to add in another one which is going to be the categories and the final one for this example is going to be tags okay so there's the five sections for this particular post to edit it now what we need to do before we move any further is set this up so it pulls in the correct data you can ignore what's being displayed at the moment this is just kind of some information that's been pulled in and it's not relevant right now but what we need to do is we need to come to the post option and from there we need to set post to edit from current post and we need to change that to url query and post id is perfectly fine because that's what's going to be passed over via the url to allow us to edit this post when we select it so with that being said we've done what we need to do now we've set the basics that we can now go through and configure some of the other options first of all let's set our permissions only logged in users yep we want to have that inside there we're going to set this so we know we've only got authors administrators and editors that can make any changes this kind of content we're going to remove this selected user and we're going to use the dynamic permissions again like we did it earlier and we're going to set this to be post author so what we're doing is we're just limiting this to make sure that if someone tries to hijack the link the url which passes the data between the selection and the editing page we can still restrict it again that if the person is trying to edit the content is not the author they can't see any content so we're just putting that little restriction in there just to help us ease any problems that may arise from people trying to edit other people's content okay so those things being said what else do we have to do well if we go back into the form structure you can see that we can edit more information about each one of these fields so at the moment we've got content and we've got everything set out inside there and you can leave most of these as they default because they should be pulling the correct data for you anyway but you can reference dynamic tags if you want to for labels and placeholders and things like that same goes for instructions if you want to add instructions how to use a particular feature but because we're not doing anything particularly complex with this you can kind of just go with what's already set up in there hop over to style and you can see we can set things like margins padding and also the width of this particular field element based upon or this form element based upon the design you're working with and also you can set that up based upon the device you're actually viewing it on so what we're going to do is we're going to come down to categories and we're going to set the style on there to be 50 and we're going to do the same thing then for the tags and of that style i'm going to set that to be 50 as well now when it comes to things like tags and so on you can specify whether you want to show the labels whether to hide things so for example we come to content we don't really need to have a field label on there so if you want to we can just take that off and people can see exactly what's going on if you want to reorder these you can reorder them very easily so we say we put the featured image at the bottom we can do just that so now we've got a simplified form layout all ready for our users to start editing actions we can come into here and you can see what do we want to do after this page has been updated when we've made a change you can reload the page go to a custom url and so on we're going to leave it to reload the customer at the same page because we'll make people may save this and then carry on editing as they go along you can change the messages show success messages all those kinds of really useful things come to the post section you can see we can change the default title default featured image if you want to put a placeholder in just in case someone didn't put anything in then you can set your post state there so if you want this to go once a change has been made back into pending review for example you could do just that put into private draft whatever you kind of want we're going to leave it as published though for this and we've set all these things up do we want to offer a delete post option now by default the only option we have is to edit it from the first listing and then come in and update any changes we make to this however if you want to you can drop in a delete and you can see we can change that to delete post we can take whatever we want delete icon button all those things are inside there and again we've got that redirect after delete what you want to do well you could say go to a custom url which would make sense what we'll do is we'll just say we want to go back to the dashboard and there we go so if someone deletes this it'll go back to the dashboard and you see this is kind of picking up the basic styling which you can set up all through the theme styles as part of elementor itself permissions we've already set up display options if you wanted to and keep this really simple you can do things like set to show in a modal so if you wanted this to sort of pop up and edit on the same page as your listings you could do that kind of thing okay so let's just update our page now and let's test things out we'll go into our dashboard we'll edit our post and you can see there's everything we need to start working title all our content inside the normal editor we've got categories tags featured image and so on we can update we can delete we can do what we want inside you so that's the editing section all done now let's move on to the create a new post section again i've gone ahead and just inserted the relevant template files to start working on the add post option so let's find the widget we need so we're going to scroll on down and we've got new post form so this is what we're going to use so we're going to just drag and drop that into our page and you can see it looks very similar to the edit option let's get rid of this title at the top and we can do the same things again so we can just add in the fields that we want to use so we want post content we want to change this now to categories and we want to add in the final one which is going to be tags we're going to reorder these like we've done before we're going to set the categories the style to be 50 percent and the same goes for the tags style of 50 percent all sorted on there and then the content will just remove that field label so you can see everything looks pretty much exactly the same just this time it's a blank form ready to take our data in so what do we have on this option again we've got actions so we can say reload the current page after the form has been submitted after reload clear form so you can start creating a new post or you can go to edit form it's up to you how you'd want to work with this you can see you've got url parameters if you want to add those in preview the redirect url show success message all these things are pretty self-explanatory post you can see if we want to put some default values inside there we can do what i really want to do though is change the post status because when someone creates content on this particular website i don't want it to automatically publish i want to be something that has to be approved by an admin of the site first and to do that all we need to do is change the post status from published and we're going to set that into pending review or draft it's up to you which way you want to go about it we're going to say pending review let me say new post type you can see we can do posts pages and so on we're going to leave that set to post we're not going to worry about post terms but what we have at the bottom is the ability to save these as drafts so you could have someone that's working on content that they don't want to have submitted for approval yet it's not ready but they want to come back and edit it well we can use the draft option so we can say save as draft as an option we get an extra button and we can say show saved draft selection so you can select the various different drafts you have to carry on editing all these options are available to you so if you want to make it a more useful place for people to work when they're creating content this is a really good way of doing that if you want to you can set a save draft description you know you've got all those options there again permission you can see permission message only logged in users again we're going to change this so we have access based upon authors editors and administrators and we're going to get rid of this particular user option display options again if you wanted to use a display and modal and so on all those things are there for you and like i said before your styles are locked to the pro version so you'd have to rely upon either editing them manually or using these theme styles that you can build as part of elementor let's just click update on there and we've now created our add new post form so providing everything's okay we can now test this out with things like our links to add a post and everything like that so let's take that for a spin we're back into our dashboard we're gonna say add a new post and from there we're just going to create a new post so let's test this out we're going to call this sample post 2 we'll drop in some basic text inside there we'll say this is blog and news we could set a tag if you wanted to so we could add a new tag and we could just say doesn't really matter too much we say woohoo and we're going to close that down and we're going to do is add our featured image so we'll choose this featured image and select so everything is set now so if you want to save as a draft we could do that but we're going to say submit so we're going to click on that that's now tells us at the top this has been successfully posted and brings us back now to a blank form so we can start editing and create a new one if we wanted to okay so now we've seen that if we go back to our dashboard you can see our post isn't currently showing and that's because we're only going to see posts that are set up as being approved now because i'm logged in as an administrator i can commit the post section and i can go into there and i can approve any post that's pending so you can see sample post 2 though we just created is set as pending so all i need to do is just come into quick edit and i can change that from pending review and i can say this is now published update that now if we come back to our dashboard and refresh there's our new post which we point we can come in and we can edit that and do whatever we need to with it so all those features are in there for us now while we're in the post section let's just check just to make sure now that everything is working when we're taking a look at whose listings we're going to look at so for example let's take the sample post the original post we're going to quick edit that and we're going to assign this to a different author so assign that there we'll update it when we come back to our dashboard you see now we only have sample post too refresh that just to make sure you see we only have that post inside there if we go back in and we just quick edit this and set it back to my account update come back in and refresh we can see there's both the posts so we know now that everything is working so it's only going to list any of the posts that we've got created and associated with our logged in user account okay so come back into the theme builder section because there's one more template that i want to create i want to build another loop which is going to be useful i will list all posts and this is going to be a kind of a smaller streamlined way of seeing what posts we have and then going to edit them so we're going to create a new loop and we're just going to call this one list all post so we can just close this down and hop over to the settings i'm going to give it a name right at the beginning we're just going to say all posts loop dashboard just so we know exactly what it's referring to okay so with that being done we can now start building out the design structure for this so we're going to come back in and we're just going to create a really simple layout i'm going to set something up like so and we're just going to set this to be really really simple let's squish this down to maybe 15 somewhere around there i'm going to do the same again we're going to drop an image in so we'll pull in the featured image we'll drop that inside there we'll set that to be small and we're just going to come back over and we're going to say we want to pull in the post title and finally we're going to pull in just the post info drop that inside there we can set the styling on this just to make them a little smaller so we're going to set this something like about h3 and we'll just quickly set our styling up we'll set that change our typography like so there we go and we just quickly do this last section so it's going to come into our styles i'm going to come to our text we'll set this to the lighter text typography and set this to something like about 12 and finally we'll just go to the icon set that to 12 as well and change the colony to our orange okay so we've created a much simpler layout actually let's just add in an extra column at the end adjust these up again like so and at the end we're just simply going to drop in that same edit button so we're going to scroll down until we get the options and we're going to say we want the edit button we'll drag and drop that over there and then we'll just quickly set everything up on here to be aligned to the center like so and we'll just set the background of this to be white so these are all just things just to quickly show you how things are going to work okay so with that side of things in place like i say i'm not worrying too much about styling everything i would spend more time on this we'll publish that we'll save without adding any conditions i'm going to come back out of here and we're going to go into our pages and we're going to open up our all posts edit that with elementor and like i've done before i've simply just created the header section and the bio section and set everything up ready so we need to do the same thing again we're going to grab this posts option we're going to drag that onto our page i'm going to change this over to use custom and we're going to change that to use all post loop dashboard set this up then the way we want so we're going to say that we want to restrict this to only display in the one row let's close our layer down so i'm going to come down to the bottom of the layout column set to one we're going to set this to something like about 10 posts per page we'll set the query then like we've done before posts is perfectly fine and what we need to do is come down to our advanced query options dynamic user dynamic user option post author is current user and we're going to set the pagination like so so now we've created a really simplified listing of more articles that'll give us more content as opposed to our dashboard homepage which just kind of gives us a selection of the most recent posts we'll update that and we've pretty much set everything up on there okay so we are pretty much on the home stretch now we just need to do one real final thing and let's change this navigation to give us some sense of the pages we need to access and also put a log out option inside there so let's come back out of this and let's just hop over into our menu structure so we're just going to do a search for menus we'll go into there and we'll create a new menu and we're just going to call this dashboard menu and we'll save that we'll create it and now we can just add what we want inside there so we want dashboard we want add post all posts edit posts add that inside there and we're also going to add a custom link which we're just going to call log out now to create a logout link is fairly simple and straightforward we just need to add a little bit of extra information onto the end of the normal domain for this particular site so we'll do is we're going to put in the url for the site itself and then at the end of it we're going to add this extra little bit of code on now this will be in the description below so you can see exactly what we're doing but we just added this extra little block on that just says after whatever domain it is that we want to use wplogin.php question mark action equals log out and that will create our custom logout so we'll add that at the end there we go so that's our setup we're going to take at the edit postcode so that doesn't make a lot of sense so with this i was set up for our dashboard we'll save that menu and now we can do is we can edit that and add that into our header template so if we go back to just one of our pages for example we go into our dashboard page we'll edit that quickly what we'll do is we'll just change that up there which is that from main menu to dashboard menu and you can see there's our dashboard menu in place with everything we need so we've pretty much built out a very simple dashboard which is restricted to only the logged in users details they can add posts they can edit posts they can delete posts they can create drafts of posts this is a great way of keeping your clients out of their website's admin but there's one more thing i want to show you because if they know what the url is to get to the admin they can still kind of access it so we need to stop them from doing that the nice thing is acf front end forms allows us to do just that now this isn't geared towards working with you know lots and lots of users and tons of people that can log in and all that kind of thing this is more intended for smaller sites that have a small selection of users that can add content edit content and so on but what we can do is we can come into any of the users so we'll come into all users there's my test editor which is set up using the editor role we're going to edit that particular user and if we scroll down there's an option added in by acf front-end forms called hide admin area we'll check that update the user and now that user can't access the admin they'll be pushed back to the site to log in and they can't access it so we give ourselves an extra little level of protection knowing they can't get into the places they shouldn't but they've got a nice front-end dashboard to work with to add content and do all those kinds of useful things so there we go that's everything now in place our dashboard now add posts you can see i've done a little bit of styling through the theme styles just to make everything look a little better this is spending a couple of minutes you can always spend a lot more time all posts so you can see we can edit our post direct from here if you want to you can come in edit our post on our edit post page is all set up and styled as well finally there's the log out option which says are you sure you want to log out and we can hit log out and we are done and takes us back to the login section so that's how we can create our custom dashboard without spending any money on top of elementor pro now taking this topic further while still using many of the tools and the techniques covered in this guide is absolutely entirely possible i suggest checking out this video you can see next to help you add even more functionality to your skill set and your wordpress toolkit if you found value in this tutorial please give it a thumbs up smash the subscribe button and hit that bell icon but if you didn't find it useful well feel free to hit that thumbs down button twice because that seems to work pretty well too as always all of the applicable links for everything covered are in the description if you need comments questions or feedback or anything drop those in the comment section my name is paul c this has been wp tets and until next time take care

Channel: WPTuts

Views: 31,870

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

Id: Z_3PAPs9CHQ

Length: 39min 25sec (2365 seconds)

Published: Fri Oct 09 2020