Overriding MEC Single Event Page

MEC is created by developers for developers! And it’s highly developer-friendly so you can simply override MEC templates in your theme and make it compatible with your theme style or use MEC filters/actions to customize it.

MEC has a number of template files in /path/to/modern-events-calendar/templates/, you can simply override them in your theme or child-theme. For example place them on the /path/to/theme/single-mec-events.php or /path/to/child-theme/single-mec-events.php

Please Not: If you use the lite version of MEC insert -lite after “modern-events-calendar”.

Let’s learn how to build an exclusive Single Event Page for our events.

First, create a PHP file in the root folder of your theme with the name single-mec-events.php. Then, in coding, call the main WordPress functions of get_header and get_footer. For example:

get_header();

get_footer();

Now, you can place all your desired content between these 2 functions.

Before getting any necessary fields for MEC, it is worth mentioning that MEC plugin supports the main functions like getting title, content, category, tags, featured image, however, loading other items needs to be done using the defined functions in MEC.

WordPress Functions:

Here's a list of the main functions in MEC:

# Name Code
01 Title get_the_title(); / the_title();
02 Content get_the_content(); / the_content();
03 Thumbnail the_post_thumbnail(); / the_post_thumbnail('full');
04 Tag get_the_tags();
05 Label get_terms( array('taxonomy' => 'mec_label','hide_empty' => false,));
06 Category get_terms(array('taxonomy' => 'mec_category','hide_empty' => false,));
07 Event Color get_post_meta( get_the_ID(), 'mec_color', true );
08 Start Date get_post_meta( get_the_ID(), 'mec_start_date', true );
09 Start Hours get_post_meta( get_the_ID(), 'mec_start_time_hour', true);
10 Start Minute get_post_meta( get_the_ID(), 'mec_start_time_minutes', true);
11 Start AM/PM get_post_meta( get_the_ID(), 'mec_start_time_ampm', true);
12 End Date get_post_meta( get_the_ID(), 'mec_end_date', true );
13 End Hours get_post_meta( get_the_ID(), 'mec_end_time_hour', true);
14 End Minute get_post_meta( get_the_ID(), 'mec_end_time_minutes', true);
15 End AM/PM get_post_meta( get_the_ID(), 'mec_end_time_ampm', true);
16 MEC Comment get_post_meta( get_the_ID(), 'mec_comment', true );
17 Read More get_post_meta( get_the_ID(), 'mec_read_more', true);
18 More Info get_post_meta( get_the_ID(), 'mec_more_info', true);
19 Cost get_post_meta( get_the_ID(), 'mec_cost', true );
20 Event Excerpt get_the_excerpt();

Modern Events Calendar Widgets:

If you need to load the MEC's widgets, please proceed as follows:
You should first add the following code in the PHP file "single-mec-events.php" you placed in the theme's root directory.

$single = new MEC_skin_single();
$single_event_main = $single->get_event_mec(get_the_ID());
$single_event_obj = $single_event_main[0];

Then call the widgets:

// attendees widget
$single->display_attendees_widget($single_event_obj);

// Booking Module
$single->display_booking_widget($single_event_obj,$single_event_main);

// breadcrumb
$single->display_breadcrumb_widget( get_the_ID() );

// Category Widget
$single->display_category_widget($single_event_obj);

// Cost Widget
$single->display_cost_widget($single_event_obj);

// Countdown Widget
$single->display_countdown_widget($single_event_main);

// Date Widget
$single->display_date_widget($single_event_obj);

// Export Widget
$single->display_export_widget($single_event_obj);

// Google map widget
$single->display_map_widget($single_event_main);

// Hourly
$single->display_hourly_schedules_widget($single_event_obj);

// Label Widget
$single->display_label_widget($single_event_obj);

// Local Time widget
$single->display_local_time_widget($single_event_obj);

// Location Widget
$single->display_location_widget($single_event_obj); // Show Location
$single->display_other_location_widget($single_event_obj); // Show Additional Locations

// More info widget
$single->display_more_info_widget($single_event_obj);

// next/prev widgets
$single->display_next_prev_widget($single_event_obj);

// Organizer Widget
$single->display_organizer_widget($single_event_obj); // show Organizer 
$single->display_other_organizer_widget($single_event_obj); // additional Organizers

// QR widget
$single->display_qrcode_widget($single_event_obj);

// Register Button
$single->display_register_button_widget($single_event_obj);

//Social
$single->display_social_widget($single_event_obj);

// Speakers widget
$single->display_speakers_widget($single_event_obj);

// Time Widget
$single->display_time_widget($single_event_obj);

// Weather Widget
$single->display_weather_widget($single_event_obj);

// Event Hourly Schedule
$single->display_hourly_schedules_widget($single_event_obj);

10 Comments
Avatar for Doris Cooper
sarmad December 4, 2019
| |

big thanks for this pluign, I am using this pluign there is an option of "hourly schedule" where we divided our event on multiple session i.e great feature but i want to customize it i need it database but i am unable to found yet, please help me in this regard where "hourly schedule session" are stored and which table? Thanks

Avatar for Doris Cooper
Shabin November 19, 2019
| |

Is there a way to show the event cost on the slider widget or any other shortcode?

Avatar for Doris Cooper
davidslee101 November 15, 2019
| |

How can I keep the default css code when I override MEC single events page?This is my code, which does not have any of the default css <?php get_header(); $single = new MEC_skin_single(); $single_event_main = $single->get_event_mec(get_the_ID()); $single_event_obj = $single_event_main[0]; // breadcrumb $single->display_breadcrumb_widget( get_the_ID() ); // Category Widget $single->display_category_widget($single_event_obj); // attendees widget $single->display_attendees_widget($single_event_obj); // Booking Module $single->display_booking_widget($single_event_obj,$single_event_main); // Cost Widget $single->display_cost_widget($single_event_obj); //Social $single->display_social_widget($single_event_obj); get_footer();

Avatar for Doris Cooper
Gladys September 5, 2019
| |

I love MEC, and using the widgets in the custom single event page works perfectly, the only trouble I have is that they are put out in English and not the page's language. If I use the inital single event page, the translation works fine, so how can I tweak this little problem? Thanks

Avatar for Doris Cooper
Tomaz August 30, 2019
| |

Hi, I would like to use MEC Single Page Layout, but I need to add a shortcode between the title and the content, is that possible? How would I do that? Thanks.