Custom Front End WordPress Dashboard with Elementor Pro & FREE plugins

Learn how to build a Custom Front End WordPress Dashboard with Elementor Pro & FREE plugins.
I'll cover the following skills throughout the tutorial:
- Building a custom frontend dashboard for WordPress
- Secure the dashboard pages
- Filter posts by logged in user
- Add new posts with admin confirmation
- Create draft posts
- Logout function
Plugins Used:
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ ACF Frontend: wordpress.org/plugins/acf-fro...
✅ Advanced Post Queries: wordpress.org/plugins/advance...
✅ Elementor Custom Skin: wordpress.org/plugins/ele-cus...
✅ Advanced Custom Fields: www.advancedcustomfields.com/
✅ Content Control: wordpress.org/plugins/content...
Advanced Dashboard Tutorial: • How To Create Custom F...
TIMESTAMPS
00:00 - Introduction to building a Custom Front End WordPress Dashboard with Elementor Pro & FREE plugins
00:50 - Overview of the custom dashboard
02:22 - The plugins needed
03:01 - Adding the required pages
03:47 - Restricting access with Content Control
05:56 - Building the dashboard homepage
12:31 - Building the custom post loop with Elementor Custom Skin
17:00 - Add the custom post loop to the Dashboard homepage
19:04 - Building the Edit Post page
26:00 - Building the Add Post page
31:00 - Building the show all posts loop and listing page
35:20 - Add the dashboard menu
35:45 - Custom logout link
37:20 - Restrict user access to WordPress Dashboard
38:44 - Expanding your Custom Dashboard beyond the basics
Advanced Frontend Dashboard Tutorial: • How To Create Custom F...
Logout Code: YOURDOMAIN.COM/wp-login.php?a...
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ OCEANWP: bit.ly/2fRHBr0
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk

[@sammyvillarreal_youtube]

Always great content, but probably my favorites are your tutorials like this one, where you're building custom (frontend) dashboards and forms. Much appreciated!

[@dmitryklimov9706]

⭐️ Awesome tutorials, am keeping watching! Thanks for the new horizons in an elegant and professional style! ⭐️

[@Statch011]

This was so helpful. It saved me hours trying to figure it out. Thank you!

[@ONEMUSICro]

Exactly what we were looking searching for our website...your tutorials are excelent...thank you very much! Cheers from Romania, Mihai

[@noetikadze7483]

This is exactly what I wanted, thank you for helping people to learn something new, you are doing the wonderful work 😄

[@anttixdj]

Paul, thank you once again another fantastic tut 🤩

[@gogawow]

Great, Paul! Thank you for high level content!

[@Jim.Hummel]

BRILLIANT!!!!!!! And it looks fantastic to boot!

[@adnanamin3666]

Really great, Paul! Thanks a lot!! ✌️

[@ethanmatthews209]

As always Awesome!!!🤩

[@marionpaolo319]

This is the best! I really mean it. The best!

[@giorgioantoineo.7024]

You are just great, thank you so much for all your lessons... I really appreciated!

[@pedrosantos2576]

Just what I needed!

[@innovahub4477]

amazing tutorial dude...many thanks

[@dafatnut5522]

This tutorial really helped me alot. THANK YOU!

[@joyelvin7145]

I was about to ask during the live stream yday if this would be something for you to dig into. With no stress, this is somthing I will really look in to. Many thanks Paul!

[@astsusan]

Thank you for this helpful tutorial!

[@morgankennedy6708]

Since I have Elementor Pro I created a template of the heading for those pages - saved me some time for sure.

[@fazeelahussain4703]

Awesome tutorials Paul, thanks☺

[@redbraid1169]

Wonderful! Many many thanks!

[@HusseinHussein0x7]

Thanks man, so helpful ❤

[@mahiarghovati1657]

Thanks for the training

[@ethanmatthews209]

Thank you,FANTASTIC!!!....

[@easyhomehack3470]

Thank you for is lovely tutorial

[@MrPrakasharyal]

Thanks !

