Tutorial: Integrating The Events Calendar w/ Genesis (2.x Builds Only)

Published on: May 1, 2012 |Tags: | Categories: Help Video, Tutorial

Please note that all documentation below is for The Events Calendar 2.0.1 through 2.0.11. If you need help with version 3.0 or beyond, please head to the forums.

Hey everybody, after much filming and editing we have for you this epic four part tutorial series on how to integrate The Events Calendar with the Genesis theme framework. In the videos we cover everything from getting your environment setup to customizing the Genesis breadcrumbs function to include events specific pages to setting up event page specific sidebars.

There are numerous helpful examples of techniques that will apply not only to Genesis, but any theme. In the end you will have a solid base to begin building your Genesis based or other theme with The Events Calendar plugin.

Source Files: Download (contains the full finished child theme I work with in this tutorial)

Part 1 – Introduction, Settings, Template Overrides (Run Time: 14:05)

Part 2 – Site Navigation, Site Layout, Widgets, CSS Modifications (Run Time: 14:45)

Part 3 – Breadcrumbs, Page Titles (Run Time: 16:24)

Part 4 – Sidebars, Cleanup (Run Time: 18:24)

Full Tutorial Script

Intro

In this tutorial I’m going to show you how to take the The Events Calendar plugin from Tri.be and integrate it with the Genesis theme framework. At first glance, the display is actually not that bad as you’ll see, but there are some common things that we’ll take a look at customizing to get the site in a good place for further customization. Additionally, many of the topics covered in this tutorial can apply to any theme and will hopefully give you some good ideas for whatever theme you’re working with.

What are we going to achieve?

  • We’re going to take the The Events Calendar plugin and the base Genesis theme framework and bridge the two. Out of the box they don’t quite get along and we’re going to walk through how to change that.
  • We’ll work on setting up the the main site navigation, the default events calendar and list pages, custom page breadcrumbs, custom page sidebars and widgets, custom page titles and other common elements.
  • Skill wise you should be fairly comfortable with CSS/HTML, PHP and jQuery and have what I would consider an intermediate knowledge of WordPress.
    You should be running at least v3 of WordPress, v2.0.5 of The Events Calendar/PRO and v1.8 of Genesis.

Step 1 – Get your environment setup

This tutorial utilizes WordPress, the Genesis theme framework, a Genesis child theme, and The Events Calendar plugin. I’m going to assume that you’ve got at least version 3 of WordPress, the latest version of The Events Calendar (2.0.5 at time of writing) plugin installed activated and ready to go and the latest version of the Genesis theme framework (1.8.1). I’m going to be using a child theme and recommend you do too but it’s not absolutely necessary.

To utilize a child theme with Genesis, grab the sample Genesis child theme I’ll be working with from their site: http://www.studiopress.com/download/sample.zip and place in the themes folder like you would any other theme. Using a child theme will separate your code from the core Genesis code which is good practice with most any theme. You can read more about setting up and working with child theme’s in Genesis here: http://www.studiopress.com/tutorials/genesis/building-child-themes

I’ve also provided the full source of the finished child theme I worked with that can be downloaded at the beginning of this tutorial.

Genesis has some great documentation and tutorials available if you’d like to learn more about the framework. Take a look at their tutorials for some fun and helpful information here: http://www.studiopress.com/tutorials/

I’m also assuming you have knowledge of and know how to use an FTP program, a code editor, CSS/HTML and are relatively familiar with and have worked with some PHP. This is an intermediate tutorial walking you through the steps necessary to really get a handle working with the Genesis Framework and The Events Calendar.

Some other really helpful tools to have while we go along are:

  1. MAMP Pro – allows you to develop locally instead of having to FTP files to see your changes.
  2. Chrome Developer Tools (comes with Chrome) or Firebug for Firefox – these two tools allow you to inspect elements on a page to see what CSS is being applied and apply quick CSS changes on the fly among other things.

