How to Build a Custom Frontend Dashboard for Authors using Elementor Free & WP Frontend Admin

foreign where we'll show you how to use Elementor to build an author dashboard on WordPress your authors or writers will add and manage articles blog posts essays and other sorts of posts to your WordPress website using this unique user interface they will use a stunning dashboard like this one rather than the standard WP admin dashboard we will be able to do this thanks to Elementor and WP front-end admin a News website where many people can add posts platforms like medium ghost or Hub Pages where all users obtain an account and can publish content or an online magazine with hundreds of writers could all benefit from this unique author dashboard additionally if you're creating blogs for independent authors who want to publish content without needing to know how to use WordPress you can follow this guide for this reason creating a unique dashboard just for authors can be the best choice that's why we created this guide let's start by considering the plugins we will need to create this dashboard for authors of which you will find the download links in our written guide whose link can be found in the description of this video the necessary plugins will be Elementor Elementor header and footer Builder WP front-end admin WP menu icons user menus user role editor and Jet sticky for Elementor this beautiful front-end dashboard for authors will include the following pages the first page is the right post page here we will display the WordPress posts page from the wp admin dashboard users will be able to view their own posts only edit existing posts and add new posts authors will be able to add media to their posts select categories upload featured images preview and publish the posts or save them as drafts the second page to be added will be categories which will allow authors to manage the WordPress categories on the front end they will be able to create new categories edit and remove existing categories and since WordPress doesn't allow authors to manage categories we'll show you how to Grant the manage categories capability to the author user role the third page is the images page where the authors will be able to upload images to the media library from the front end this way they will be able to manage the images uploaded to their posts the fourth page will be the profile page where our authors will be able to view and modify their WordPress user profile from the front end they will change their names update emails change passwords upload personal information Etc [Music] we will start by creating a new navigation menu for the dashboard for this go to appearance then to menus enter the navigation menu name here and click on create menu [Music] foreign once the menu was created we will show you how to import a template but you can design the template for your custom dashboard from scratch if you prefer however we recommend you using one of our templates to save some time if you are a WP front-end admin user you can go to the link in the video description and download a template from our gallery after the template is ready you have to go to templates then to saved templates click on import templates choose the file from your computer and click on import now after the template was imported click on edit with Elementor to customize the template as you like for example you can upload your own logo select the navigation menu you just created set the colors change the typography and any other aspect to make the dashboard look the way you want once you're done click on update to save the changes made to this element or template [Music] now we can start building the front-end dashboard for authors let's start by displaying the posts page from WP admin on the front end for this add a new page enter the page title in this case we will call it write posts select the Elementor canvas template if your theme doesn't allow you to select Elementor canvas here you can do it in Elementor now click on edit with Elementor once an Elementor you need to import the template into this new page by clicking on ADD template now you need to move to my templates find the template you want to import into this new page and click on insert after importing the template in the page content section we will add the page title as a heading but this is optional then we will also need to add this shortcode the shortcode will allow you to display the WordPress posts page on the front end where your authors will be able to write their articles you will also find the short code in the written guide whose link is in the description of the video now click on preview after you display the posts page on the front end you need to use the Quick Settings from the wp front-end admin plugin to configure your page you need to start by selecting the page title URL slug page template and the menu to which this page will belong with WP front-end admin you can customize your front-end dashboard for authors by hiding any unnecessary elements from this page for example we will remove the original page title because we've added a page title above the content just click on hide element and then click on the element you want to hide you can hide any other element you don't want to include on this page by following the same steps besides hiding unnecessary elements you can customize the text on it for example we want to rename the add new button with write new post for this we just need to click on edit texts now let's change the text of a button finally let's click on stop editing texts you can change any other texts on the page with the same process let's now tick the hide notices added by other plugins or themes checkbox and we can also disable or hide specific columns from the posts page for example we will hide the author tags and comments columns since we want our users to view and manage their own posts only we need to tick this checkbox finally let's click on save to apply the changes on this page now let's edit the add new form for this click on the now called write new post button now you can start hiding unnecessary elements and editing texts you are free to decide which elements to keep and which elements to remove from the page once you're done editing the form you can click on save to apply the changes finally we can go back to Elementor and publish the page [Music] foreign the categories page to be added to the front-end dashboard first we will add a new page enter the page title in this case it will be categories select the Elementor canvas template now click on edit with Elementor once in Elementor you need to import the template into this new page by clicking on ADD template now you need to go to my templates find the template you will import into this new page and click on insert after importing the template we will add the page title in this section then we need to add this shortcode this shortcode will allow you to display the categories page on the front end where your authors will be able to manage create edit and delete categories you will also find the shortcode in the written guide whose link is in the description of the video now click on preview after you add the categories page on the front end you need to use the Quick Settings from the wp front-end admin plugin to configure your page you need to start by selecting the URL Slug and the menu to which this page will belong now you can customize your categories Page by hiding any unnecessary elements just click on hide element and then click on the element you want to hide you are free to remove or keep the fields or meta boxes you want in addition to hiding unnecessary elements you can customize the texts on the page for this we just need to click on edit texts now let's change the texts and click on stop editing texts when we are done you can edit any text on the page let's now hide notices added by other plugins or themes once you're done editing the categories page you can click on save to apply the changes finally we can go back to Elementor and publish the page let's now add the images page to this front-end dashboard for authors first we will add a new page enter the page title in this case it will be images select the Elementor canvas template now click on edit with Elementor once in Elementor you need to import the template into this new page by clicking on ADD template now you need to go to my templates find the template to be imported into this new page and click on insert after importing the template add the title in the content field and add this shortcode too the shortcode will allow you to display the images page on the front end where your authors will be able to upload images to the media library from the front end and manage the images uploaded to their posts you will also find this short code in the written guide whose link is in the description of the video now click on preview after you add the images page to the front end you need to use the Quick Settings from the wp front-end admin plugin to configure your page you need to start by selecting the URL Slug and the menu to which this page will belong now you can customize your images Page by hiding any unnecessary elements just click on hide element and then click on the element you want to hide you are free to remove or keep the fields or meta boxes you want in addition to hiding unnecessary elements you can customize the texts on the page for this we just need to click on edit texts now change the texts and click on stop editing texts when you are done let's now hide notices added by other plugins or themes once you're done editing the images page you can click on save to apply the changes finally go back to Elementor and publish the page now it's time to create the profile page first we will add a new page enter the page title in this case it will be profile select the Elementor canvas template now click on edit with Elementor once in Elementor you need to import the template into this new page by clicking on ADD template now you need to go to my templates find the template you want to import and click on insert after importing the template add the title in the content field and add this shortcode too this shortcode will allow you to display the profile page on the front end where your authors will be able to view and modify their WordPress user profile from the front end you can find this shortcode in the text version of this guide by following the link in the description of this video now click on preview after you display the profile page on the front end you need to use the Quick Settings from the wp front-end admin plugin to configure your page you need to start by selecting the URL Slug and the menu to which this page will belong now you can customize this page by hiding any unnecessary elements just click on hide element and then click on the element you want to hide you are free to remove or keep the fields or meta boxes you want in addition to hiding unnecessary elements you can customize the texts on the page for this we just need to click on edit texts now change any text [Music] and click on stop editing texts when you are done let's now hide notices added by other plugins or themes once you're done editing the profile page you can click on save to apply the changes lastly we can go back to Elementor and publish the page after adding the necessary pages to the custom dashboard for authors and writers you need to set up the navigation menu where we will add menu icons and add the view site and log out links to the navigation menu first let's add menu icons just go to the menu option in the appearance section now edit the menu you created for the front-end dashboard click the plus button on each menu item here you can select the icon you want then just save and edit another menu item [Music] [Music] second add a view site link to the dashboard's navigation menu this link will allow our authors to visit our site just as the visit site link on the wp admin dashboard for this let's add a custom link to the menu enter here the URL of your site and here's something like view site or visit site then add it to the menu once the element has been added you can select an icon for this item third we'll add a logout link to the navigation menu this will be possible thanks to the user menus plugin that allows you to add a log out button to your navigation menu to do this just move to the user links section tick the logout checkbox and add it to the menu then you can also add an icon to this new menu item finally click on Save menu to apply the changes something great about WP front-end admin is that it allows you to customize the login page on WordPress this will give your front-end dashboard a more professional look we will Design This custom login page with Elementor and it will include your site's logo the login form and a link to go back to the home page of your site let's start by adding a new page enter the page name select to use the Elementor canvas template and edit with Elementor once in Elementor add a new section set 500 pixels wide the height must fit the screen and the column has to be in the middle now add an image element where you will upload your site's logo [Music] add a shortcode element [Music] here you need to add this shortcode which can be found in the text version of this video now let's add a text editor element [Music] here you can add something like go to the home page and insert a link to the home page of your site [Music] once you're done publish the page after creating and Publishing the custom login page for your WordPress site we need to select it as the default login page in the wp front-end admin settings to do this go to the front-end admin settings then to the login section now enter here the URL of the login page you just created you can also select login page here this way your users will always be taken to the login page after they log out once you're done click on save to apply the changes [Music] let's set up now some important settings in the primary menu of the site for example we will add a link to the login page and a link to the dashboard for offers to do this you have to go to appearance then to menus select your primary menu remember that this will be different from the front-end dashboard menu created before [Music] here we will add the posts page to the menu rename this new menu item to something like author's dashboard we will only allow logged in users to see this field and only authors will access this page [Music] now let's add the login page to the navigation menu just logged out users will see this link and finally we will save the menu to apply the changes with the user role editor plugin we will grant the manage categories capability to the author user role this will allow authors to add edit and remove categories this is optional so you can skip this step but it is important to allow your users to manage categories in the front end otherwise the categories page will be useless if you decide to do it just go to users and you will see the user role editor option then select author here [Music] tick the manage categories capability and apply the changes [Music] [Music] we are almost done this is the last step of creating a dashboard for authors as the last step let's set up some settings to block access to the wp admin dashboard for all offers this is really useful in case an author tries to open any WP admin page they will be redirected to the front-end dashboard page instead to do this go to the front-end admin settings page once here disable the quick settings now open the access restriction settings enable the wp admin access restrictions as you create the dashboard for authors the URLs of the admin Pages displayed on the front end will be added in this section but if you don't have them all you can find them in the text version of this lesson where you can copy the respective URLs and paste them here after these simple steps if any author tries to open any other WP admin page they will be redirected to the front-end dashboard page now scroll down and select the user capability manage options so just administrators will have access to the wp admin dashboard here we will enter the URL of our right posts page so that our authors will be redirected to this page when they try to access the pages from the normal dashboard for them this page will be the dashboard now let's set up the authors to use this customized dashboard finally click on save to apply the changes now is time to test the dashboard for this we will visit the main site log into the dashboard as an author check all the pages we created and make sure all the links work correctly from here from the login page we will start by going to the main site [Music] let's go back to log into the site as an offer [Music] foreign as you can see we have been redirected to the right posts page which we have selected as the main page here we can see our own posts which we can edit delete and preview we can also see all the posts created by other users but we are not allowed to edit them now let's open the option to write a new post here you can see that we have successfully hidden the items that we did not want to be available to authors now let's look at the categories page as you can see authors have the permissions to view edit add or delete categories here we can see all the images that have been uploaded to the site and we can upload new images on the profile page users will be able to make changes to their nickname contact information manage their account Etc now we have the option to visit the site we see that it links us correctly and from here we can now that we are logged in go back to the author's dashboard finally when logging out users will be taken to the login page as you can see all the elements worked perfectly WP front-end admin allows you to create custom dashboards and web apps based on WordPress plugins easily you can use any WordPress theme or any page builder like Elementor Beaver Builder and others you can get the plugin and follow our full guide by clicking the link we left in the video description thanks for learning with us

Channel: WP Frontend Admin

Views: 9,032

Keywords: Frontend dashboard, Elementor templates, WordPress frontend dashboard, WordPress elementor dashboard, WP Frontend Admin dashboard

Id: r7D-vov6_W0

Length: 22min 31sec (1351 seconds)

Published: Tue Feb 14 2023