How to Create Add To Calendar Buttons for Your Events
Tags: wordpress, calendar, event
Published: 2021-01-26 03:12:04

<!-- wp:paragraph -->
<p>If you have an event, a sale promotion, or a coming soon page that has a countdown timer, you should <strong>create an “Add to Calendar” button to help users add your event to their calendar via the </strong><code>.ics</code><strong> file</strong>. This <code>.ics</code> file can be opened by many popular calendar applications such as Outlook, Google calendar, or Windows Calendar. Thanks to that, readers can remember or create reminders to join your event.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, let’s find out how to create the <strong>Add to Calendar</strong> button on an event page using <strong>Meta Box</strong> plugin and its <strong>MB Custom Post Type &amp; Custom Taxonomies</strong> extension.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First of all, you need to install and activate these FREE tools:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li>Core <a href="https://metabox.io/">Meta Box</a> plugin: a framework that helps you create meta boxes and custom fields quickly and effortlessly. It’s free and available on <a href="http://wordpress.org/plugins/meta-box">wordpress.org</a>.</li>
<li><a href="https://wordpress.org/plugins/mb-custom-post-type/">MB Custom Post Type &amp; Custom Taxonomies</a>: a free extension of Meta Box that helps you create custom post types for events easily.</li>
</ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Step 1: Create a Post Type and Custom Fields for Your Event</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>On the <strong>Admin Dashboard</strong>, go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt;<strong> New Post Type</strong> to <a href="https://metabox.io/create-wordpress-custom-post-types/">create a new post type</a>.</p>
<p><img class="aligncenter" src="https://i.imgur.com/RHKsW7c.png" alt="Create a Post Type and Custom Fields for Your Event" width="1011" height="738" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Name this post type as <strong>Event</strong>, fill in the necessary information for this post type, and click <strong>Publish</strong>.</p>
<p><img class="aligncenter" src="https://i.imgur.com/yKpce0D.png" alt="fill in the necessary information for the event custom post type" width="1349" height="625" /></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Next, we need to create custom fields for the <strong>Event </strong>post type to enter the information about start time, end time, event location. To do so, I use the <a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a> extension (premium) to have a UI for creating custom fields right on the back end. If you don’t want to pay for it, you can also use the free <a href="https://metabox.io/online-generator/">Online Generator</a> tool of Meta Box or code manually.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to use the Online Generator, get the detailed instruction <a href="https://docs.metabox.io/online-generator/">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To create <a href="https://metabox.io/series/custom-fields/">custom fields</a> for the <strong>Event</strong> post type, go to <strong>Meta Box &gt; Custom Fields &gt; Add New</strong>. After that, select the field type and enter the field’s <strong>Label</strong> and <strong>ID</strong>. As for the <strong>Start </strong>and <strong>End </strong>fields, select the <strong>Datetime </strong>field type. And as for the <strong>Location </strong>field, select the <strong>Text </strong>field type.</p>
<p><img class="aligncenter" src="https://i.imgur.com/zQSUrVV.png" alt="create custom fields for the Event post type" width="1083" height="848" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>These are three fields that I’ve created. You need to remember their IDs because we are going to use them in the following step.</p>
<p><img class="aligncenter" src="https://i.imgur.com/9U5IyHf.png" alt="Remember the IDs of custom fields" width="1105" height="772" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Then, go to the <strong>Settings </strong>tab and choose the <strong>Post type</strong> as <strong>Event</strong>. Once finishing, remember to click <strong>Publish</strong>.</p>
<p><img class="aligncenter" src="https://i.imgur.com/bRDOdXz.png" alt="Choose the Event post type" width="859" height="843" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Now, when you create a new post in the <strong>Event</strong> post type and drag to the bottom, you will see the created fields. You have to fill in the value for them.</p>
<p><img class="aligncenter" src="https://i.imgur.com/plKYQss.png" alt="Fill in the custom fields with some information for the event" width="1294" height="943" /></p>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2>Step 2: Create the Add to Calendar Button</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First, I create a file named <code>single-event.php</code> in the theme folder (I’m using the <a href="https://gretathemes.com/wordpress-themes/justread/" rel="follow">Justread</a> theme) to edit the template of the single Event page. After that, include the <strong>Add to Calendar</strong> button to this page by adding this code to the <code>single-event.php</code> file:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<pre>&lt;?php