WAIT!Before you move any further – you should always have a backup of your database and all files before doing any work so you can revert back. A Version Control System like SVN or Git is ideal for this but not necessary. There’s also tons of great backup plugins for WordPress and I recommend BackupBuddy (http://pluginbuddy.com/purchase/backupbuddy/)

Step 2 – Overriding

This is an optional step because we actually won’t be working with many of the overrides but it’s very useful to know for other customizations you may want to do with the plugin.

One step to customizing the The Events Calendar is to duplicate and override the plugins theme files. The Events Calendar has abstracted much of the output code so we can easily make modifications to the visuals without losing our customizations each time we update our plugin.

To override the plugin’s theme files make duplicate copies of the files from the /wp-content/plugins/the-events-calendar/views/ folder:

  • ecp-page-template.php
  • ecp-single-template.php
  • events-list-load-widget-display.php
  • full-address.php
  • gridview.php
  • list.php
  • single.php
  • table-mini.php
  • table.php

To get the plugin’s main CSS file copy ‘events.css’ from the /wp-content/plugins/the-events-calendar/resources/ folder.

Also, if you have PRO, you can override the following files from /wp-content/plugins/events-calendar-pro/views/:

  • events-advanced-list-load-widget-display.php
  • single-venue.php
  • widget-featured-display.php

Place duplicate copies of all these files in a folder labeled ‘events’ in your Genesis child theme directory.

Now, you can make changes to any of these files without losing our changes the next time we update the plugin.

Note: Overriding doesn’t come without a downside, and while there is really no other good alternative there is one caveat you should be aware of. If there are core updates to any of these files that introduce new features, fix bugs, etc. You will have to manually merge any new code into your customized override files. I know it’s a pain but this is the only way.

Step 3 – Take a Look at the Base Install

Let’s take a look at what we’re working with so far without doing anything other than having the plugin and theme installed. Again, WordPress and The Events Calendar plugin should be installed, activated and ready to go. For the theme, you should have the core Genesis theme installed (not activated) and your Genesis child theme activated.

The home page comes pretty stripped down as you can see. Like most other other themes, Genesis gives us the site title and tagline, the navigation, a post loop, the primary sidebar area and the footer. What we’ll do here is make the home page full screen and add some event widgets into the footer.

For general site-wide elements I’ll also walk you through customizing Genesis’ Breadcrumb system and custom event page titles.

Now, let’s take a look at the main event pages.

Here is our main calendar page at the default /events slug (you can change this in Settings > The Events Calendar “Events URL slug”). We’ll get this so it’s full screen, removing the widget, add the breadcrumbs as I mentioned and customize the page title.

Here is the default Events List page. What we’ll do here is add some page specific widgets, again bring in the breadcrumbs and modify the page title. Also, the Event List/Calendar buttons are getting cut off so we’ll do some quick CSS magic and get that cleaned up.

Here is our single events view and it doesn’t look too bad. Here we’ll again bring in the breadcrumbs and I’ll show you how to add some single event specific sidebar widgets.

Here is our single venue page and it also looks pretty good. Again, we’ll bring in the breadcrumbs and I’ll show you how to get a specific sidebar and widgets setup for your single venue pages.

Step 4 – Preface to Theming

We’re going to be working a lot with the child theme’s functions.php file which is a very powerful theme file in WordPress that essentially acts like a plugin and will let you affect things in the admin and in the front end of your website.

The sample child theme I’m working with comes with a base functions.php file as do most all themes. Leave the sample child theme’s functions.php code alone and just add any new code below the existing.

We’re also going to be working a lot with the child theme’s style.css which is the stylesheet file for the theme and controls the CSS for the website.

I like to keep things organized when working. If a plugin has a stylesheet that I can override (like the events.css file for The Events Calendar), I do all my plugin specific CSS in that file and the general theme specific CSS in the style.css file but feel free to mix and match or combine if you want. Bottom line is, they will both be loaded and your styling will be applied as long as you’re following proper specificity rules.

Step 5 – Settings

First things first, let me have you adjust some important settings within WordPress, Genesis and The Events Calendar.

  1. First in WordPress go to Settings > Permalinks and set your permalink structure to “Post name” and Save Changes (you don’t have to do this and you might not even be able to with your web host but it will make your website URL’s much prettier and help with SEO!)
  2. Next for Genesis, go to Genesis > Theme Settings and scroll down to the Breadcrumbs panel and check all the boxes so we have Genesis’ breadcrumbs showing on all pages. Click Save Settings at the bottom.
  3. Next in Settings > The Events Calendar, make sure:
    • Your “Default View for the Events” is “Calendar”.
    • Your “Events URL Slug” is ‘events’.
    • Your “Single Event URL Slug” is ‘event’.
    • Your “Events Template” is “Default Page Template”.
    • All other settings left at their default.


Note: These are all default settings so you probably won’t have to change them and they are not super important for this tut but will help in keeping a consistent thread throughout.


Step 6 – Now We Theme

Ok, enough warnings and overview. Let’s have some theming fun!

Let’s start by adding a menu to your website so you can navigate the events pages.

    1. Go to Appearance > Menus and since this is a fresh install, there are no menus. Let’s create one.
    2. In the Menu Name box on the right, enter a new menu name and click Create Menu. I’m naming mine “Top Navigation”.
    3. After creating the new menu you’ll see the Theme Locations box appear on the left. Go ahead and select your newly created menu in the Primary Navigation Menu location and click Save.
    4. Now let’s get some items in that menu. Wait, where is our Events panel to add items from? It’s hidden by default and all you gotta do is click Screen Options at the top and check the Event related items (Events, Venues, Organizers and Event Categories). (screenshot below on next page)

    1. Now you should see panels for all your Event related items on the left. (screenshot on right)

    1. Since The Events Calendar does not create a page in the traditional sense, we’ll need to add a custom link for it. In the Custom Links panel, type the relative URL ‘/events’ in the URL field and give it a label of Events and click Add to Menu.
    2. Let’s also do the same thing for the Home page since we don’t have an actual Home page (our Home page just shows our blog posts now). So in the URL field for a new Custom Link, type ‘/’ indicating the relative root of our website and for the label type Home. (screenshot below)

  1. Click Save Menu to save the changes.

Now we’ve got our custom site menu working with a link to our Events page!

Looking good in the neighborhood! Feel free to add any other links you want in to the custom menu…

Step 7 – The Home Page

Now back to the home page. All we’ve got now is our Hello World post in a standard loop and the default Primary Sidebar Widget Area message. Let’s get rid of the sidebar, make the home page full width, and then put some widgets into 3 columns below the loop.

Fire up your favorite code editor, mine is Coda! Open the child theme’s functions.php and you’ll see something similar to this ->

We’re going to leave the default functions.php code alone. Add your custom code below it.

The first thing is adding a really handy filter function that controls the layout in Genesis.

Add the following on line 24:

/*---------------------------------------------------------------*/
/* Set Custom Layouts
/*---------------------------------------------------------------*/
add_filter('genesis_pre_get_option_site_layout', 'set_layouts');
function set_layouts($layout) {

if ( is_front_page() ) {
	$layout = 'full-width-content';
}

	return $layout;
}

This simply checks if we’re on the front page in WordPress and if so to apply the full width. Following are all the possible layout parameters in Genesis:

  • Content/Sidebar: content-sidebar
  • Sidebar/Content: sidebar-content
  • Content/Sidebar/Sidebar: content-sidebar-sidebar
  • Sidebar/Sidebar/Content: sidebar-sidebar-content
  • Sidebar/Content/Sidebar: sidebar-content-sidebar
  • Full Width Content: full-width-content

Genesis does provide layout controls on a page or post basis but these options are not available for events, event pages, categories since the plugin creates these screens behind the scenes and in general this is handy function to use for other things in your theme.

After saving functions.php and viewing your home page you should now see it as a full width layout. Nice…

The home page is still kind of bare, so let’s add some event widgets below the loop. Our default child theme in Genesis has 3 footer widget areas unless you’ve changed this. Go to Appearance > Widgets and you should see the 3 Footer Widget area’s. Let’s drag the Events Calendar into Footer 1, the Events List Advanced Widget into Footer 2, and the Next Event Widget into Footer 3. Set the Events List Advanced Widget to only display 3 events. Now go back to your home page, refresh and see what we’ve got now:

The home page with standard loop and 3 widgets below. Sharp. But could be sharper. I want to bump those widget titles up a bit in font size and clean up the Upcoming Events items.

Since widget titles relate to widgets throughout the website and not specifically events, I’m going to make the changes for that in our child theme’s style.css. If I right-click one of the widget titles in Chrome and select Inspect Element, my Webkit Inspector will fire up with that exact element selected. Then I can see what styles are applied and on which line number in the code and test some basic styles out before making my actual changes in the stylesheet. This is an indispensable tool for anyone working on a website and I highly recommend getting used to using it if you don’t already.

In the Webkit Inspector I can see that the font size for my widget titles is being set here: line 730 in my child theme’s style.css file. Perfect, let’s go there and bump up the font size from 14px to 20px. Looks good, but now our date and ‘View all’ link is kind of big. If I Inspect Element on that I can see that the font size change we just made affects these other elements as well but so does our general h4 styling set in the Genesis child theme on line 725 of style.css – so, instead of removing these font sizes I’m going to specifically change the font size of the date and ‘View all’ link by targeting the .cal-header class selector on line 445 of our events.css file in the ‘events’ folder in our child theme (this is one of the overrides – see above). Simply add font-size: 14px; to the declaration like so:

.events_calendar_widget h4.cal-header {
	font-size: 14px;
	margin:12px 0 0;
}

We’ve also got that ugly extra box around the even numbered event in our Events List Advanced Widget (Upcoming Events). If I Inspect Element on that I can see that the border is a general theme style applied to elements with an .alt class which is used for alternate styling in lists or elements elsewhere in the theme. Well, I don’t want this for my events so I’m going to override it. Since it’s events related styling I’m going back to events.css

If I search events.css for the .eventsAdvancedListWidget class (the class used for this widget) there’s a few entries so I’m just going to add a new block to try and organize things a little better. On line 436 are styles for the Calendar Widget, so I’ll add the new styles below that with a nice CSS comment to keep it clean and tidy. On or around line 493 add the following:

/*===== Events List Advanced Widget =====*/
.eventsListWidget li,
.eventsAdvancedListWidget li {
	border: 0;
}

Notice I’m including .eventsListWidget li in the declaration for our non-pro users :)

