{"id":1787,"date":"2017-04-23T11:25:49","date_gmt":"2017-04-23T09:25:49","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=1787"},"modified":"2017-10-01T09:09:54","modified_gmt":"2017-10-01T07:09:54","slug":"making-a-simple-to-use-events-manager","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2017\/04\/23\/making-a-simple-to-use-events-manager\/","title":{"rendered":"Making a simple to use &#8216;events manager&#8217;"},"content":{"rendered":"<p><strong>There are many &#8216;heavy weight&#8217; 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.<\/strong><!--more--><\/p>\n<blockquote><p>Job done in cooperation with Ronald Borghardt from <a href=\"https:\/\/www.customedia.nl\" target=\"_blank\" rel=\"noopener noreferrer\">Customedia<\/a><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/acf-bijeenkomsten.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1790 alignright\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/acf-bijeenkomsten.jpg\" alt=\"\" width=\"374\" height=\"269\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/acf-bijeenkomsten.jpg 2400w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/acf-bijeenkomsten-300x216.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/acf-bijeenkomsten-768x554.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/acf-bijeenkomsten-1024x738.jpg 1024w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/a>We start with defining the requested fields in ACF Pro. The fields\u00a0you might need could be the following list:<\/p>\n<ul>\n<li>event title<\/li>\n<li>date of event<\/li>\n<li>starting time<\/li>\n<li>end time<\/li>\n<li>location of event (street, postal code, city\/place)<\/li>\n<li>description of the event<\/li>\n<li>GoogleMap of location<\/li>\n<li>image of location or image of previous event (could also be a slider)<\/li>\n<\/ul>\n<p>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&#8217;t know how to create a CPT in your childtheme functions.php, use the plugin <a href=\"https:\/\/wordpress.org\/plugins\/custom-post-type-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">Custom Post Type UI<\/a>.<\/p>\n<div id=\"attachment_1817\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/insert-event.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1817\" class=\"wp-image-1817 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/insert-event.jpg\" alt=\"\" width=\"1024\" height=\"578\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/insert-event.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/insert-event-300x169.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/insert-event-768x434.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-1817\" class=\"wp-caption-text\">Create an event with ACF fields and one taxonomy field<\/p><\/div>\n<h3>Archive page and single post page<\/h3>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/archive-module-post-list.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-1792\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/archive-module-post-list.jpg\" alt=\"\" width=\"249\" height=\"264\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/archive-module-post-list.jpg 596w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/archive-module-post-list-283x300.jpg 283w\" sizes=\"auto, (max-width: 249px) 100vw, 249px\" \/><\/a><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-post-layout.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1794\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-post-layout.jpg\" alt=\"\" width=\"350\" height=\"330\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-post-layout.jpg 1204w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-post-layout-300x283.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-post-layout-768x723.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-post-layout-1024x964.jpg 1024w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a>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 &#8217;embed&#8217; the list on the homepage of the website. We did use the same method like in <a href=\"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2017\/03\/24\/beaver-themer-and-search-filter-pro-makes-wordpress-an-even-more-powerful-cms\/\">our project with Ren\u00e9 Spijker<\/a>. We made our own &#8216;Custom Post Layout&#8217;, 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.<\/p>\n<h3>&#8216;Embed&#8217; the Beaver Themer code<\/h3>\n<p>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.<\/p>\n<blockquote><p>Rows with Beaver Themer modules (or modules on its own) can be saved and used &#8216;anywhere&#8217; else\u00a0within Beaver Builder pagebuilder<\/p><\/blockquote>\n<div id=\"attachment_1841\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/basic-archive-display.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1841\" class=\"wp-image-1841 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/basic-archive-display.jpg\" alt=\"\" width=\"1024\" height=\"496\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/basic-archive-display.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/basic-archive-display-300x145.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/basic-archive-display-768x372.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-1841\" class=\"wp-caption-text\">Part of basic archive display for archive template in Beaver Themer with CPT<\/p><\/div>\n<div id=\"attachment_1846\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-archive-display.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1846\" class=\"wp-image-1846 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-archive-display.jpg\" alt=\"\" width=\"1024\" height=\"173\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-archive-display.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-archive-display-300x51.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/custom-archive-display-768x130.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-1846\" class=\"wp-caption-text\">Part of custom archive display for archive template in Beaver Themer with CPT<\/p><\/div>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/voorbeeld-sezo.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-1796\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/voorbeeld-sezo.jpg\" alt=\"\" width=\"351\" height=\"361\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/voorbeeld-sezo.jpg 1674w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/voorbeeld-sezo-292x300.jpg 292w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/voorbeeld-sezo-768x790.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/voorbeeld-sezo-995x1024.jpg 995w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>We saved the Beaver Themer &#8216;Post List&#8217; as a module. Editting the homepage with Beaver Builder Pagebuilder would normally not display\u00a0the\u00a0&#8216;Archive Modules&#8217; 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 &#8216;Agenda&#8217; 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.<\/p>\n<h3>Making your own event manager even more effective<\/h3>\n<p>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 <a href=\"https:\/\/nl.wordpress.org\/plugins\/advanced-forms\/\" target=\"_blank\" rel=\"noopener noreferrer\">Advanced Forms<\/a> you can use the power of Advanced Custom Field in the front-end of your website.\u00a0You could add the possibility to give &#8216;others&#8217; 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 &#8216;events record&#8217; within the existing posttype. That has not been done yet, we don&#8217;t know if that will happen. But with a simple <a href=\"https:\/\/nl.wordpress.org\/plugins\/post-type-switcher\/\" target=\"_blank\" rel=\"noopener noreferrer\">Post Type Switcher<\/a>, 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 <a href=\"https:\/\/wordpress.org\/plugins\/events-manager\/\" target=\"_blank\" rel=\"noopener noreferrer\">Events Manager<\/a>.<\/p>\n<div id=\"attachment_1822\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/part-of-single-post.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1822\" class=\"wp-image-1822 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/part-of-single-post.jpg\" alt=\"\" width=\"1024\" height=\"441\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/part-of-single-post.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/part-of-single-post-300x129.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/part-of-single-post-768x331.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-1822\" class=\"wp-caption-text\">We still have to design the single post page, but this is the basic idea<\/p><\/div>\n<p>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\u00a0&#8216;overkill&#8217; 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 &#8216;just&#8217; used ACF with Beaver Themer to do most of the requested requirements.<\/p>\n<h3>What we want to add<\/h3>\n<p>On the homepage we want to add a GoogleMap with all markers for all\u00a0event 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 &#8216;un-double&#8217; event locations with the same location, because we don&#8217;t how the GoogleMap API will react to display more markers on the same location. Any thoughts, let us know!<\/p>\n<p>For now we just use the\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/basic-google-maps-placemarks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Basic Google Maps Placemarks<\/a> 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\u00a0are other solutions &#8216;out there&#8217;, like <a href=\"http:\/\/wpbeaches.com\/create-multiple-marker-map-from-acf-google-map-location-field-and-a-cpt\/\" target=\"_blank\" rel=\"noopener noreferrer\">this set of routines<\/a> from WP Beaches. We are still studying on how to use PHP routines within Beaver Themer.<\/p>\n<h3>Relational fields and Beaver Themer<\/h3>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/BT-post-types.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-1854\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/BT-post-types.jpg\" alt=\"\" width=\"299\" height=\"179\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/BT-post-types.jpg 557w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/04\/BT-post-types-300x180.jpg 300w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/a>Beaver Themer supports a specific set of ACF fields (not all). We would like the &#8216;Post Object&#8217; field and the &#8216;Repeater Field&#8217; to be supported, to be more flexible in the exchange of data between various post types. The &#8216;Page Link&#8217; and the &#8216;oEmbed&#8217; type are\u00a0&#8216;connectors&#8217; to content from other sources.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>There are many &#8216;heavy weight&#8217; 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.<\/p>","protected":false},"author":2,"featured_media":1798,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3],"tags":[34,62,71],"class_list":["post-1787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-review","category-test","tag-acf-pro","tag-beaver-themer","tag-events-manager"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/comments?post=1787"}],"version-history":[{"count":3,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1787\/revisions"}],"predecessor-version":[{"id":1871,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1787\/revisions\/1871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/1798"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=1787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=1787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=1787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}