$start_date = rwmb_get_value( start_date, array( 'format' =&gt; 'Y-m-d g:iA' ) );

$start_date = wp_date( 'Ymd\THis', $start_date );

$end_date   = rwmb_get_value( end_date, array( 'format' =&gt; 'Y-m-d g:iA' ) );

$end_date   = wp_date( 'Ymd\THis', $end_date );

?&gt;


&lt;form method="post" action="?ics=true"&gt;

        &lt;input type="hidden" name="start_date" value="&lt;?php echo $start_date; ?&gt;"&gt;

        &lt;input type="hidden" name="end_date" value="&lt;?php echo $end_date; ?&gt;"&gt;

        &lt;input type="hidden" name="location" value="&lt;?php echo rwmb_meta( 'event_location' ); ?&gt;"&gt;

        &lt;input type="hidden" name="summary" value="&lt;?php the_title(); ?&gt;"&gt;

        &lt;input type="submit" value="Add to Calendar"&gt;

&lt;/form&gt;</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Note</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li><code>start_date</code>, <code>end_date</code>, and <code>event_location</code> are the IDs of the three fields that I’ve created in step 1.</li>
<li><code>name=”start_date”</code>, <code>name=”end_date”</code>, <code>name=”location”</code>, <code>name=”summary”</code> are the names of the data variables that will be used in the below code.</li>
<li>The above code is a form with the post method to pass the <code>start_date</code>, <code>end_date</code>, <code>location</code>, <code>summary data</code>.</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Next, we use the <code>template_redirect</code> hook to download the <strong>ics</strong> file (when users click the <strong>Add to Calendar</strong> button) with the <code>start_date</code>, <code>end_date</code>, <code>location</code>, <code>summary</code> data received above. This hook runs before we determine which template is loaded. In other words, this hook reloads the page to show a new window for users to download the <strong>ics</strong> file.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All you need to do now is add the following code to the <code>functions.php</code> file:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<pre>function justread_ics_download() {

        if ( is_singular( ‘event’ ) &amp;&amp; isset( $_GET['ics'] ) ) {

                include get_stylesheet_directory() . '/inc/ICS.php';

                header('Content-Type: text/calendar; charset=utf-8');

                header('Content-Disposition: attachment; filename=invite.ics');


                $ics = new ICS(array(

                        'location' =&gt; $_POST['location'],

                        'dtstart' =&gt; $_POST[start_date],

                        'dtend' =&gt; $_POST[end_date],

                        'summary' =&gt; $_POST['summary'],

                ));


                echo $ics-&gt;to_string();

                exit();

        }

}

add_action( 'template_redirect', 'justread_ics_download' );</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Explanation</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The ICS class is to export the <strong>ics </strong>file when users click the <strong>Add to Calendar</strong> button and download this file. This class is declared in the <code>ICS.php</code> file. You can refer to this <code>ICS.php</code> file content <a href="https://github.com/wpmetabox/tutorials/blob/master/ics-calendar/ICS.php">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Done! When going to the single page of the event, you will see the result:</p>
<p><img class="aligncenter" src="https://i.imgur.com/7sc999M.gif" alt="The Add to Calendar Button on the front end of WordPress website" width="1899" height="896" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>When clicking the <strong>Add to Calendar</strong> button, you will immediately download an <strong>ics </strong>file, and then open it with an application on your computer.</p>
<img src="https://i.imgur.com/T2TOIcr.png" alt="Download the calendar ics file" width="1365" height="728" />
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"></figure>
<img src="https://i.imgur.com/ofaffLk.png" alt="Add the event to the calendar" width="1364" height="565" />
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Congratulation! You’ve finished adding the event to your calendar.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Last Words</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Creating the <strong>Add to calendar</strong> button to the event post type will help users not miss any interesting events on your site. It’s also a factor to increase user’s experiences and engagement on your site. So if you want to have a converting landing page or a successful online event, this feature is absolutely worthy. Moreover, this process can be done easily with Meta Box plugin and its extension without any dime. Hope your events will always be successful!</p>