How to Create & Display Custom Fields in The Events Calendar Plugin

How to Create & Display Custom Fields in The Events Calendar Plugin

 Today I’m going to show you how to easily add custom field to single events in the Events Calendar plugin and display them on the front end event pages. This post is intended for WordPress beginners and advanced level users, with straightforward instructions and optional explanations about the steps.

 

 

Problem Snapshot: While creating custom fields in the Events Calendar Plugin is fairly simple, you may notice that upon adding value to the fields and publishing the events, the newly added custom fields won’t show up in the front end.

Solution: You have to manually insert these fields in the templates responsible for displaying the correspondent content of single events. It may be slightly confusing to decide where to locate the files, but don’t worry, since we’ll tackle this one step at a time using a customization I’ve recently made to the Events Calendar plugin to display two custom fields for a project at work. Without further ado let’s get it rolling.

 

Step One- Create the Custom Fields

There is not a centralized location in this plugin where you can create custom fields to be selected in the events editing screen like Events Manager (yet another nifty WordPress event plugin that also offers extensive functions and a simpler custom field displaying.)

To add custom fields to events, you need to open the Add New Event page in your site’s admin area, scroll down until you come across the Custom Fields section. You can add custom fields to the event by either using the drop down bar to select an existing field or click “enter new” to type your own. After that you can enter the values for each desired field. Once you’ve finished editing the rest of the event info, simply publish or update the event to save the edits.

Additional Info— You can name the fields whatever you want, but it’d be wise to use “_” or “-” to separate words in the custom field name. The name of your custom field will be stored as “meta_key” while the value of the field will be stored as “meta_value” in the _postmeta table of your website’s database.

Step Two- (Optional) Create/Update Changelog.txt of your website

If you haven’t already, it’s a good idea to create a changelog file for your WordPress website to keep track of modifications that you are making to your websites’ core files, themes, plugins, etc. You can also keep notes of observations in the file. Create the changelog.txt file in your ftp or upload one from your desktop. I like to keep mine to website’s root folder to prevent it from getting removed during website updates.

Step Three- Find the Correct Files to Edit within the Plugin

Based on where you would like to display the custom fields, you’ll need to make changes to different template files accordingly. There are three main folders inside this plugin. The template files and other codes related to the structure of the plugin reside in the “src” folder. Once you are in the folder, you’ll see a subdirectory called “views” which allures that it is may be related to display templates. Let’s test our luck and click into the “views” directory where we may find different template folders and files…

There’re several ways to look for the correct file. One is by guessing and opening each folder and file. You may also use the search function in your ftp panel or your local computer if you’ve downloaded the plugin to find a phrase that is hopefully unique to the section that you’d like to add the custom fields to. For example, you may want to search “Details” or “Venue” if you are trying to showcase the fields under either one of those sections.

I wanted to add a “Speaker” field somewhere in the “Details” section and the “Room” field under the “Venue” area and I found the templates to edit details.php and venue.php in this directory: …/wp-content/plugins/the-events-calendar/src/views/modules/meta

Step Four- Copy the Template Files into Your Child Theme

After determining the files that you want to edit, take a look inside them. I will be using Venue.php found inside …/wp-content/plugins/the-events-calendar/src/views/modules/meta as the teaching example here.

Among the top section you’ll see a useful tip left by the plugin authors –

Override this template in your own theme by creating a file at:
* [your-theme]/tribe-events/modules/meta/venue.php

So simply copy the files you want to work on to the said destinations. To make sure that your changes will stay even after you update your website themes, you will probably want to house these files inside your child theme folder, instead of the original theme.

If you haven’t already setup a child theme, refer to the instructions here, set one up and go ahead to come back here afterwards. Still feel clueless about what you’re supposed to do after reading the link? Let’s make it a tad simpler. All you really need is to create a folder inside your website’s themes directory and name it as “current-theme-child.” Go to “../your_website’s_root_directory/wp-content/themes” create a subdirectory (i.e. a folder) inside here and call it “current-theme-child.”  This new folder is your child theme. In order to use it, you’ll need to activate that theme in your Theme Options tab in the site’s WordPress admin area.

If you already have a child theme going, great! Let’s create a folder named “tribe-events” open the new folder and create the another one called “modules” inside “tribe-events”. Next, you will click into that folder and create another one and name it as “meta” wherein you will add the new files.  You might be able to just use the copy function in your ftp server to move the files. If that isn’t applicable, you will open each file you plan to edit, select all the content inside and copy it. Next, navigate to the designated directory create a new .php file, open it up, and paste the code inside.

