Allow Users to Manage Amelia Services on the Frontend

In this tutorial, you’ll learn how to allow users to manage Amelia services on the frontend.

We’re building a frontend dashboard for the Amelia plugin. Users will be able to view the dashboard and the calendar, and create apointments and events on the frontend.

We’ll do it using Amelia, which allows you to manage appointments, services and events in WordPress; and WP Frontend Admin, which allows you to display any wp-admin page on the frontend to create web apps and frontend dashboards.

After you install and activate both plugins, you need to follow these steps to display the Amelia services page on the frontend:

1- Open the page and display it on the frontend

First, you need to open the Amelia services page in wp-admin by going to Amelia > Services.

Now you need to click on View on the frontend to display the Amelia services page on the frontend.

Note

If you’re using Elementor or any other page builder to create this page, you can use the following shortcode:

[vg_display_admin_page page_url="admin.php?page=wpamelia-services#/services"]

Now just click on Preview to display the services on the frontend.

2- Set up the frontend page

Once you display the Amelia services on the frontend, you will see that WP Frontend Admin shows a Quick Settings panel on the left side of the screen.

You can start setting up your new frontend page on the frontend by selecting the following information:

• Page title
• URL slug
• Page template
• Add to this menu

You can continue setting up your services page on the frontend by hiding any unnecessary elements from it. For example, we’ll remove the Amelia logo, the Need help link, and the Add New floating button.

You just need to click on Hide element, click on the element you want to hide from your frontend page, and repeat this short process with all the elements you want to hide.

Besides hiding any unnecessary elements from your frontend services page, you can edit any texts on it. This is useful to rename button, fields and metaboxes.

1. Click on Edit texts
2. Edit all the texts you want to change.
3. Click on Stop editing texts

Once you’ve hidden all the unnecessary elements and changed some texts, you can tick the following checkboxes if you want:

• Hide notices added by other plugins or themes
• The users should see the posts created by them only

Now just hit Save to apply the changes.

If you click on the Add Service button, you’ll see the New Service form. You can remove any unnecessary elements and change texts on it.

For example, the Gallery, Extras, and Settings tabs on the New Service form are for users of the Pro version of Amelia only. Therefore, we can remove these tabs by using the Hide element button.

Don’t forget to Save the changes and publish the page once you’re done.

Manage the Amelia services on the frontend

Once you publish the page, your allowed users will be able to view the Services page on the frontend. They will be able to add categories, services, packages, etc.

This is what the New Service form will look like on the frontend.

Please note that only users with these roles will be able to use the services page on the frontend:

• administrator
• wpamelia-manager

WP Frontend Admin allows you to display the Amelia serives page on the frontend with some clicks.