Version 1.5
The Events Calendar is a very powerful WordPress plugin for managing events. However, the way its templates and CSS are implemented—especially in "v2"—leave much to be desired.
This contains all the changes I make on a project for The Events Calendar. Hopefully it's useful. If it saves you an hour, maybe you can buy me a cup of coffee or a beer 🍻
- Copy and customize BOTH
default-template.phpfiles into theme folders-
/tribe-events/default-template.php- Old version of file, still used for single events -
/tribe/events/v2/default-template.php- Used for new Month, List, Day, etc. views
-
- Clean up one or both single event templates:
- Classic Editor Events:
single-event.php - Block Editor Events:
single-event-blocks.php
- Classic Editor Events:
- Customize additional templates as needed. Recommended:
-
tribe/events/v2/list/month-separator.php- Should use a Heading 2 for better heading structure -
tribe/events/v2/list/event.php- Date/time should follow the event's title heading for logical structure -
tribe/events/v2/latest-past/event.php- Date/time should follow the event's title heading for logical structure -
tribe/events/blocks/event-datetime.php- Don't use a Heading 2 for logical heading structure on single events -
tribe/events/v2/list/event/date-tag.php- Applyaria-hidden="true"to redundant date information that's outside of logical heading structure -
tribe/events/v2/latest-past/event/date-tag.php- Applyaria-hidden="true"to redundant date information that's outside of logical heading structure -
tribe/events/v2/list/event/feature-image.php- Applyaria-hidden="true"andtabindex="-1"to featured image link since it's redundant with the event title link in list view -
tribe/events/v2/latest-past/event/feature-image.php- Applyaria-hidden="true"andtabindex="-1"to featured image link since it's redundant with the event title link in list view
-
- Fix a few things about event pages and set custom default block template with mu-plugin in
the-events-calendar-customizations.php- Custom Block Templates with
tribe_events_editor_default_templatefilter. Seeexample-block-templates.phpin this gist has three examples of block templates of various complexity - See: https://support.theeventscalendar.com/807454-Change-the-Default-Event-Template-in-Block-Editor
- Custom Block Templates with
- Use
tec-resets.scssreset stylesheet below to get rid of hard-coded- Set CSS properties to match theme font sizes and colors
- Note use of SCSS nested selectors because that's what I use
- Add custom styles to blocks.
- (Optional) Install plugin to hide Export links https://theeventscalendar.com/extensions/remove-export-links/
In v2 templates, you can use the tribe_template_pre_html filter to hide specific template parts. For example, to hide the "Read More" links in list views:
/* Hide "Read More" links */
add_filter( 'tribe_template_pre_html:events/v2/components/read-more', '__return_false' );You can also helpfully add content before or after any template part using tribe_template_before_include and tribe_template_after_include. For example:
/* Add "Hello World" after the "Views" selector in the event bar */
add_action( 'tribe_template_before_include:events/v2/components/events-bar/views', function( $file, $name, $template ) {
echo 'Hello World';
}, 10, 3 );- https://theeventscalendar.com/knowledgebase/k/using-template-filters-and-actions/
- https://theeventscalendar.com/knowledgebase/k/template-hooks/
- Add new override selectors for new Single Event view released in 5.5
- Remove font-family now that there's a customizer setting for it
- Attempt to improve subscribe button style overrides dealing with weird focus and hover behaviors. Absolute position dropdown to avoid layout jank
- Improvements to subscribe button overrides to make them more likely to win over unwanted theme styles
- Fix featured event styles in month view
- Add styles to override subscribe button styles
- New suggestion to hide featured image from assistive technology in list views
- Add equivalent template changes to
/latest-past/templates to match/list/changes where applicable
- Add new selectors for heading styles and links on the new single event templates to match other override styles (fonts, underlining behavior, etc.)
- Increase specificity of
.tribe-common-c-btnselectors in order to override messed up settings in plugin and ensure the search bar button is the correct color - Remove filter that hid the back link on the single template. Does not work in v2 single events.
- Add new selectors to inherit font styles from the theme
- Add editor selectors to try to style blocks closer to front-end. Results will vary.
- Bug fix for TEC 5.7.0 template_include filter
- Add
/v2/to path oftribe_template_before_includefilter to fix bug in TEC 5.5. - Remove errant SASS variable in style resets
- Fix missing accent customization for Featured Styles in list view. Adds new
--tec-accent-colorvariable that defaults to--tec-link-color
I'm Mark Root-Wiley of MRW Web Design. I build WordPress websites for nonprofits. Checkout my free resource site Nonprofit WP and my free plugins.