3 Ways to Display WordPress Admin Pages on the Frontend

WP Frontend Admin allows you to display any WordPress page on the frontend. You can create frontend dashboards, web apps based on WordPress plugins, WP Multisite platforms, and Wildcloud multitenant platforms.

Here are three ways you can display WordPress admin pages on the frontend:

Option 1 – Build frontend pages without page builder

You can create the frontend dashboard pages without using a page builder but using the appearance options of your active WordPress theme.

There are two ways of doing this:

First, you can manually create the pages using the WP Frontend Admin shortcode:

1- Create a new WordPress page by going to Pages > Add New Page.

2- Add the page title and paste this shortcode in the page content area:

[vg_display_admin_page page_url="wp-admin-url"]

You just have to replace the “wp-admin-url” text with the URL of the wp-admin page that you want to display on the frontend.

For example, if you want to display the WooCommerce products page on the frontend, you need to use this shortcode:

[vg_display_admin_page page_url="edit.php?post_type=product"]

Please note that this shortcode works with both complete URLs and relative URLs.

3- Once you’ve added the shortcode, you need to Preview the page to display the wp-admin page on the frontend.

building a wordpress frontend dashboard

Second, you can display wp-admin pages on the frontend with one click.

Just go to the wp-admin page you want to display on the frontend and click on View on the frontend.

building a wordpress frontend dashboard

This will automatically create a new page, insert our shortcode containing the wp-admin URL, and take you to the frontend page preview where you can use the Quick Settings panel to configure the page.

This is what you can do with the Quick Settings panel:

  • Select or change the page title, URL slug, page template and select the navigation menu to which you want to add the page.
  • Hide any elements like texts, buttons, fields, etc. Just click on Hide element and click on the element you want to remove.
  • Optional – Select required plugins or themes to use this page on the frontend.
  • Edit texts like button labels, field names, etc.
  • Disable columns, especially in pages that show lists like products, orders, posts, etc.
  • Select if the users will see their own posts/products, etc. only.

Option 2 – Build frontend pages using a page builder

You can use any WordPress page builder to create your frontend dashboard pages.

You just have to:

1- Create and design your page using your favorite page builder.

2- Add this shortcode in the page content area:

[vg_display_admin_page page_url="wp-admin-url"]

You just have to replace the “wp-admin-url” text with the URL of the wp-admin page that you want to display on the frontend.

For example, if you want to display the WordPress users page on the frontend, you need to use this shortcode:

[vg_display_admin_page page_url="users.php"]

Please note that this shortcode works with complete URLs and with relative URLs.

3- Once you’ve added the shortcode, click on Preview page to display the admin page on the front-end.

Once the page is displayed on the frontend, you need to use the Quick Settings panel to configure the page.

This is what you can do with the Quick Settings panel:

  • Select or change the page title, URL slug, page template and select the navigation menu to which you want to add the page.
  • Hide any elements like texts, buttons, fields, etc. Just click on Hide element and click on the element you want to remove.
  • Optional – Select required plugins or themes to use this page on the frontend.
  • Edit texts like button labels, field names, etc.
  • Disable columns, especially in pages that show lists like products, orders, posts, etc.
  • Select if the users will see their own posts/products, etc. only.

Option 3 – Build frontend pages using Template Wizard

WP Frontend Admin’s Template Wizard is the easiest and fastest way to create frontend dashboards with a few clicks.

You don’t have to spend time designing every aspect of the frontend dashboard pages. Instead, you can use any of our importable Elementor templates via the Template Wizard.

Just go to Frontend Admin > Template wizard. You’ll see a Welcome page, so click on Next.

building a wordpress frontend dashboard

Once there, you need to select the template you want to use to build your frontend dashboard. You can preview the templates here.

building a wordpress frontend dashboard

Next, you need to select which pages you want to include in your front-end dashboard.

For this, you just need to tick the pages you want to add to the frontend dashboard.

Once you have selected the pages, you need to click on Next.

Clicking Next will start the process of:

  1. Importing the selected dashboard template
  2. Creating the pages
  3. Creating a navigation menu
  4. Adding the pages to the navigation menu
  5. Adding menu icons
  6. Adding “View my site” and “Log out” buttons to the navigation menu.

The entire process could take many hours if you create the pages manually, but this wizard does all that automatically!

building a wordpress frontend dashboard

Important:

Depending on the frontend dashboard pages you want to include in your frontend dashboard, you need to keep in mind is that the pages that your clients can access will depend on two things:

  1. The capabilities or permissions of the user role assigned to them when creating a site on your platform.
  2. The plugins enabled for the tenant role assigned to the site at the moment of creating a site on our platform.

Once the pages have been created, you can click on Go to pages.

building a wordpress frontend dashboard

You’ll need to configure each page using the Quick Settings panel.

This is what you can do with the Quick Settings panel:

  • Select or change the page title, URL slug, page template and select the navigation menu to which you want to add the page.
  • Hide any elements like texts, buttons, fields, etc. Just click on Hide element and click on the element you want to remove.
  • Optional – Select required plugins or themes to use this page on the frontend.
  • Edit texts like button labels, field names, etc.
  • Disable columns, especially in pages that show lists like products, orders, posts, etc.
  • Select if the users will see their own posts/products, etc. only.

Do you need help?

You can receive instant help in the live chat during business hours, or you can contact us and we will help you via email.