Border gone!

That’s about it for the home page for now. Maybe we’ll come back for some other things if there’s time. But it’s looking pretty good with the standard loop and our 3 widgets.

Step 8 – The Calendar Page/Breadcrumbs

Let’s next take a look at the Calendar page. As I mentioned earlier, we’d like to make the page full width, clean up the breadcrumbs and customize the page title.

As you can see, the breadcrumbs on the calendar page are not exactly correct… We’ll fix that.

Let’s start with the full width part – we’ll turn back to our trusty set_layouts function we used earlier for the home page. Go back to your functions.php file. All we need to do is add a new if statement and condition to check if we’re on the Calendar page which can be checked with the tribe_is_month() function.

/*------------------------------------------------------------------------------*/
/* Set Custom Layouts
/*------------------------------------------------------------------------------*/
add_filter('genesis_pre_get_option_site_layout', 'set_layouts');
function set_layouts($layout) {

    	if ( is_front_page() || tribe_is_month() ) {
	    $layout = 'full-width-content';
        }

    	return $layout;
}

In addition to setting the layout on the calendar page we also need to remove the genesis_get_sidebar action to completely remove the sidebar on this page.

Step 9 – Breadcrumbs

Next we need to clean up the breadcrumbs. Genesis uses a fairly complex breadcrumb class which we’re going to remove and then re-register our own with some customizations.