[@msmediascreenentertainment1951]

Great Sir

[@arianhernandez4943]

great video. New sub

[@liamdoran2257]

Great content Paul, thanks. I've got one question re images for post - will my authors have access to the media library, or will they get the option to upload images from a URL or their PC?

[@simonrobinson2759]

Great Video the latest version of custom forms seems to be missing the delete post option on the post section. Any suggestions on workaround?

[@danielcondliffe3151]

22:36 - I've just tested this restriction and it doesn't work (for me at least). I can edit posts of other users if I know the post_id and put it in the url. edit - just playing around with it now and it seems like select by role is overriding dynamic permissions. If I remove roles completely, then post author seems to become restricted properly.

[@mountee]

Great video. Any view on the best Wordpress approach to create a client portal that looks great and simply allows clients to login and upload download documents? Emphasis on great UI

[@geraldinechx]

Hello! Thank you for your great tutorials! Is there a way to "reorder" the posts manually in a frontend dashboard, and have them reorder on the website as well? Thank you for any leads on that

[@ohzoe]

Hey paul! So how do you get the "edit" button on your loop design to link to the page where you've put the edit form? I've created my loop, got the edit button in it. I have a page with a post grid showing my loop. I have another page with the edit form in it. When I click the edit button in my loop it just 404 pages me, how do I tell it to open my edit post page?

[@anshultiwari6651]

Great work Sir, please make a video for a woocommerce website as well, if possible

[@jasperchang2438]

Hi, I was wondering is there a way to display posts that are pending review for only administrators?

[@ronniehusberg]

Do you know how to find this edit post field when you use the bricks builder?

[@killergamer1543]

Hey Paul eagerly waiting for your reply🥺. I want to add something like if someone comes to frontend dashboard they may be able to see the total post count of the post they have have published.. Also need more tutorials on Frontend Dashboard through ACF & Elementor.... Lots Of Love ❤️

[@cbrrecords]

Would this work for a multisite? How would you do this? Would love your help or direction!

[@rememberberry]

Great video! Is it possible to edit forms on the website, the same way u did it with the posts?

[@janmacinsky]

ACF Frontend is not available anymore. Do you recommend any good alternative guys?

[@marknasri1201]

thanks

[@ramiroperez268]

Great Video Paul !!! I have a question and it is the following. How can I show the list of all published posts and drafts? Thanks for everything!

[@xxoooOFxx]

Great video Paul! Been learning a lot from your videos the last couple of weeks! Quick question...has Frontend admin for ACF changed their UI since this video? I don't have the Edit Form widget in Elementor...

[@WPTuts]

I believe they have made some substantial changes to the UI. I should be releasing a new short series of videos covering the new version over the next few weeks. Keep an eye out for those when they are released. :)

[@JuliusTamala]

Hello Paul, I really like this video and created a site similar to this for school teachers so they can publish their module material. I wonder if theres any chance we can create a list of authors in the homepage and make search result only show the authors? Please help. I want to help teachers.

[@creative_land]

I think with the new version of frontend admin, we need to create the forms first and there I am missing assign category field. Do anyone have idea? I want to display category selection in the form

[@tonyb736]

Newbie question, please don’t be too harsh. Do I already have to have posts setup before I can create the dashboard. Or by creating this dashboard will it create posts that has not previously been setup? Apologies if it’s a simple answer but I’m new to Elementor/WP and web design. Thanks in advance

[@kathyamen7173]

great video. My edit posts don't show up in my widget menu....

[@itzcallmepro4963]

i cant understand the last part about the log out ?. when someone log out i want them to go to tthe home page not out of wordpress to the wp admin panel

[@glennrabbypaulin1853]

It is also possible to display All Post including those Under Pending? Because all I can see in the Front End are the Published Posts. Thanks. 😁

[@John_Warnock]

This could use a redo as some of the options are not available any longer, eg: the setting under Post at 27:50 in your video. "Save as draft" is not there.

[@RedubbledD]

