Making a simple to use ‘events manager’

There are many ‘heavy weight’ plugins available to create and display events on a page. Most of them come with lots of functions, like booking forms, capacity planning and more. Making just an event agenda could be done with Advanced Custom Fields Pro and Beaver Themer.

Job done in cooperation with Ronald Borghardt from Customedia

We start with defining the requested fields in ACF Pro. The fields you might need could be the following list:

• event title
• date of event
• starting time
• end time
• location of event (street, postal code, city/place)
• description of the event
• GoogleMap of location
• image of location or image of previous event (could also be a slider)

We did create a custom post type and set that post type as the location where we wanted to display our fields in the back-end of our solution. If you don’t know how to create a CPT in your childtheme functions.php, use the plugin Custom Post Type UI.

Create an event with ACF fields and one taxonomy field

Archive page and single post page

We used Beaver Themer to create both archive- and single post page templates. However we did not want just one special archive page for the list of all events, we wanted to ’embed’ the list on the homepage of the website. We did use the same method like in our project with René Spijker. We made our own ‘Custom Post Layout’, with a simple HTML table to get the job done. The table just displays the name of the event and the date (you could however also display start- and endtime). The eventname is the link to the custom post type single page.

‘Embed’ the Beaver Themer code

Since we did not want a dedicated archive page for displaying the list of events, we wondered if the custom code of Themer would display its content within a normal Beaver Builder page created with the Page Builder. This was a very easy step which we did not think of before, but makes the use of Beaver Themer even more powerful.

Rows with Beaver Themer modules (or modules on its own) can be saved and used ‘anywhere’ else within Beaver Builder pagebuilder

Part of basic archive display for archive template in Beaver Themer with CPT

Part of custom archive display for archive template in Beaver Themer with CPT

We saved the Beaver Themer ‘Post List’ as a module. Editting the homepage with Beaver Builder Pagebuilder would normally not display the ‘Archive Modules’ from Themer, but once we saved our module, we could access and use it within the Pagebuilder. And we can even edit the content of the Themer module within the Pagebuilder. In the left sceenshot you can see the ‘Agenda’ with (for this example) just two events, displayed within the homepage. Selecting the events title will get the single custom post page for displaying all event details.

Making your own event manager even more effective

This is a basic example of just listing events on your site. What else could you add to make your own events manager more flexible? With Advanced Forms you can use the power of Advanced Custom Field in the front-end of your website. You could add the possibility to give ‘others’ acces to submit events and let these events te be posted as a draft for review before posting them in the list. It creates its own custom post type. We asked the developer if it would be possible to insert a new ‘events record’ within the existing posttype. That has not been done yet, we don’t know if that will happen. But with a simple Post Type Switcher, you can solve this and put submitted forms into your own custom post type. And you could add for example a booking form as well. You can add so much more, like expiring the event after a certain date, just like you can do in the existing plugin Events Manager.

We still have to design the single post page, but this is the basic idea

Ask yourself the question how far you want to go into making your own solution compared to using a plugin which does it all. If you use ACF for a couple of other aspects on your site already, it is a good idea to use it for purposes where you could avoid plugins with a lot of ‘overkill’ in it. However if you start adding all kinds of small add-on plugins to your solution, you might end up with some unwanted effects like compatibility, maintainability, security and speed issues. But back to the root of this article. We avoided the heavy weight Events Manager and ‘just’ used ACF with Beaver Themer to do most of the requested requirements.

What we want to add

On the homepage we want to add a GoogleMap with all markers for all event locations. The easiest way to do that would be using the locations from the CPT, where we insterted one location per event. The challenge is to ‘un-double’ event locations with the same location, because we don’t how the GoogleMap API will react to display more markers on the same location. Any thoughts, let us know!

For now we just use the Basic Google Maps Placemarks plugin. The disadvantage is that the enduser will have to type in locations twice, since this plugin uses its own CPT and field. We are looking to avoid this double work and use our own CPT and location field and use the plugin just for displaying the markers. We know there are other solutions ‘out there’, like this set of routines from WP Beaches. We are still studying on how to use PHP routines within Beaver Themer.

Relational fields and Beaver Themer

Beaver Themer supports a specific set of ACF fields (not all). We would like the ‘Post Object’ field and the ‘Repeater Field’ to be supported, to be more flexible in the exchange of data between various post types. The ‘Page Link’ and the ‘oEmbed’ type are ‘connectors’ to content from other sources.