First go into /wp-content/themes/genesis/lib/classes and make a duplicate of breadcrumb.php and place into your child theme in an ‘includes’ folder. Open your copy of breadcrumb.php and change the following lines:

  • Line 23, change ‘Genesis_Breadcrumb’ to ‘Custom_Breadcrumb’
  • Line 569, change ‘genesis_breadcrumb’ to ‘custom_breadcrumb’
  • Line 574, change ‘new Genesis_Breadcrumb’ to ‘new Custom_Breadcrumb’
  • Line 580 change ‘add_action(‘genesis_before_loop’, ‘genesis_do_breadcrumbs’);’ to ‘add_action(‘genesis_before_loop’, ‘custom_do_breadcrumbs’);’
  • After line 580 add a new line with (which will remove the default genesis breadcrumb action): remove_action(‘genesis_before_loop’, ‘genesis_do_breadcrumbs’);
  • Line 592 change ‘genesis_do_breadcrumbs’ to ‘custom_do_breadcrumbs’
  • Line 621 change ‘genesis_breadcrumb’ to ‘custom_breadcrumb’

Finally in your functions.php file add on line 4 right beneath the init.php call the call to the new breadcrumb file:

require_once( get_stylesheet_directory() . '/includes/breadcrumb.php');

And now you have your own functioning breadcrumb class based off of Genesis that we can customize. Let’s start of by modifying some of the default arguments and labels:

On line 52 of breadcrumb.php use the following in place of what’s there now:

/** Default arguments */
		$this->args = array(
			'home'						=> __( 'Home', 'genesis' ),
			'sep'						=> ' / ',
			'events_root_link' => '<a href="/events" title="View the Events Page">Events</a>',
			'list_sep'					=> ', ',
			'prefix'					=> '<div class="breadcrumb">',
			'suffix'					=> '</div>',
			'heirarchial_attachments'	=> true,
			'heirarchial_categories'	=> true,
			'display'					=> true,
			'labels' => array(
				'prefix'	=> __( 'You are here: ', 'genesis' ),
				'author'	=> __( 'Archives for ', 'genesis' ),
				'category'	=> __( 'Archives for ', 'genesis' ),
				'tag'		=> __( 'Archives for ', 'genesis' ),
				'date'		=> __( 'Archives for ', 'genesis' ),
				'search'	=> __( 'Search for ', 'genesis' ),
				'tax'		=> __( 'Archives for ', 'genesis' ),
				'post_type'	=> __( 'Archives for ', 'genesis' ),
				'404'		=> __( 'Not found: ', 'genesis' ),
				'events_calendar' => __( 'The Main Events Calendar Page ', 'genesis' ),
				'events_list' => __( 'The Main Events List Page ', 'genesis' ),
			)
		);

Feel free to change any of these arguments but the main things we’re changing are adding the ‘events_root_link’ which you should change if your events slug is not ‘events’ and/or you want a different label. I’m simply using this argument to add to the breadcrumbs when on single events, venues, and event categories to link back to our main events page.

Next, I’m adding a couple labels, ‘events_calendar’ which we’ll use for the main calendar page and ‘events_list’ which we’ll use for the events list page. Feel free to change these to whatever you want to use in the breadcrumb trail for these pages.

The only other thing we need to modify in the breadcrumb.php code is the get_page_crumb function with custom code to detect the various events pages and modify the breadcrumb. Find the get_page_crumb function and modify:

