Create the ULTIMATE WordPress Custom Frontend Dashboard for Clients | Elementor Pro

since i first tested dynamed rex yet a few months ago i've been looking into how viable it would be to combine this with acf front-end forms pro to create a sort of simplified block builder on the front end of the site and then let clients and users have access to those to build up more feature-rich designs without any form of admin access now thanks to the hard work of both roloff and shabti and their teams this has become a viable option and in this video i'm going to show you exactly how to achieve that vision for yourself before i do though let me just preface this with two things one this is not a beginner's tutorial if you're not used to working with the likes of wordpress custom fields and dynamic data you really should get familiar with those tools first secondly this is not a full-on deep dive tutorial i'm assuming an awful lot of prior knowledge knowledge that i've covered many times in other videos on building front-end dashboards for wordpress and i've linked some of those in the description below so you can check out those videos before you start working and following through with this particular tutorial now with all those points cleared up let's hop onto the computer and i'll show you what i'll be creating in today's tutorial so there are currently two different sides to this tutorial we've got the front end dashboard facility which is what you can see at the moment and then we've got the actual designs that we're going to use so what i want to do first of all is just quickly show you what the dashboard does and then i'll show you how that's reflected on the front end so this is the dashboard design is basic you could go anywhere you want with this using elementor so you can get as creative as you want we have some options like your dashboard home which will list all of the posts associated with your particular account you can add new posts inside you you can edit posts and you could if you want to set up like an edit profile for example when we come in and take a look at one of the posts so we can choose this one for example and edit it we'll hop over into what you've probably seen many times in the past with any of my front end tutorials your title your content your featured image and so on those normal things you have as part of wordpress at a typical post and then we may have some custom post sections in this example we're using flexible content and what the flexible content allows us to do is put in various different types of content and we can create the template for these contents how they're going to look on the front end and then we can let users basically choose what they want from a list of custom blocks they can reorder them they can add content in it and you can really get super creative with this so for example if we open up the title section which is one of the flexible blogs we open that up it's a really simple block it has a title which we can use in various different parts of our page if we go to the description for example which in this case is a gallery description this is now a little bit more feature-rich we've got a wysiwyg editor at which point you could also have file uploads and things like that if you wanted to we then have a gallery which is an acf custom field and you can see we've got all the gallery features inside there but what we also have are things like this basic content block and this is a block content as opposed to a single feature if i expand that out you can see this has a title for this section a featured image for this section content which again we can use that wysiwyg editor we also have things like background colors now currently the way this works the color even though we can set it dynamically we can't reference that just yet inside elementor itself so while this is in there and i can show you how to insert this we can't currently link that between two of the plugins but i have been reassured this is something that's coming hopefully not too long maybe even at the time this video is released but that feature should hopefully open up even more creative possibilities we've then got a button the nice thing with this is i've also set up conditional logic so if you don't put any text in there the button doesn't show inside this custom block if you do then you have the button text and when you put a url in there so we'll just type anything in you can see we also get a button color and again this is using some conditional logic and when we have that ability to be able to link these colors we can then let the user the person that's actually creating the content get really really creative and you can create as comprehensive feature blocks as you want to so that's the kind of thing we have we can also just move these around so for example we may want to say i want this basic content block above everything else i can just drag it to the top now that's become the first item if i want to i can delete it i can clone it i can do lots of different things so what we're really doing is we're building a quite simplistic but also potentially really flexible front-end way of allowing people to build up custom blocks for the designs inside their pages or posts without giving them access to the backend dashboard of wordpress lots and lots of really useful power inside this kind of technique now let's take a look at what happens on the front end of the site when this custom content is flexible content has been used to populate parts of a typical wordpress post so if we take a look this is a template that we have set up using the normal wordpress featured image title all the meta fields then we've got our content but underneath that we've now got our custom flexible fields so there's our title which has been set up with styling inside elementor we've got the description we've got our gallery which works in the same way you expect any kind of gallery to work inside elementor we come down we've got another gallery description we have our custom block so this is the block if we come back over into here this is our sort of building block as you can see there's the featured image there's the content there's the button text and so on and we come back over here you can see currently there's no button displaying but if we drop a link inside there and we'll just put in something like this you can see i'm dropping a button text my website so now if we save this just save our page as normal so we'll just come at the bottom and we'll just update this we'll hop back over onto that front page and refresh that and if this is the right post you can see there's our button with our link and everything is set up including the link to take us off to another site so if we don't include any content the button doesn't show up if we do the button shows up so you can get creative added extra fields and features in that are then dynamically controlled if there's no content you don't show them on the front end inside your template files if there are you do so you could get really creative with how this all works that's the basics of what i want to show you how to build today but like i say you can go so far with the techniques that we're going to cover in this video now the key to getting this all working are a couple of plug-ins they are paid for plug-ins so let's get that right out of the way right at the beginning however they're not particularly expensive and if you want something like this especially if you're working with clients this is going to be money well spent so you can see the first one is called dynomance rexy and this is what creates the link between our acf and our front end and the flexible fields and so on and the way we can integrate those into our designs so this is kind of that link between everything we're also going to be using my old friend the acf frontend forms pro this is what gives us the easy ability to create front-end forms and link everything up through these flexible form fields so using these two in conjunction with each other you have a pretty powerful setup we also have some more plugins i'm going to quickly go through these and links to all of these will be in the description some of them are affiliate links some of them not you can choose to use those if you want to support the channel or just go direct to the website and buy them yourself if you prefer no hard feelings okay so acf front end phones pro we've just seen that we're also going to be using acf or advanced custom fields pro you have to have pro because pro gives you access to the flexible content field type if you don't have pro you can't follow along with this unfortunately so you need to have that installed we're using then advanced post queries which is from the same developer as acf front end forms pro this is totally free plug-in and worth getting even if you're not following along with this kind of tutorial gives you so many more options once you want to control different queries to do with users that are logged in and those kinds of things check it out link in the description dynamic conditions again another free plugin that opens up some useful possibilities when you want to dynamically show or hide content on the front end of your site dynamics rexy we've just seen elementor or le custom skin because this allows us to create those custom loops but there are other plugins that allow you to do that as well i just like any custom skin and we're using elementor and elementor pro pro because we need to have access to the various different sort of theme files and so on that we need to use in this so that's the key tools that we're going to be using to create this front-end dashboard and this sort of block builder feature now that we've seen what we're building and what tools we need let's get started by setting up acf and our flexible content fields let's go into custom fields let's add our new field group we're just going to call this flexible fields just so we know exactly what is going to be included okay we're going to set this to be post type equal to post that's perfectly fine but if you create custom post types you could easily use acf to link up to those up to you how you want to organize things that will work whichever way you go about doing things okay so once you've done that we now need to create our first field so let's say add our field we're just going to give this a name we're going to call this flexi content let it prefer the field name and we're going to change the field type to be flexible so we're going to scroll down until we find that option for flexible content like say this is a pro only feature so you're going to need to make sure that's installed okay now so we've got this all set up it's up to us now we want to make this a required field you can do if you want to but i would generally say unless you only have flexible fields inside the post type then i would leave that unchecked show only on the front end we don't want to do that unless again like you say you don't want people to access the dashboard of wordpress or you don't want admins to be able to change content then i would leave that unchecked as well but the options there should you want to use it okay so now we have the layout now this is basically one of our flexible fields so let's just keep this really simple to start off with and we're just going to call this gallery title because we're going to kind of have a little bit of a gallery set up we'll have a title a description and you'll have a gallery of images now you could make this into one big block i just want to show you how we can set things up in various different ways then you can go however you want to with it so we're just going to leave that set to gallery title we're going to leave the layout set to block but you can choose between table and row it's just different ways this is going to be displayed in the dashboard you don't have to worry too much experiment with it if you want to see how these things all work next up we're just going to give this the actual physical meta field content because this is kind of your grouping and this is where the field that you'll see and interact with will be listed so we're going to add one single field inside there and we're just going to call this title field name that's perfectly fine leave that set as text and you can see we've got some extra options you can set this to required and all those kinds of things and if you disable the normal wordpress post features your title your content your featured image and so on when we have acf front end forms pro installed you can then set this custom field to be any of those so your title your tagline your post title those kinds of things so you could totally customize this totally separate to the normal built-in wordpress features really cool to see that option inside there we're going to leave that as it is that's perfectly fine for this first one and that's our first flexible content block created now this is where things differ a little bit to what you may be used to when working with acf we have no option now to add another one of these in if we don't hover over this layout you can see if we do we get these four new options what we're going to do is we're going to say we want to create a new one so we're going to add a new one and you see that opens up another selection another flexi box as it were where we can now create another option so this time we're going to call this gallery description like i said you can name these however you want as long as they make sense and we'll leave that as block and this time we're just going to come in to add a field where again we're going to call this gallery description and we'll leave the field name that's perfectly fine we'll change the field type though this time and we're going to set this to be a wysiwyg editor when we do that we can now configure how this wizzy wig edit is going to work we can have visual and text if you want to give people the ability to drop in their own short codes and codes and stuff like that you can do that or you can choose between visual and text only i'm going to keep this so it's visual only i want to restrict what people could actually do toolbar you can set between full and basic if you just want people to have really simplistic options set it to basic or if you want to have full control you can set it to full let's just set this to basic because it's only a description do you want to allow them to upload media as part of their copy of the front-end dashboard in other words do they have access to uploading images and files inside this particular media this particular text area i'm going to say no i don't in this example but you can do if you want to then you can delay initialization of tiny mce which is just basically the sort of like the content editor you're going to use and if you do that that just basically means that someone has to sort of click to enable that function this can help speed up the front end dashboard if you find it's a little slow loading for any reason if you want to you can enable that again we have that feature for setting as post content if you wanted to use this in that way you could do that and replace the normal wordpress content fields other than that though we're going to leave that as it is and we're going to say i'm going to close that up we're going to add another new one in and this time it's going to be our gallery so same thing again add in another field this time we're going to set this to be gallery field name gallery and we're going to just choose this to be a gallery field type this allows us to upload multiple files if we want to and once you've done that now you've got some options to set up inside you to make sure that everything works the way that we need it to want to add instructions in you can do that show it on you on the front down all those options are still available what is important though is this return format we need to make sure that it uses the image array in this example and that's going to allow us to use the the gallery on the front end when we set up the templates with elementor so set that to image array the preview size is just what you're going to see for the preview inside the front-end dashboard you can set that to medium for speed of loading and i would say that's why the best way to do it you can then set up how you want the library to work you can say do you want to give this access to all in other words it goes into the media library and anybody can access this content or do you want to upload the images in this gallery only to the posts you associate it with the post this can be really useful for this example i'm not going to do it just because for speed of demonstration i'm going to leave it set to all but i would generally recommend uploading to post is better because it means that when the post is deleted all the media files should also go with it which is just super handy then you've got a minimum selection maximum selection in other words what's the minimum amount of images you want to allow in the gallery and what's the maximum allowed so you can set this value inside there if you wanted to or you could leave it as you want one thing i would suggest you do is set up the allowed file types and all you need to do is just literally put in the file types you want to allow people to upload separate them by commas and any file that falls outside of that will not be allowed to be uploaded it's a good way of adding just that extra little bit of security to make sure everything is safe and sound okay so that's the gallery side of things set up and we've got our first three flexi fields the gallery title the gallery description and the gallery where the images are going to actually display now this is a good starting point and gives you some basic understanding of how these work but the real power of this comes in when you create more complex flexible blocks so let's add another block in add new same again we're just going to give this a name of content block and we're going to start adding fields in now we're going to add more than one field inside here because we can just stack these up in the same way you create custom meta field groups anyway so let's just start off by just giving this a title and title for the field name is fine text is perfectly fine we're going to leave all those values as they are we'll just shrink that down and we're going to add another field in and this time we're going to give this the ability to add the content so we're just going to call this content i'm going to set this to be a let's just scroll that up so you can see what i'm doing let's set this to be a wysiwyg editor and we're going to just make sure that this is configured where you want so again we're going to set this to visual only we'll set this to full because you may want to have more control over the actual content that's going to be displayed so that's going to be quite useful and we'll leave everything as it is on there we'll just shrink that down we're going to add another one in now which is going to be our featured image now featured image is kind of going to sit in the background of this particular block layout but like i say you can get creative and use whatever fields that you want so we'll just drop in the featured image and we're going to set that to be a media file so we're going to say we want this to be image and everything else looks good inside there what we're going to do though is we need to change this this time from image array to image url because there's only going to be one image in this example not multiple images you can leave the preview size if you want to it's on your preview inside the editor itself and again i would generally recommend to upload to the post but like i say for this tutorial i'm just going to leave it to all for simplicity file types that are allowed you could do the same thing again so i'm simply just going to copy that and drop that inside there and we're going to change the button text and we're going to say do something a bit more in keeping so we can say add featured or block featured image you can see we've got some extra options inside here which are quite useful and in the right circumstances we might want to use them for now we're going to leave this as they are okay i'm going to add another field in and this time we're just going to create this we're going to create a button so we're going to say this is going to be the button that's pretty fine uh text is fine so we're just going to leave that as it is and then we're going to add in another option which is going to be the button url so and this is where we're going to use some but uh conditional logic so text is perfectly fine for that as well now we only want this to show up this box to show up if someone starts typing in button text because without button text it's going to be a blank button and look a bit odd so we're going to do is we're going to just scroll down and we're going to say that this has some additional logic so say show field if you see conditional or say flexi content and you can see all the options inside there we're going to say button text has any value in other words if button text has something in it show this otherwise just hide it keep it out of sight and we're going to leave it there once we've done that we're going to come down and we're going to just set up any other options we want to do with how this all works the only thing i want to do is change this button label to say add custom block you can choose minimum and maximum layers if you want to make sure that people don't go crazy with this start adding 50 60 100 different layout items onto a page or post you can set the minimum maximum inside there so pretty cool to see that so other than that everything else is now in place so we'll hit publish on there and that's our flexi content block all set up inside acf so now we've set things up let's just check everything is working so let's hop over to our post section we're going to come into all posts we'll have a sample one inside you and let's just edit this and we should find down the bottom of our page you can see there's our flexi content so now we can say add a custom block or we can say let's add our content block in and there's our content block with our title our content our featured image and our button text and if we type something into the button text there's our button url showing up so everything is working the way we need it to so that's that side of things all done and complete now that we have the flexible content meta fields built we need to start by building the template files for each of our flexible field types so let's do that now building our templates is really really simple and straightforward we're just going to be using the section for this so we're going to create a new section template we're going to add a new section and you see section select a location and we'll leave that as it is we don't need to worry about that right now we're going to give this a name now i'm going to precede everything that i do to do with flexible content with the term flexible and then we're just going to give it a name afterwards i'm going to quickly copy that from there just so it makes my life just a little bit easier and we're just going to give this gallery title create our template now this is going to work in exactly the same way as any other template for a section or a post or a page that you use inside elementor itself we'll close this down you can ignore all the other aspects of this because they're all going to be ignored being part of a template so we're going to drag and drop the header inside here so the first thing we need to do now is just link this up to the right content and this is where the link between dynamics dynamics rexy and these templates and everything come into play so we're going to just choose the dynamic tags as we always would we're going to scroll down and you can see we have a new section now called dynomance and inside there depending upon the kind of widget you insert will give you various different options this example we want the dynomance text i'm going to select that click on the little wrench icon and choose the field we want which in this example is going to be the title for the gallery title you see things are organized because the gallery title and then we've got our content block and inside there we've got the title button text and so on so things are still organized in normal fashion when you're working with templates and dynamic tags and so on inside elementor choose the title and nothing will show up because obviously we haven't set anything to even use this yet so how do you deal with that well at this point you kind of don't you just have to kind of go with it at the moment so if you want to apply styling and so on you can do that but obviously you can't really see what's going on so we're going to do is we're going to publish this and once we've done that we're going to refresh the page and generally that will allow this sort of placeholder to show up and there you can go you can see now it says documents text title a little bit finicky and a little bit frustrating but hopefully this is something that would be ironed out that this will actually show so i don't know if this is a dynamence rexy issue whether it's an elementor issue or something else but that's one little thing that i'd like to see ironed out what you can do now is you can style this as you normally would so we'll just simply select it and we'll just apply some styling now you can apply global styling to all this you know the routine we've covered this many many times in various different tutorials but we're just going to set this on this particular level just for ease at the moment but you know style it and design it how you want to set things up i'm going to set this to be something like let's go for 24 and weight 600 set this to transform to be uppercase and we'll leave it like that we'll update that so not perfect and like i say we refresh this we should then see the changes and like i say i wish i knew where the problem was coming in with this but it's there so one other thing we're going to do we're going to drag and drop a little divider under there and we'll just quickly style that set that to be something like 10 or 15 percent adjust our gap change our color to that bit lighter and we'll set that to be two pixels in and just go into the margins and we'll just reduce that a little bit say -10 there we go so that's the template that's going to be used now for our gallery title so we can just do the same thing again now so we can hop back out of this and we're just going to come back to our save templates and we're going to add a new template and then we're going to create another new one so we're just going to select this to be a section we'll drop that down inside there and this time we're going to call this gallery description save our template or create our template and then we can go and do pretty much exactly the same thing again let's close this down and let's do the same thing this time we're going to choose the text editor because we're going to just have this as the description same dynamic tags scroll right the way down dynamics wizzy wig and click on the little wrench icon and set what field we want which is gallery description if you want to put a full back in you can do that you can set your styling up so i'm going to quickly just apply some basic styling to this we're going to set this to 14 pixels set that to 300 that's perfectly fine don't worry too much about that we'll publish that particular template and now we can move on to the next one you can see it does show up eventually exit to our dashboard and we're going to do this two more times i'm not going to show you the gallery one because i think you're probably used to dealing with these kind of dynamic things but i do want to show you how we do it with the block that we've created which is a little bit more custom a little bit more involved so let's just add a new template in and set this to be a section and we're just going to call this custom block and let me just put the little prefix before that just so i know exactly what's going on okay we'll create our template so now we can create that slightly more comprehensive design layout so let's start off by closing this down and we're just going to put in a new two column section so we'll add that inside there we'll select it and we'll just do any kind of settings that we want like position of different things and stuff like that so you can say you want to leave the column gaps the height and all those kinds of things and you can set anything you want up inside you the size the width all those kinds of things but i select this right hand column which is going to show the actual content we want to work with so once we select that then we can just do things like set the background colors and all those kinds of good things so let's come over to our style settings let's choose a background type let's just simply come in to pick a color we're going to find this kind of dark blue kind of color it doesn't really matter too much for this example and we'll set that inside there we'll just apply some padding and so on to this so we're going to just put 50 pixels of padding around there you can set your alignments and all those kinds of things i'm sure you can kind of deal with all these things yourselves i'm sure you're more than comfortable doing that okay so we're going to do is we're going to drop a heading inside there and you see there's our header section let's set something like h3 h4 because obviously isn't as important and we're going to set this to be dynamic content so we'll first of all style it because i think it's a little easier if we style it right now let's just set this to be white our typography robot is perfectly fine we'll set that to be i don't know say 20 and we'll set this to be about 400 maybe 500. so there's our title next thing we want to do is drop in the content and obviously link this up before we do so let's just jump back up to our content click on our dynamic tags scroll down until we get to dynament's text select that click the wrench and select the title from our content block which is our more comprehensive block so that's that first section inserted into there next thing we're going to do is the same as we've done before we're going to drag this text editor drop that underneath there select our dynamic link scroll down to dynamics directly this time choose the wysiwyg option and again choose the little wrench icon and choose content from the content block jump over to our style section and what we're going to do inside there is just set this to be white and we'll just adjust the opacity a little bit and we'll adjust the size on that as well so we'll say that's going to be 14 there we go now so that's really easy there's nothing comprehensive complex difficult about any of that next up we're going to add a little bit of logic in though so now we're going to do is we're going to drag and drop a button in but we're going to know that this might not actually be populated there might be nothing at all in this button so we need to set up conditions on there and so on so first of all let's set up the text and the link so dynamic tags for the text scroll down to our dynamics rexy and we're going to just choose text and we're going to expand that out and we're just going to choose button text so there's our text the next thing we need to do now is put the actual link in now i made a little bit of a mistake when we set up the flexible content because we're going to be using a url you don't set that to a text field you set it to a url field so if i create any confusion it my apologies so i'm going to do is dynamic tags scroll right the way down until we get to dynaman's url choose that and then we're going to just choose the option for button url and well nothing shows up at the moment it is going to work so we can do then is if we want to set up any parameters for this like link options say this is going to open in a new window you could do that it's entirely up to you how you want to handle these buttons and so on okay so that's the basics of that being done let's just apply a little bit of style into this we'll set the text color to be white just to make sure that stands out and we're going to set the background color on this so we're going to set it to a a kind of grayish kind of color something like like that that'll do okay so there's our button everything is set up inside there next thing we need to do is make sure that only displays if there's a button text being inserted so how do we deal with that really easy we're going to use our little free plugin for dynamic conditions so what we need to do is come to advanced when we've got the button selected and we have a new section inside here called dynamic conditions can expand that out and we're going to set that up now to display only when it needs to so how do we do that really easy i'm going to click on the little option by here and you see that will take us to media files which is kind of confusing however if you mouse over this you can see we've got the dynamic tags select that and then scroll right the way down until you find the dynaments options and inside there we're going to specify that we want to use the dynomance url we'll select that link that up to the relevant field like we've done before the button url in this example we've only got one but you may have multiple and then you've got the option to either show or hide we're going to set this to hide when condition is met and the condition is going to be is empty so we're going to say if the button url or if the dynamics url is empty hide the button otherwise show the button it's as simple as that there's nothing complex about this whatsoever it's really simple and straightforward but once you kind of start to link these different things together you can create really comprehensive powerful setups using some really simple conditional logic okay so that's our right hand section basically set out now the left hand section we need to set this up because we want to have the image that we got set as a featured image inside you so we're going to select the entire column once we've done that we're going to come to our style section and we're going to set our background type inside here to select background type come over where we can choose our image and click on the dynamic tags option and we're going to scroll down until we find that dynamics image select that click on our wrench icon and set the featured image in our content block to be the image we want to use now we can configure this so we can say we're going to set the position to send to center these are kind of just like your safe defaults but up to you if you want to change these no repeat and cover okay so we've now basically created this template for this particular custom block referencing the various different elements so now let's just save our template or update it if you've saved it previously and that's the template for our flexible block created now like i say you can get way more creativeness this is a really simplistic example but you can go as far as you want with this and get super creative with your templates the content you can place inside there all those kinds of good things so that's the four templates created for our four flexible content fields some simple ones and something more comprehensive so now we've done those the next thing we need to do is get these into our template for a single post to do that we're going to come over into our theme builder option and inside there we're going to create a new single post template we're going to say add new single post and we're just going to call this default single post and i'm just going to put rexy after it just so we know that i'm using that plugin with this we create our template and for ease i'm just simply going to pull in a template that's already been created inside elementor itself because that side of things i've covered again like i say in many many different cases so you should be more than comfortable working with that side of things yourselves okay so let's just find something this one looks okay we'll just insert that doesn't really matter too much yep we'll choose that option let that download all the relevant files and there's our design set up okay so let's scroll down and let's just find the widget we want which is flexible and there we go acf flexible content this is a dynamence rexe widget so all we're going to do is add this in so we're going to drag this above the link like this article and there we go so that's pretty cool that's easy super simple to do all you need to do now is say flexible content name and expand that out and you can see there's our flexible content which is our acf meta field flexible content choose that option and that now inserts it into the page but nothing's happened because we need to tell it what templates the ones we just created to reference for the content that can appear on this particular section to do that we use the layouts list so you may find you create an abundance of different layers but they're not relevant on every single template that you create like this so you can just pick and choose the ones that are relevant to this particular template for this example they're all relevant so let me just show you how they work we'll add an item choose the layout name and you can see there's our four templates we've just created and it doesn't matter what order you put these in because this is just dropping the relevant templates into this theme file and then when you reorder them and create them in the front end or the back end that's which dictates what will be displayed where so first of all let's go for gallery title and see we now just have to choose the template and associate it with so there's our gallery title and we're gonna do the same thing again so layout this is gonna be gallery description choose the template gallery description you can kind of see where i'm coming from with this kind of gallery and traceable content gallery and finally we've got our more comprehensive one which is our content block and there's our custom block so now we've inserted the the relevant widget and we've told it what templates to use we can just hit publish and we can set our condition up upon you like normal so we'll leave this for all singular obviously you might want to change that and we say save and close and that's all our templates for the actual site itself all created okay so let's create or edit a post that already exists and see it's all working so this is the hello world you normally have as part of installing wordpress you can see we've just got the title and the content we've got no featured image and none of our flexible content so let's rectify that let's set a featured image first of all and just choose an image that i want to use and let's come down to add in a custom block so let's just say add a custom block gonna give this a title and we're just gonna give this a name and we're just gonna call this sample gallery title doesn't really matter too much we'll add another custom block and this is going to be our gallery description and we'll just drop in this is the description there we go there's our description we'll just full stop that and we'll add another custom block in and this is going to be our gallery this time so i've already uploaded some images where i say add to gallery let's just select our images we're going to grab these five and we'll select those that's now inserted inside there so all that side of things is really easy let's add a custom block in them let's add in our new content block and this has more options inside there so this time we're just going to call this custom block we'll add in some more for the text just paste that inside there that's looking good we'll add our featured image this time we'll choose something completely different let's just upload something new there we go we'll upload that image and we'll select that from there so there's our image and our button text if we leave this blank no button will show so for now we'll leave that as it is and we'll just update this post okay so that's now been updated so let's check this out let's just take a look let's just open this up a new tab and you see there's our post if we scroll down there's our sample gallery title our description our image gallery which you can open up and as you can see there's our custom design block so everything is all laid out the way we'd expect and if you want to make changes to this you can easily do that so let's come back in for example into our post let's add in my website for example and then we'll just drop in a link underneath and we'll just update this and we'll just hop back over refresh this page and we should find we now have a button with our text and a link through to the another page so really really easy to do and just to confirm that you can drag and reorder these things around let's just shrink this up a little bit um we're just going to say we want this content block to be at the top let's just shrink all of these up drag that up to the top update hop back over and refresh our page and there's our custom block at the top and our gallery and everything underneath it so you can reorder these in any way that you want to so really easy to do that kind of thing you can get really creative and if you only want to see how to do this you don't want to see how to do the front-end dashboard side of things you can hop off the tutorial right now but if you are interested in finding out how you can link all of this up to create a front-end dashboard for your users and still have access to all of these kind of cool flexible box widgets stick with me now we've ticked off most of the groundwork and we're ready to take a look at building the front end dashboard for our users to manage their own content along with these all new flexible content fields let's take a look at setting up some of the things we can do inside acf front-end forms pro just to streamline the front-end side of things so we come over into the settings option inside there we can come over first of all to the uploads privacy you can filter this media by author so if you have multiple authors and you don't want them to be able to share and see each other's files you can check this option which is really useful obviously if it's just you working on things you don't need to worry about this next thing you can take a look at is the hide wp dashboard which is pretty useful what you can do inside here is you can hide the actual physical wp dashboard wordpress dashboard based upon various different things so if a user role is user there'll be a checkbox in each user's profile page to show hide the wp dashboard so you can set that up and you can set up where you want to redirect things to so i would generally recommend you redirect that to the account that we're going to create right now and that'll have a login if someone tries to access it and if they can't access it they can't get into that section and therefore they'll just get the log in and repeat that side of things i'm not going to worry about doing that like i say i've already covered most of these kinds of things in their own dedicated tutorials i don't want to bore you and make this longer than it needs to be okay so with that being done first thing we need to do is create the loop that's going to hold the various different articles that we've created already to do that we're going to come into our theme builder inside elementor hop into our loop section and we're going to add a new loop and we're just going to call this front end articles there we go we'll create our template and once we've done that we can just use elementor now to build out what we need so i'm going to close this down i'm going to create something really really simple this is just there to list the items so we're going to select a single row column from there we're now going to set that up so we're going to put the content we want in so let's start off by adding the various different elements first things first we're going to add in our featured image we'll drop that at the top and next up we're going to just come in and we're going to add in a title now we're going to use this we're going to say the post title and we're just going to position that underneath if it'll go in there let's try that again there we go post title and then we're going to come in and we're going to add in a text area drop that inside there now we're going to set this up because one of the things we get when we install elementor custom skin is an extra little widget that we have inside our dynamic tags expand that out we're going to just use post summary this is then going to show us x number of words from our actual post itself we now need the option to be able to edit this post this is going to be the listing that allows us to choose to edit any individual post to do that we're going to use one of acf front end form pros features so if we come back to our widgets and we're just going to search for edit and we'll see we've got the option for edit button along with a lot of other options as well but we just want the edit button so let's just drag and drop that underneath and there's our edit post option we just need to make sure that everything is going to work correctly so the url key is post underscore id that's perfectly fine and if you want to configure this to make it look any way you want you can do that right now and i'm going to quickly just apply some styling to this it's not kind of key to this particular tutorial i'm just going to do it so it all looks a little bit nicer okay so there's our loop item setup one final thing i want to do is i'm going to select the button at the bottom and we're going to come into our content section and we're going to scroll down to permissions and this is where we can add just an extra little bit of control over who can access these different things so we can select the select by user and if you want to you can select the different roles now i'm an administrator but you may want to allow editors and authors and so on you can choose those from there anybody that falls outside that won't see this button so i'm going to leave that set to administrator for this example and other than that we're going to hit publish we're not going to worry about setting any conditions and we're just going to hit save and close and that's the first part of this done we've now created our loop item with our edit post option next up on our list is to add this loop into our dashboard home page this is our custom front-end dashboard so i'm going to exit my dashboard i'm going to come to my pages i've already gone ahead and created a blank dashboard page with just some simple navigation on the left hand side that i could link up later on so this is what we're working with like i say not important how you do this what we want to do now though is drop in the post loop so we're going to do is we're going to come over to our widgets and we're going to grab the posts option and drop that into the right hand main section and you see there's our post now what this is doing currently is it's pulling in any post doesn't matter who or anything else it's not using the design we've created so to rectify that first thing i'm going to do is choose the skin option and choose custom and this is part of elementor custom skin once you do that we can now choose what template we want to use and we've only got one which is our front end post loop and you can see that's now set the design up inside there you can set some other options inside you and if you've got the pro version you have a lot more features available to you we're going to be using the free version so we'll leave that as it is we'll set this up to be two columns and we need to do now is go ahead and set up the query and things to control who can see these actual posts now at the moment this is going to show every post by every single person and that might be fine for administrators but if you want to sort of limit this to only show the ones by the author that logs in which is what you should do for editors and authors and so on we need to rectify that so opening the query option we're going to be using the source of posts unless you're using something like a custom post type at which point you could change whatever you want inside there posts in this example is perfectly fine included by we can leave all these options as they are the only thing we're interested in is this advanced query option towards the bottom and this is where we added the advanced query options plug-in which is the free plug-in that gives us more control so we're going to do is going to click on the plus and you can see we've got five different options at this point in time what we want to choose is dynamic user and that will open up another set of options and this is the dynamic user options we can expand that and we're going to say the post author is the current user so in other words when we're logged in into our dashboard we will be the current logged in user user and this is only going to show the posts associated with me when i'm logged in so that's it that's what we need to do we can update that and as new posts now are added will be listed inside here and we can then edit them so the next thing we need to do is create the page that's going to be used for editing our posts now to make our life easy let's just copy this entire section so we're just going to select this copy it and then we're going to create a new page so you can exit to our dashboard and add a new page in and we'll use that as the basis so we can add a new page and this is going to be called edit and we'll just publish this and we'll edit it with elementor now obviously like i say you would apply some kind of security onto these pages so only logged in users can access them with the right privileges like i said i've covered that in previous videos so check those out if you need to find out more okay so we're going to do now is we're going to set this page layer to be using the elementor canvas because i don't want any of the distractions as part of the normal layout we're going to right click we're going to paste that inside there and we're just going to delete this from here now you might be wondering where's the blue everything off the background well that's because we set that up inside the settings into style and inside there we've got a custom style setup for our pages let me just show you how this is done because this is quite a cool technique so we're going to do is we're going to style this is going to affect the entire page so we're going to set our background as a gradient we're going to choose our first color which is going to be this dark blue color we're going to set our second color which is going to be white and actually don't like it's not going to be white it's going to be a pale blue kind of color so let's just drop that inside there so we'll drop that color in there and we'll save that as a global color create that and now we just need to tweak the actual gradient on here so we're going to set the location to be 20. we're going to set this location then to be zero you see that now gives us a nice hard edge line and then we're gonna set this to be 90 degrees and there's our left hand section so quite easy to do and a nifty little trick if you've never done it this way before okay so next thing we're going to change this to from my posts to edit post and that's our page basically created let's update this before we start working on the next stage which is adding in the edit post option because this is a little bit more involved so i'm going to do is we're going to come over and we're going to select the option to insert the edit post widget so to do that we're going to come over to the left hand side and we're just going to search for edit and you can see there's all our edit options and what we want for this example is post edit form so there's our post edit form let's drop that into our design and that now pre-fills out what it thinks is correct now there's a couple of things we need to do before we go any further you can see this is pulling in sort of pre-filled information which isn't necessarily what we want so the first and probably the most important thing we need to do right now is tell it how to know what post to edit because if you remember this is going to be linked from that loop we just created and that's the edit button so we need to pass over the url and tell it how to filter to do that we're going to come down into the left-hand section and from there we're going to scroll down until we get the option of post and inside there we've got a couple of things we can do the first thing it says select post and it says current post that's not what we want we want to change that to url query and once we do that you can see it says post underscore id so this is pre-filled out and unless you've changed it when we created the edit button that's going to be exactly what you want so you can leave that as it is it's just the url query and post id that's all we need the post state does is when we edit this post what status do we want to have applied to it now if you're the only person that's accessing this front end dashboard you could set this to go straight to published if you wanted to however if you're letting other people access this content and add content and make changes i would recommend you either put this into draft status or pending review and that's what we're going to do we're going to put in depending review this means that when someone updates when it exists in posts and they save it that will go back into pending review and will not be available on the front end of the site and this just means you remove the potential for people to abuse this feature by putting in something that gets approved first of all and then they make changes with things you might not want them to put on there hope that makes sense with that being done we've now configured the basic parts of things it's still showing this junk inside you because what it does is it's just pulling in the page content and injecting that into this section okay before we move on now to setting up the custom fields we want to use let's just do one more thing we're going to come into the permissions option and again we're going to make sure everything is configured inside here so only logged in users you can apply a custom message and so on inside if you want to so only logged in users set the levels or the roles you want to allow access and if you have specific users you can use those inside here as well however i'm just going to set this to be set to administrators that are logged in you can use dynamic permissions if you want to and again there's lots of options inside you but we're going to keep this simple i've covered most of these in other tutorials let's hop into our form field section and take a look at what's going on inside there so we have the normal things you have as part of a wordpress post title content featured image and categories all of which we want to use what we also want to do though is add in those custom fields so if we take a look at our form at the moment this is our title our content our featured image in our categories let's add in a new field we're going to expand this out and you can see we have the option for acf fields which is perfectly fine and you've got more options inside this you've got tons of different kinds of feels you can include into this however all we need is the acf fields i'm going to click on the plus and we're going to choose the option and there's only one at this point which is our flexible content we'll choose that and that now gives us our flexi content section inside our form so all we need to do now is apply some simple styling to this to make it look a little nicer and then we can take a look at testing this out to make sure that everything is working the way it should do okay there we go there's a little bit of styling added to this so let's just update our page and let's test this out just to make sure that everything is working as needed okay so here's our front end dashboard there's the post that we have we're going to click to edit this and you can see this now opens up fills out all the relevant details there's a featured image any categories and all of our custom flexible fields are inserted in here as well so all the information we need is set up in here for us so we're on the home straight now we've covered lots of what we wanted to do the next thing to do is to add a new post this works in a very similar fashion to the edit post but let me take you through how you do that we're going to add in a new page we're just going to call this add new post and we'll publish this and then we'll edit it with elementor once that's done we're going to simply paste in what we did before so first of all let's just set this to be the elementor canvas we get rid of any of the other stuff that's on there and we'll just right click and paste and there we go everything is inserted in there we'll just close this down now to get rid of this delete that from there and we'll change this to new post there we go and i'll quickly just apply that page styling like we did before so we get our left hand blue navigation block so i'll just pause the video and do that quickly there we go there's our custom dashboard ready so the next thing i'm going to do is come into our widgets and we're going to do a search for new post so let's just do a search for a new post and there's a new post widget drag that into our setup there we go there's our new post and this works again in a very similar fashion obviously we don't need to pass any values over this time we do need to go ahead and add in that extra field which is for our acs facf field we'll take off the post title so we don't need that we're just duplicating we'll add in our new field acf fields is fine and we'll say that's flexi content and you can see there's our flexi content block added into there as we do before let's quickly set our permissions on here as well so let's say logged in users admin and we're not going to worry about the selecting a user on there okay so with that being done we can jump in now to our actions we set our form fields we set our permissions let's just choose what happened so the submit action what we're going to do well we're going to say we're going to leave that as it is but you could send an email out if you wanted to so we can say once that's submitted an email will be sent out to the admin to let them know that there's new content being added at which point they can then choose what to do with that side of things so that's pretty easy to do and then you can choose what happens like the redirect you want to stay on this page you want to go to a certain page i tend to sort of like say if you're doing a new post to stay on the page because it's quite useful and then what you can do is you can say you want to allow them to edit the form you know there's a lot of different things you can do inside here so set this up how you want to and again i've covered this in a lot more details on dedicated tutorials if we come to post section we can choose what happens with the post status and those kinds of things so set the post status to pending review because this is a new post and we want it to be approved first select the post current post well that's perfectly fine we're going to leave that as the current post and there's a new post type you can change this if you're using custom post types but we're using a normal wordpress post so we'll leave that as post as well and we're going to leave this as it is you've got some nice things inside you like safe progress options and really useful things but like i say we're keeping this simple you want to expand all those things have been covered in a lot more detail okay so let's update this page and then i'm going to quickly apply some styling test to make sure everything looks the way we want it to so there's all our styling being added to our new form i've linked these up as well inside you and i'll do the same on the other template files or the other files we've used to create the dashboard so we can use those and we can take a look at what this all works like now on the front end of our site in our new custom dashboard okay so let's just test this out now so back onto our dashboard we've seen how to edit things let's just say we want to add a new post so we say add new post there's our new form we're just going to call this new post we'll drop in some content it doesn't matter what goes in there we'll add a featured image we'll choose this one and select that and then we can come down we'll set this to be uncategorized and we'll just add in let's just say we'll add a gallery block it doesn't really matter all the options are pretty good to go around gallery we'll choose a couple of images from there and hit select and then we'll do is we'll submit that now depending upon how you set this up whether it's set to come back here go back to your dashboard we get this notification to say that post has been added successfully and if we hop over to the dashboard the normal wordpress dashboard we should see that post is waiting to be approved and there we go into our post section there's our new post pending so we can do is we can quick edit that and we can approve that so it says published and hit update on there come back into our dashboard and go back to our home and there's our second post so we can edit that if we want to and all of those things are in there ready for us to edit our gallery everything else all set up this really is only the tip of a much bigger iceberg and once you see what can be achieved with these tools you should be able to let your imagination run wild and start creating all sorts of amazing designs and providing your clients with a much more feature-rich experience while keeping them out of the dashboard now as always all of the applicable links are in the description below and if you've made it this far in the video well why not give that thumbs up button a click it really does help me out while you're at it if you enjoyed the content we'll also click that subscribe button and slap the bell icon however if you didn't get value from the video feel free to hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tetson until next time take care

Channel: WPTuts

Views: 13,197

Keywords: WPTuts, wordpress custom frontend dashboard, frontend dashboard, wordpress custom fields, wordpress frontend dashboard, custom front end wordpress dashboard, custom wordpress dashboard, dashboard wordpress, wordpress dashboard, wordpress user dashboard in frontend, create custom wordpress dashboard, creating a custom wordpress dashboard for your clients, how to create custom front end wordpress dashboard, wp user frontend, wp user frontend pro

Id: ArA5rn2_mj0

Length: 53min 56sec (3236 seconds)

Published: Fri Mar 26 2021