Does anyone still have this version of plugin / wordpress where this is actualy possible? love to use this but it doesnt seem possible anymore :(

[@soufianeouhajji6182]

Thank you for your videos, very instructive! However, i have a little question. How can i give to the front end user to fill in the ACF custom fields? Thank you in advance

[@WPTuts]

Do a search on the channel for frontend forms and there's a more advanced tutorial that includes ACF content. That should answer your questions.

Can use it for add and edit pages?

[@moredesicom8002]

im unable to find save as draft option which is shown at 28:00

[@didiert941]

Again a great video. Thanks Paul. But I wonder what is the difference with another of your videos "How To Create Custom Front End WordPress Dashboard For Your Website Clients" ? Of course the layout is different for frontend users, but apart from that, do you think it's a better method to create frontend dashboard than the one explained in the previous video ?

[@WPTuts]

The key difference here is this video is using the free versions of the plugins. So, you don't have access to all the features. 👍

[@ocbroadband]

Paul, I'm looking to do this similar type of thing with a WooCommerce site. I'm not sure if I could apply something like this to WooCommerce pages as well. The thought is to keep the 'shop manager' user(s) out of everything else as well, but it appears they can access a bit more than just the WooCommerce items with that level. Or would this be something more of a user rights plugin to further restrict that Role?

[@WPTuts]

You'd probably benefit from adjusting the user role access privileges as I think there are still some limitations on what can be achieved with frontend dashboards and WooCommerce.

[@colinh2203]

Could you do this with JetEngine instead of ACF?

[@ronaldoroyvlog]

How to change profile picture from frontend and visible

[@GUY1292]

did you find out?

[@deepwords4694]

How to display tags with specific category

[@tinrmusic]

Thanks a lot! Amazing tutorial! One question: is it possible to list drafts aswell? An how would I do that? (Since the loops only showing published posts. But maybe a user saves the post as draft and wants to edit it later)

[@WPTuts]

Yes, you have the option to display draft posts as part of the query process I think. I'm not near the computer at the moment, but it should be possible.

[@tinrmusic]

​@@WPTuts Found out: had to add this to function.php and add mycustomquery as custom query in the loop widget. add_action( 'elementor/query/mycustomquery', function( $query ) { $query->set( 'post_status', array( 'publish', 'pending', 'draft', 'future' ) ); } ); But one thing I did not solve yet: You can save a new post as draft with ACF-Frontend plug-in, but when editing this post you just can use "update" button, which publishes the post. I can't see a save as draft (again) in the edit post widget (ACF Frontend).

[@aydesignart]

@@tinrmusic Hey! I'm looking to do exactly the same, I want authors to be able to see and edit their drafts and pending review posts. Where did you add the code?

[@tinrmusic]

@@aydesignart in the functions.php (top level in activated theme folder)

[@OrkSchamane]

Is it possible that a company with multiple registered users can access all of its own posts (so that all employees (Users) can see all entries of this company)? i guess there has to be an extra for User-Groups-Plugin or so + Advanced Post Queries must also support these plugins

[@Rinorobert1995]

Hey Paul, fantastic video! Would it be at all possible to show us how one can achieve this with WooCommerce integration?

[@WPTuts]

Partially Robert, but you'd need the Pro version of frontend forms. You can see what you can achieve in this tutorial: kzbin.info/www/bejne/hnSlhqikZpWCjJY

[@khanmunawar]

Once I log-in as another user role (e.g. Author / Editor) the Dashboard styling goes away.

[@CvS7351]

Does Content Control also work with Local(by Flywheel)? Pair of sites tested via Local but impossible to add Add a Restriction. Can't test this setting there. Installation on website via provider does work. This is a better option than Dashboard Welcome for Elementor. And as always perfect content.

[@WPTuts]

To be honest, I have no idea as I don't use Local by Flywheel I'm afraid.

[@sadhanabag2686]

18:01 Query - Advanced Query Options is not showing (Want to show only loged in current user's posts)

[@kevinalcantara187]

Great video Paul! Excellent! Friend, but, I find an alert that worries me , I already did all the steps following your explanation When I am editing a post as the author of the post (with suscriber role), I change the value ?=post_id and edit other posts from other authors Even, I have already configured in dynamic permissions that only authors can edit their own post, but the issue persist Otherwise, thank you very much, greetings!

[@user-st2co1xh5w]

is it possible to apply this form to a custom post type?

[@MilesVanlife]

I had the same question. Can you use CPTs with this solution.I don’t see a way to direct the edit page to look at a CPT. You can however get the loop to use the CPTs you have created.

[@linofcp007]

Is it possible to use with Divi instead of elementor? Or using Oxygen Builder?

[@WPTuts]

Not with the main ACF Frontend plugin no. There may be alternatives but I'm not a user of Divi or Oxygen I'm afraid.

[@rubenbad1869]

Paul, can we get UPDATES version of this DASHBOARD, with only free tools, please!!

[@fullmetalmerkin]

Hi Paul, would the ACF Front End plugin work with JetEngine for CPTs as well? Looking to build a jobs listing site for a small community and already have an agency licence with JetEngine.

[@WPTuts]

I don't believe so, but if you have JetEngine you could use the Profile Builder to do a very similar thing. I did a video on this a couple of weeks ago. I'd suggest taking a look at that to get an idea of how to use it. :)

[@fullmetalmerkin]

@@WPTuts Thanks Paul, I saw that video so will go back and take another look. And thanks for all your doing, you've been a massive help since I discovered your channel. :)

[@WPTuts]

@@fullmetalmerkin absolutely my pleasure. :)