if ( 'page' == $this->on_front && is_front_page() ) {
			/** Don't do anything - we're on the front page and we've already dealt with that elsewhere */
			$crumb = $this->get_home_crumb();
		} else {
			$post = $wp_query->get_queried_object();

To:

if ( 'page' == $this->on_front && is_front_page() ) {
			/** Don't do anything - we're on the front page and we've already dealt with that elsewhere */
			$crumb = $this->get_home_crumb();
		} elseif( tribe_is_month() && !is_tax() ) { // The Main Calendar Page
			$crumb = $this->args['labels']['events_calendar'];
		} elseif( tribe_is_month() && is_tax() ) { // Calendar Category Pages
			$term = $wp_query->get_queried_object();
			$crumb = $this->args['events_root_link'] . $this->args['sep'];
			$crumb .= $this->args['labels']['tax'] . $this->get_term_parents( $term->term_id, $term->taxonomy );
		} elseif( tribe_is_event() && !tribe_is_day() && !is_single() ) { // The Main Events List
			$crumb = $this->args['labels']['events_list'];
		} elseif( tribe_is_event() && is_single() ) { // Single Events
			$crumb = $this->args['events_root_link'] . $this->args['sep'];
			$crumb .= single_post_title('', false);
		} elseif( tribe_is_day() ) { // Single Event Days
			$crumb = $this->args['events_root_link'] . $this->args['sep'];
			$crumb .= 'Events on: ' . date('F j, Y', strtotime($wp_query->query_vars['eventDate']));
		} elseif( tribe_is_venue() ) { // Single Venues
			$crumb = $this->args['events_root_link'] . $this->args['sep'];
			$crumb .= single_post_title('', false);
		} else {
			$post = $wp_query->get_queried_object();

I’ve placed comments next to the conditionals to note what page we’re modifying the breadcrumb on and we’re using the ‘events_root_link’ and the labels we created to fill in some of the crumbs.

If you save the code and browse through the event pages you should now see the breadcrumbs showing you want you want!

If you need to change the events_root_link or any of the breadcrumb labels, just modify them in the arguments on line 51 in breadcrumb.php

Step 10 – Page Titles

Ok, now let’s get to the page title. This is a little easier… In functions.php add the following:

/*-------------------------------------------------------------------------------
	Modify Titles
-------------------------------------------------------------------------------*/
add_filter('genesis_post_title_text', 'custom_do_post_title');
function custom_do_post_title() {

 	$title = get_the_title();

 	if ( strlen( $title ) == 0 )
		return;

 	if( tribe_is_month() && !is_tax() ) { // The Main Calendar Page
		$title = 'Events Calendar';
	} else if( tribe_is_month() && is_tax() ) { // Calendar Category Pages
		$title = 'Events Calendar' . ' » ' . single_term_title('', false);
	} else if( tribe_is_event() && !tribe_is_day() && !is_single() ) { // The Main Events List
		$title = 'Events List';
	} else if( tribe_is_event() && is_single() ) { // Single Events
		$title = get_the_title();
	} else if( tribe_is_day() ) { // Single Event Days
		$title = 'Events on: ' . date('F j, Y', strtotime($wp_query->query_vars['eventDate']));
	} else if( tribe_is_venue() ) { // Single Venues
		$title = get_the_title();
	} else {
		$title = get_the_title();
	}

 	return $title;

}

This block of code just filters the genesis_post_title_text and modifies it if we are on the any of the event pages. I’ve got comments next to each condition explaining the title we are modifying.

Step 11 – The Events List/Specific Sidebars

Alright, so we’ve got our home page and main calendar page setup, let’s add unique sidebars to the Events List page.

Firstly, register a new sidebar area to use for the page. Add this to your functions.php file:

/*-------------------------------------------------------------------------------
	Register Custom Sidebars
-------------------------------------------------------------------------------*/
add_action( 'init', 'my_sidebars' );
function my_sidebars() {
	if ( !function_exists('register_sidebars') )
		return;

	// Formats the widgets, adding readability-improving whitespace
	// use this array for multiple widget areas
	$p = array(
		'before_widget' => '<div id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget'  => "</div></div>\n",
		'before_title'  => '<h4 class="widgettitle">',
		'after_title'   => "</h4>\n"
	);
	register_sidebar($p + array('name'=>'Event List Sidebar','id'=>'event-list-sidebar'));
	register_sidebar($p + array('name'=>'Single Events Sidebar','id'=>'single-events-sidebar'));
	register_sidebar($p + array('name'=>'Single Event Day Sidebar','id'=>'event-day-sidebar'));
	register_sidebar($p + array('name'=>'Single Venue Sidebar','id'=>'venue-sidebar'));
}

This function allows you to register as many custom sidebars as you want. If you want to add others, just duplicate the register_sidebar line and modify the name and id (i.e. for the single events and venue pages).

Next we’ll conditionally remove the default sidebar on just the Events List page for now.

/*-------------------------------------------------------------------------------
	Conditionally Remove Sidebars
-------------------------------------------------------------------------------*/
add_action('template_redirect', 'remove_sidebars');
function remove_sidebars() {
	if(tribe_is_event() || tribe_is_venue()) { //Events or Venue Pages
		remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
	}
}

This function ties into the template_redirect action which is the first place our conditional check will be true. Here I set the remove_action hook to remove the default genesis_sidebar action and genesis_do_sidebar function only on the Events List page.

And finally let’s conditionally add our newly registered sidebar:

/*-------------------------------------------------------------------------------
	Conditionally Insert Custom Sidebars
-------------------------------------------------------------------------------*/
add_action('genesis_sidebar', 'insert_sidebars');
function insert_sidebars() {
	if( tribe_is_event() && !tribe_is_day() && !is_single() ) { //Events List Page
		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('event-list-sidebar') );
	} else if( tribe_is_event() && is_single() ) { //Single Events Page
		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('single-events-sidebar') );
	} else if( tribe_is_day() ) { //Single Event Day Page
		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('event-day-sidebar') );
	} else if( tribe_is_venue() ) { //Single Venue Page
		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('venue-sidebar') );
	}
}

