This tutorial is part of a series of tutorials based on the SportsPress for Football plugin.
Note. We assume you are a user of the SportsPress for Football plugin and have it installed already.
In this tutorial, we’ll show you how to manage SportsPress calendars on the frontend. Your users will be able to create, delete, and edit season and match calendars completely from the frontend, without having to deal with wp-admin.
For this, you won’t need to program anything nor write any line of code. Instead, you need to use the WP Frontend Admin plugin, which allows you to display any wp-admin page on the frontend to create frontend dashboards and web apps using any WordPress plugin behind the scenes.
You can try the premium plugin on your website for free for 7 days.
Once you install and activate the plugin, you need to follow these simple steps to show and manage SportsPress calendars on the frontend.
1- Display the SportsPress calendars on the frontend
WP Frontend Admin allows you to easily display any wp-admin page on the frontend. In this case, you can display the SportsPress calendars on the frontend. And you can do it with a single click or using a simple shortcode.
To display the SportsPress calendars on the frontend with a single click:
- Go to Matches > Calendars in wp-admin.
- Click View on the frontend.
There’s a second way to display the SportsPress calendars on the frontend. You can use any of the following page builders to create frontend pages:
- Elementor
- Visual Composer
- Gutenberg
- Divi
- Beaver Builder
- WP Page Builder
- Page Builder by SiteOrigin
- Oxygen
- Live Composer
- Brizy
- Etc.
In this case, you need to paste the following shortcode on any page created with any of the mentioned page builders to display the SportsPress calendars page on the frontend:
[vg_display_admin_page page_url="edit.php?post_type=sp_calendar"]
Once you paste the shortcode on any page created with any of the mentioned page builders, click Preview to display the SportsPress calendars page on the frontend.
2- Select the basic information for your frontend calendars page
WP Frontend Admin will allow you to set up your frontend pages using the Quick Settings panel on the left side of the screen. You can start configuring it by selecting the following information:
- Page title: Enter the new page title here.
- URL slug: Enter the URL slug using keywords only.
- Page template: We’ll select the Default template to keep using our theme’s settings. If you select the template on a page builder, this value will be inherited.
- Add page to this menu: Select the navigation menu where you want to add this page.
3- Hide any unnecessary elements from your frontend calendars
You can easily remove any element, field or metabox from your frontend SportsPress calendars page to simplify them and make your users’ experience much easier.
Just follow these simple steps:
- Click Hide element.
- Click the element you want to hide.
Just take into account that you will need to repeat these two simple steps with every element you want to hide.
Besides, you can tick the Hide notices added by other plugins or themes checkbox to prevent users from seeing unnecessary notices on the frontend.
4- Edit any text on your frontend calendars page
Besides hiding any unnecessary elements from your frontend pages, you can edit any texts from the admin content displayed on the frontend to customize your pages even more:
- Click Edit texts.
- Edit all the texts you want.
- Click Stop editing texts.
5- Hide any unnecessary columns and publish the page
Since this page lists your SportsPress calendars, you can hide any unnecessary columns by ticking them on the Disabled columns section.
Also, you can tick the “The users should see the posts created by them only” checkbox so that users are able to manage their own posts only.
Once you’ve made all these changes, you can click Save to apply the changes. The page will be added to the selected menu.
6- Set up the add new/edit calendar form on the frontend
You can also configure the add new/edit calendar form on the frontend so that it contains the necessary metaboxes and fields only. Just hit Add New or open an existing calendar to edit the form.
You can hide any unnecessary elements and edit all the texts you want. Once you’re done, click Save to apply the changes.
Manage SportsPress calendars on the frontend
Once the page is published, this is how the calendars list will look on the frontend:
And this is how the add new/edit calendar form will look on the frontend:
Something really important:
- Only users with the edit_sp_calendars capability will be able to manage the SportsPress calendars on the frontend. You can follow this tutorial to learn how to assign that capability to any other user role.
Definitely, there’s no easier way to display and manage the SportsPress calendars on the frontend. You don’t need to program nor code anything because WP Frontend Admin makes it really easy to create frontend dashboard pages.
You can try the premium plugin on your website for free for 7 days.