[@ankurkyra]

i want a dashboard for my team so they can see different respective area shops sales and growth on a multivendor wordpress website working on different cities

[@Sekobra]

I can't find the code for the logout, where is it? A great video, thanks

[@WPTuts]

Here you go: YOURDOMAIN.COM/wp-login.php?action=logout

[@enablemobile1927]

Where is the video link he tries to point to at 38:52 ?

[@WPTuts]

If you give it a couple of seconds it will pop up. kzbin.info/www/bejne/ZmfSqHWYZ5iIn7M

[@rvbrink]

where can i post an question for you?

[@nemo6630]

Hello, I have jet engine it's possible Doing the same thing?

[@WPTuts]

You can build something similar and I will be releasing a dedicated tutorial on building a frontend dashboard with JetEngine soon. :0)

[@thomaspeter76]

@@WPTuts Just wanted to ask for that. Thank you for educating us.

[@pferrei]

@@WPTutsHi Paul, is it possible to do a similar dashboard using Dynamic Content for Elementor (to avoid having too many plugins)?

[@WPTuts]

@@pferrei I haven't tried it to be honest, but a quick look shows that there is a Save action in the Elementor forms widget when you have DC4E installed. So, theoretically, you should be able to do something very similar with it.

[@josephlivengood4508]

Unfortunately, everything has changed since this video, Custom advanced no longer there. The front end form is now using a shortcode and you have to edit the forms from the WP dashboard. Edit posts don't pull in the dynamic content to edit, no options for any dynamic content on these forms. So back to the original Wordpress dashboard. If you HAVE to use Wordpress just use white label CRM to clean up the dashboard and slack to make the side bar look better. But the best way is to manually code this using some other framework just plain ol PHP and easily pull in the user's post by echo out the field from the database, set up restrictions for the user, who can edit what, etc etc..

[@christosandreev6392]

Is there any workaround? Did they make the editing options a pro only feature?

[@jayesh032]

Is It Dynamic ?

[@WPTuts]

Dynamic in what way? The content is pulled in dynamically through the users login credentials and user role.

[@craiggybear1807]

Paul, as we may be heading back into a lockdown, I'm not sure I can also handle you not having a total black t-shirt on. This is just too much for 2020.

[@WPTuts]

🤣🤣🤣🤣 Normal service will resume very soon.

[@enablemobile1927]

Here is the logout action link example.com/wp-login.php?action=logout

[@jabarullakhan5724]

Think people OK