Sallie Goetsch shows several examples of ways to customize Modern Tribe's plugins The Events Calendar and Events Calendar Pro, including importing events from another plugin, setting up an event slider with Meta Slider Pro, integrating The Events Calendar into a Genesis child theme, using shortcodes from Event Rocket, creating a horizontal list widget with photos, and modifying the Photo view to show an equal-heights grid instead of a masonry grid.

1. July 19, 2015

2. EastBayWP.com

3. Our Meetup.com Page
http://www.meetup.com/Eastbay-WordPress-Meetup/

4. Ongoing Sponsor: Page.ly
http://page.ly/

5. New Sponsor: O’Reilly Media
Use discount code PCBW for 40% off print & 50% off ebooks and videos
on http://shop.oreilly.com.

6. Today’s Sponsor: Modern Tribe
http://tri.be/

7. INTRODUCTIONS
1. Name
2. Company (if appropriate)
3. WordPress background
4. Have you customized The Events Calendar?

8. Today’s Agenda
1. Sponsor presentation and Q & A
about The Events Calendar, Events
Calendar Pro, and related plugins
2. Meetup Members’ presentations
about how they have
used/customized TEC.

9. MAKING THE EVENTS
CALENDAR SIT UP AND BEG

10. MOVING FROM EVENTS
MANAGER TO TEC
Sallie Goetsch

11. Install WPCSV
https://wordpress.org/plugins/wp-csv/

12. Export 1) Events 2) Locations

13. Edit CSV File
• Event Name
• Venue Name
• Start Date
• Start Time
• End Date
• End Time
• All-Day Event
• Category
• Event Cost
• Show Map Link
• Show Map
• Event
Description

14. Install TEC and Import
https://theeventscalendar.com/knowledgebase/using-the-events-
calendars-csv-importer/

15. USING META SLIDER PRO WITH
THE EVENTS CALENDAR

16. Purchase & Install Meta Slider Pro
https://www.metaslider.com/upgrade/

17. Create a Post Feed Slide
https://www.metaslider.com/documentation/post-feed-tutorial/

18. Presto!

19. INTEGRATING TEC INTO A
GENESIS CHILD THEME

20. Add Sidebar to TEC Pages
• Copy default-template.php into
/tribe-events folder in your theme
directory.
• Use the appropriate TEC hooks to
display your event
• Conclude with genesis().
• All event pages will now display your
sidebar.

21. It’s as Simple as This
remove_action( 'genesis_loop',
'genesis_do_loop' );
add_action('genesis_loop','genesis_tribe');
function genesis_tribe() { ?>
<div id="tribe-events-pg-template"><?php
tribe_events_before_html();
tribe_get_view();
tribe_events_after_html(); ?>
</div><?php
}
genesis();

22. HORIZONTAL EVENT WIDGET

23. Instructions in a Nutshell
• Create full-width widget area
• Copy list-widget.php and save to
/theme_name/tribe-events/widgets/
• Modify code as necessary to display
featured image, etc.
• Modify CSS for inline-block display

24. SHORTCODE
EVENT
DISPLAY 1

25. Tutorial from Cockahoop
http://cockahoop-digital.co.uk/modern-tribe-events-calendar-plugin-shortcode/

26. SHORTCODES 2 WITH EVENT
ROCKET

27. Instructions in a Nutshell
• Install and activate Event Rocket plugin.
• Modify functions.php to add new
shortcodes as necessary.
• Enter shortcode where you want listings
to appear.
• Instructions are on the wiki
https://github.com/barryhughes/event-
rocket/wiki
https://wordpress.org/plugins/event-rocket/

28. This…
[event_embed category="advanced-trainings"]
<h4 class="orange">{title:linked}</h4>
<strong>{start_date} -- {end_date} | {city},
{region}, {country} | {cost}</strong>
{excerpt}
[/event_embed]

29. …Yields This

30. CHANGE PHOTO VIEW FROM
MASONRY TO GRID

31. Simplified Instructions
• Copy single-event.php from
views/pro/photo/ in plugin directory to
tribe-events/pro/photo in theme
directory.
• Comment out the <div> that includes
tribe_events_get_the_excerpt()
• Add CSS to set event heights, plus media
queries.

32. The Main CSS
#tribe-events-photo-events .type-
tribe_events.tribe-events-photo-event
{
float: left;
width: 29.2%;
height:320px;
margin: 0 4% 30px 0;
padding: 0;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

33. The Media Queries
@media only screen and (max-width: 1024px) {
#tribe-events-photo-events .type-
tribe_events.tribe-events-photo-event {
width: 44%;
}}
@media only screen and (max-width: 600px) {
#tribe-events-photo-events .type-
tribe_events.tribe-events-photo-event {
float: none;
width: 100%;
height:100%;
}}

34. Links
• TEC CSV Import Tutorial
• Meta Slider Pro Post Feed Tutorial
• Event Rocket Shortcode Tutorial
• Change Photo View to Grid Tutorial
• Horizontal List Widget Tutorial

35. About the Presenter
Sallie Goetsch
(rhymes with ‘sketch’)
Got online in 1985. Started
building websites in 1995.
Discovered WordPress in
2005. Organizer of the East
Bay WordPress Meetup.
@salliegoetsch
 salliegoetsch
 http://wpfangirl.com
 510-969-9947