This adds the insert_sidebars function into the genesis_sidebar hook conditionally calling our ‘event-list-sidebar’ to only display on the Events List page.

Go ahead and add a widget to the new Events List Sidebar area and go to view your Events List page. You should see the widget there and only there. Browsing to your other pages, you should still see the default Genesis primary widget area message.

So this gives us a lot of flexibility in the theme. We can now easily register additional sidebars, and add and remove sidebars wherever we want! And all without a plugin, only with code!

For instance, let’s go ahead and add a sidebar for single events. First, we need to register it, so with the code above just add another register_sidebar function like so:

/*-------------------------------------------------------------------------------
	Register Custom Sidebars
-------------------------------------------------------------------------------*/
add_action( 'init', 'my_sidebars' );
function my_sidebars() {
	if ( !function_exists('register_sidebars') )
		return;

	// Formats the widgets, adding readability-improving whitespace
	// use this array for multiple widget areas
	$p = array(
		'before_widget' => '<div id="%1$s" class="widget %2$s"><div class="widget-wrap">',
		'after_widget'  => "</div></div>\n",
		'before_title'  => '<h4 class="widgettitle">',
		'after_title'   => "</h4>\n"
	);
	register_sidebar($p + array('name'=>'Event List Sidebar','id'=>'event-list-sidebar'));
	register_sidebar($p + array('name'=>'Single Events Sidebar','id'=>'single-events-sidebar'));
}

Then we just need to add conditions to our remove_sidebars and insert_sidebars functions to check for the single events pages:

/*-------------------------------------------------------------------------------
	Conditionally Remove Sidebars
-------------------------------------------------------------------------------*/
add_action('template_redirect', 'remove_sidebars');
function remove_sidebars() {
	if(tribe_is_event() && !tribe_is_day() && !is_single() || tribe_is_event() && !tribe_is_day() && is_single()) { //Events List Page OR Single Events Pages
		remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
	}
}
/*-------------------------------------------------------------------------------
	Conditionally Insert Custom Sidebars
-------------------------------------------------------------------------------*/
add_action('genesis_sidebar', 'insert_sidebars');
function insert_sidebars() {
	if(tribe_is_event() && !tribe_is_day() && !is_single()) { //Events List Page
		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('event-list-sidebar') );
	}
	if(tribe_is_event() && !tribe_is_day() && is_single()) { //Single Events Pages
		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('single-events-sidebar') );
	}
}

Now go to Appearance > Widgets and you should see your new Single Events Sidebar. Go ahead and add a widget to it and you should see that widget only show on your single events pages. Awesome!

The other thing I wanted to clean up on the Events List page is a quick CSS tweak.

As you can see on the Events List page, the toggle buttons are getting cut off on the top. This is happening because in our events.css file on line 37 you have:

.upcoming .tribe-events-calendar-buttons {
	top: -24px;
}

Which is positioning this element -24 pixels up from it’s containing elements and the .entry-content div has it’s overflow property set to hidden on line 542 of our child theme’s style.css

There’s a few ways to handle this but I’m simply going to remove the overflow: hidden property in the style.css file. Remove this CSS code:

.entry-content {
	overflow: hidden;
}

Conclusion

So that about sums it up. There’s of course a ton more you could do with this but this gives you a pretty solid foundation to take the Genesis Framework and The Events Calendar and get a basic site up and running with a nice home page, customized breadcrumbs, custom page titles and custom page sidebars.

Tags: |

5 Responses to Tutorial: Integrating The Events Calendar w/ Genesis (2.x Builds Only)

  1. Jenoff says

    Really nice tutorial. I implemented almost all of your customisations and I’m really happy with the results. Thanks a lot!

    • Rob La Gatta says

      Fantastic! Thanks for confirming as much, Jenoff. Glad to be of service. If we can do anything else in the future, or if you have any further questions, please do let us know. Cheers man.

  2. Paul says

    Any chance we can download this child theme with all the customizations already complete? Thanks!

    • Paul says

      Whoops! Found it nevermind :)

      • Jonah West says

        Glad you found it Paul, let us know if there’s anything else you need.

        Cheers,
        - Jonah