Sallie Goetsch: Making the Events Calendar Sit Up and Beg
1 like1,579 views
The document outlines a meetup event for the East Bay WordPress group held on July 19, 2015, focusing on the Events Calendar plugin. It includes sponsor promotions, an agenda for presentations on customization and integration of the Events Calendar, and technical instructions for plugins like Meta Slider Pro and Event Rocket. The presenter, Sallie Goetsch, provides resources and tutorials for enhancing the functionality of the Events Calendar within WordPress themes.
![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]](https://image.slidesharecdn.com/2015-07-tec-150918011526-lva1-app6892/85/Sallie-Goetsch-Making-the-Events-Calendar-Sit-Up-and-Beg-28-320.jpg)
Sallie Goetsch: Making the Events Calendar Sit Up and Beg
- 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();
- 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
- 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