In this tutorial, you’ll learn how to allow users to create events with the Amelia plugin on the frontend.
This is really useful if you want to build a web app that allows your users to manage events, appointments, services, etc. without accessing the normal wp-admin dashboard.
You need the Amelia – Events & Appointments Booking Calendar plugin.
Besides, you need the WP Frontend Admin plugin, which allows you to display any wp-admin page on the frontend. You can build beautiful frontend dashboards and web apps based on any WordPress plugin.
You can try the premium plugin on your website for free for 7 days.
Once you install and activate both plugins, follow these steps to display the Amelia Events page on the frontend.
1- Open the page in wp-admin
Go to Amelia > Events.
2- Display the Amelia events on the frontend
To display the page on the frontend, you have these two options:
You can click on the View on the frontend button on the top bar.
Optionally, you can use the following shortcode where you want to display the events if you’re using any page builder:
[vg_display_admin_page page_url="admin.php?page=wpamelia-events#/events"]
Once you enter the shortcode where you want to display the events page, click on Preview to display the events on the frontend.
3- Edit the Amelia events page on the frontend
WP Frontend Admin allows you to edit your frontend pages on the frontend using the Quick Settings panel.
On this Quick Settings panel, you can:
- Select the pages’ basic information
- Hide any unnecessary elements
- Hide notices from wp-admin
- Edit any texts from the page
- Decide if users will view their own content only
For example, you can start by selecting the following information for the frontend Amelia events page:
- Page title
- URL slug
- Page template
- Add to this menu
You can also remove any elements that your users won’t need to manage the events on the frontend.
For example, you can customize the page by removing the Amelia logo, or you can remove any pro feature if using Amelia Lite.
- Click on Hide element
- Click on the element you want to hide
You need to repeat these two steps with every element you will hide from your frontend Amelia events page.
If you want to change any texts on your Amelia events page on the frontend, you can do it by using the Edit texts button.
- Click on Edit texts
- Change all the texts you want
- Click on Stop editing texts
Finally, you can tick the following checkboxes:
- Hide notices added by other plugins or themes
- The users whould see the posts created by them only
Once you’ve toggled these checkboxes, click on Save to apply the changes to the calendar page on the frontend.
You can edit the New Event form on the frontend.
For example, you can hide any unnecessary element or change any texts.
Don’t forget to save the changes once you’re done.
Create Amelia events on the frontend
This is what the frontend Amelia events page looks like:
Your users will be allowed to create, edit and remove events from the frontend, without accessing wp-admin.
Take into account that only users with these roles will be able to manage events on the frontend:
- administrator
- wpamelia-customer
- wpamelia-provider
- wpamelia-manager
WP Frontend Admin allows you to show the Events page on the frontend to allow your users to manage events without accessing the wp-admin panel.
Read more tutorials on how to integrate WP Frontend Admin and Amelia.
You can try the premium plugin on your website for free for 7 days.