Depending on which elements you would like to edit, you will need to modify different files, and therefore, you may have to move those files to other locations as instructed in the top section of those templates. Just pay attention and make changes accordingly for your own needs.

Step Five- Make the Modifications

1. The Top Section (Defining the Variable)

Now that you’ve copied over the template files to your child theme folder, simply open the newly generated files in the child theme folder on your ftp or download the file to make edits. As mentioned earlier, I’ve chosen Venue.php found inside …/wp-content/plugins/the-events-calendar/src/views/modules/meta as the teaching example. Details.php is the other file that I’d modified to display the Speaker custom field,  and since these two files are structurally identical, I will only use one as the example.

Venue.php comes with two major parts, the top half of the files is php code that defines the variables being used/referred to in the lower part of the templates where the information is “told” to be printed in the front end. You’ll find command markups similar to the following in the first part of the file:

$time_format = get_option( ‘time_format’, Tribe__Events__Date_Utils::TIMEFORMAT );
or
$time_range_separator = tribe_get_option( ‘timeRangeSeparator’, ‘ – ‘ );

The main distinction between these two lines is that one of them adds “Tribe_” before “get_option,” but the other one doesn’t. Remember that our custom fields’ names are stored as “meta_key” and the data are stored as “meta value“, we’ll now use this as a clue to create a new command to define our new variables for the bottom section.

Since we’re handling a custom field, we’ll be using the “get_post_meta (get_the_ID(), ‘meta_key’, true )” WordPress function to retrieve the post meta field value from the database. For more detail regarding the get_post_meta function, visit here.

Copy the following string and paste it into a new line within the top section:

$customfield = get_post_meta( get_the_ID(), ‘Custom_Field’, true );

Refer to this screenshot if you aren’t sure where to insert the string if you aren’t certain about it. The line of code that I’ve inserted and customized is highlighted in blue. As you can see, I’ve replaced “customfield” with “room” and “Custom_Field” with”Room.”

If you’re interested, I’ll dissect this string to help you understand what it’s for. In essence, this line is defining a never exited term, i.e. a variable, in this template so that it can be used later in the file. Take the highlighted line for instance, $room is the variable that will be called upon in the action code later in the template, and Room is the meta key that was previously created when the custom field “Room” was added on the event edit page. 

2. The Bottom Section (Adding  the Action)

Let’s move to the second part of the template where we can actually manipulate the fields and data that show up on the front end of single event posts. In this area, you will see a bunch of php code that references the variables that have been listed in the top section, e.g. “$phone.” We’ll select a spot to insert the following lines of code so that our custom field will be displayed in the front end:

1. <?php if ( ! empty( $room ) ) : ?>
2. <dt> <?php esc_html_e( ‘Room:’, ‘tribe-events-calendar’ ) ?></dt>
3. <dd class=”class=”room”><?php echo $room; ?></dd>
4. endif ?>

This part may be slightly confusing for some folks, so I’ll do my best to explain what each line mean by breaking them down from 1 to 4. 

Line 1- checks to see if the variable “$room” is empty-valued or not. If the value of “$room” is empty, meaning that it either doesn’t exist or equals to false, there will be no further action taken with regards to the variable in question. As a result, this function lets us hide our empty fields in the front end.

Line 2- basically prints the word ‘Room:’ in the given area. You can type anything in place of ‘Room:’. For instance, you can use ‘Room Number:’ instead of ‘Room’ which won’t affect the value of the variable (in this case, changing the text in this part won’t change the number of the room).

Line 3- echos the value of the variable $room by referring to the variable that has already been defined in the top section of the file. It is important for the variable listed here to match up with what has already appeared above in order for the value to be printed on the page successfully.

Line 4- ends the php loop. 

Again, if you don’t feel sure about where to insert the custom code, check the screenshot below for hints. My customized code has been highlighted in blue:

 

Step Six- Modify Any Other Files/Lines If Necessary

Follow the Same Steps to make additional changes in other locations/files. Read through the steps if you encounter any issues or leave a message under this post to get answers to questions that you may have.

Step Seven- Save and Check the Single Event Page

Don’t forget to save or upload the modified template. Once that’s done, navigate to the event page that you’ve inserted the custom field into and view it as a privately published or published post.  This is what it ended up looking like on my site (notice how the “Speaker:” and “Room:” fields have now shown up):

 

There you have it. I hope that you were able to follow along and make use of this tutorial. Take care!

About The Author

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *