If you want to simplify your front-end dashboard, you can do it by creating pages with multiple wp-admin sections on the same page, and here we show you how to do it quickly.
For example, you may want to put the following pages together:
- Users and customers
- Store settings and Site settings
- User account and membership details
We’ll do this using the tabs feature from Elementor. Just follow these simple steps:
1- CREATE A NEW PAGE ON YOUR DASHBOARD SITE
Go to Network Admin and open the wp-admin panel of the dashboard site.
Go to Pages > Add New to create a new page.
Enter the page title and click Edit with Elementor. We’ll put together the Users and the Customers sections on this page.
2- EDIT THE PAGE WITH ELEMENTOR
Once you’re in Elementor, you need to add a Tabs element to the page.
Since we’re putting together the Users and Customers sections on this page, we need two tabs.
We need to use the Edit Tabs panel on the left side to set the title and content of the first tab. This will be for Customers in our case.
- Enter the tab title.
- Enter this shortcode: [vg_display_admin_page page_url=”wp-admin URL”]. Just be careful to replace the wp-admin URL part with the URL of the Customers section.
- If you go to Style, you can change the typography and the text colors of the tabs as you want. For example, we’ll select the Montserrat typography and grayscale colors.
You need to do the same with the second tab.
- Enter the tab title.
- Enter the WP Frontend Admin shortcode and replace the wp-admin URL part with the URL of the Users section.
- If you want to see the content of the tabs, you need to click Preview because WP Frontend Admin runs only in the preview or view mode, it doesn’t run on the edit mode of elementor
- If you want to hide any unnecessary elements with WP Frontend Admin, click Preview and you’ll see the Quick Settings panel from WP Frontend Admin.
- To view the Quick Settings panel, remember that the theme menu appears on top of the Quick Settings panel, so you need to move the menu to the right temporarily. You can temporarily change its position on Appearance > Customize > Header.
3- ADD THE PAGE TO YOUR DASHBOARD MENU
If you already added the page to the dashboard menu using the Quick Settings panel from WP Frontend Admin, you can still add the menu item icon.
- In wp-admin, go to Appearance > Menus.
- Add the page to the dashboard menu if you haven’t.
- Add the menu item icon
- If you had created individual pages for users and customers, you may want to delete the repeated pages
- Save the changes on the menu.
This is how the page will look once published and added to the dashboard menu. It’s a single page but they can view both sections in the tabs.
You can use this same process for advanced displays. You can display admin sections in popups, tabs, or any fancy element in Elementor.
4- One last step: Add the frontend-allowed URLs to the access restrictions
All the URLs that will be used on the frontend dashboard need to be added to the access restriction settings of WP Frontend Admin.
Go to Network Admin > WP Frontend Admin > Settings > Access Restrictions.
Paste the following relative URLs on the Access restriction: What wp-admin pages can be viewed on the frontend field:
Important. In case there are some frontend dashboard pages that get the ?vgfa_blacklisted_url=1 fragment on their URLs and do not load correctly, you need to manually add the URL of the wp-admin content you want to show on the frontend to the Access restriction: What wp-admin pages can be viewed on the frontend field. This is also useful if you’re displaying any other wp-admin page on the frontend that was not included on our frontend dashboard.