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.

Though we’d previously covered the Settings panel in some introductory documentation published when 2.0 launched, these new tweaks rendered that post obsolete…so here we’ve got round two. It’s worth noting that all of the features you’ve come to know & love from past builds are still here….but they may have been moved around or changed a bit, so pay attention. There are also some new features that may be of value to your particular install.

Cool, right? To summarize, in order of tabs as they were reviewed…

General

Default View For Events: Lets you configure whether your events appear on the frontend in grid or list view. Both views remain accessible to users viewing your calendar and they can toggle back and forth between them using easily labeled buttons.

Events URL slug/Single Event URL slug: These control where on your site the event calendar lives. The first is the broader calendar; if it shows /events (which is what it defaults to with pretty permalinks enabled), this means that visiting /events on the frontend of your site will bring up the calendar. Change this to whatever you desire but note that it cannot conflict with the Single Event URL slug. Examples of the slug as it’ll appear with relation to your site’s full URL is presented for each.

Number of Events To Show Per Page in the Loop: In previous versions, this was controlled by whatever you had set for overall WordPress install (under Settings -> Reading). This meant that if you had 7 blog posts set to appear in the homepage blog loop, only 7 events would appear in every Events loop too. The new setting breaks those apart and allows them each to be set independently. If you still want 7 blog posts in your main loop, fine; but now you can show as many or few events elsewhere as you see fit.

Show Comments: A simple checkbox for enabling and disabling comments on your events. If enabled, comments will behave the same as any other WordPress comment, and their behaviors dictated by what you’ve set under Settings –> Discussion on your site’s backend.

Multiday Event Cutoff: Sometimes you have an event that, while technically spanning over the course of two days, isn’t quite appropriate to have displayed that way. A good example is a party: while you may have rented the bar out from 9 p.m. Friday until 4 a.m. Saturday, it wouldn’t make sense to have that event displayed as a Friday-Saturday party. (What if people showed up the second night hoping for a rager?!). By using this setting, the final day for any event that ends on or before the time specified in the dropdown will not appear in grid view.

Enable Google Maps: Check this box if you want to enable the ability to display an embedded Google Map within your event listings. The location show on the map can be controlled on a post-by-post by basis, and will display the venue location using the Google Maps API. You have the option to set the embed height & width, as well as — starting in 2.0.5 — the zoom level of embedded maps (anywhere from 0, out in space; to 21, zoomed way in close). The zoom level defaults t0 1o, about halfway between the extremes of 0 and 21.

Debug: When this box is checked, debug information will be logged to your server PHP error log.

Template

Previously on the main settings page, the Template options have just been segmented out into their own tab. It provides a dropdown from which you can adjust the calendar’s appearance on the frontend. The plugin comes with template options of it’s own, and most plugins bring their own as well. Select a template from the dropdown, save and review the frontend of your site to see which works best for your layout.

With the Add HTML Before/After fields that appear below the dropdown, any information — text or HTML — that you’d like to display above or below the calendar can generally be added right here. Make sure to check your work on the frontend after saving, since there is a chance to make your calendar ugly if using this without being careful.

Defaults

After the box to enable these has been checked, customized defaults can save time on the event creation side by keeping you from having to manually re-enter venue/organizer details. Configure as many or as few details as you wish and upon saving, any new event created will have those fields pre-populated until you say otherwise. This was another feature that existed prior to 2.0.5 but has now been segmented out into its own tab.

Additional Fields

We’ve covered this elsewhere, so I won’t go into too much depth about it here. But if you need to add additional data about your events (caterer, for example) do so here…anyone creating new events will be able to utilize your additions. On the frontend this data appears right up alongside the start/end date, venue, etc. You can add as many as you see fit by hitting the “Add Another” option, and can pick your preference of text/dropdown/radio/checkboxes.

Licenses

Starting with 2.0.5, any events-related add-on you buy from Modern Tribe that requires a license will require you visit this tab. Licenses for all add-ons are placed here! The more you have installed, the more fields will appear. You can add as many or as few as you want at a given time; remember that since none of our plugins require the license to work, you’re merely adding them to access support & future updates. If you’re running a free plugin or one that doesn’t require a license you can obviously ignore this field.

Help

We spent a lot of time devising the Help tab so it’d be as valuable as possible to the community. Got an integration question or bug? Go here first. Aside from giving you an overview of our philosophy and how we treat support issues, it’ll direct you to valuable places like our help videos / FAQs / documentation / etc. We built this plugin to serve you and tried to cram as much information that can help you succeed in here as possible (without making it feel like an inundation…we hope).

–

That pretty much sums it up. Anything unclear? Still got questions? Let us know in the comments below. Thanks — as always — for listening.

Finding Your PRO License Key

During the checkout process when purchasing Events Calendar PRO, you selected a username and password that will serve as your credentials for accessing tri.be going forward. If attempting to find your license key, visit the login page and enter those credentials now.

Once logged in, hover over the Account Central link in the upper right-hand corner. Upon hover, it looks like this:

You’ll see 4 options in this dropdown:

• Profile: Allows you to view/edit your tri.be profile and related details.
• Downloads: This is where you can download the plugin. We’ll revisit this a little later.
• License Keys: Where the keys are located.
• Order History: A record of all orders you’ve ever placed.

For now, click into — you guessed it — “License Keys.” For every license key you’ve purchased, you’ll see a box like this:

It includes a link to the support page; the key itself; the expiration date; and any sites to which the key is tied.

In the screenshot above, you’ll notice that this key is currently unused. To plug it into a site, you’d simply copy the code in its entirety and head over to Settings –> The Events Calendar on your site. Assuming PRO is active (the key field won’t appear if it isn’t), you’ll see the field atop this page and can paste the code accordingly. The system will validate for a moment, but when the green message showing the expiration date shows, you’ll know you’re set.

Disconnecting The Key From A Site

Let’s say you’ve tied your license to a site that is going away, and you want to disconnect the plugin so the license is available for use elsewhere. The easiest way to do this is from within the tri.be site: go to Account Central –> License Keys. Since the key is in use, the box that appears will look like so:

You’ll notice that now the “Site URL” and “Registration” fields are populated; under “Registration,” there will be an “Unregister” link as shown in the screenshot above. Just click that “Unregister” link, and confirm in the pop-up that appears asking if you’re sure. Upon refresh, the license should once again be unconnected and ready to rock.

Note that while you can attempt to manually disconnect on the WordPress side (by just deleting the key from the field on Settings –> The Events Calendar and resaving the page), you will still need to come to tri.be to complete the process.

Re-Downloading The Plugin

One last point worth covering: a few users have made modifications to the plugin code that they’ve later regretted, but haven’t saved a fresh/unaltered copy of the plugin to revert back to.

This isn’t a problem, given how the tri.be site is set up. Just login and go to Account Central –> Downloads. The page will show any products you’ve purchased, like so:

The screenshot above shows that I’ve purchased Events Calendar PRO, and that it was released on 10/10/2011. It’s currently on version 2.0.2 — and by hitting the blue “Download” link, I can get a fresh version of that 2.0.2 code on the spot.

Remember that since The Events Calendar is hosted at the WordPress.org repository, you can download the current version of that plugin over there. This “Downloads” page is only for PRO products that you’ve purchased here at tri.be.

–

Hey, and just in case you missed it…check out our related post on when you do and when you don’t need license keys, an issue that has been coming up quite a few times since the 2.0 launch. Hopefully that article, coupled with the one you just read, eliminate any confusion on the license keys. If there are still any issues…feel free to leave them in the comments.

To help, I put together a quick screencast a minute ago answering that question, as well as another that has come up more than we’d expected: how do events get added to the header menu?

Finding your calendar on the frontend

By default, your events will live at /events on your site. However, to verify this or change that location, just do the following:

1. On the backend of your site, go to Settings –> The Events Calendar.
2. Find the section for “Events URL Slug.” It will have a field (likely populated with “events”), and a link that shows your current events URL. You’ll notice that URL is just your site’s URL, followed by the word you see in the slug field above.
3. Clicking that link will take you to your frontend events listing. If you change the word “events” to something else (say, “calendar”), when you save your changes the link below will be updated to reflect this as well. At that time when you click the link, it’ll take you to /calendar on the frontend — which will be your new calendar URL.

Note that you’ll follow this same method whether you’re using The Events Calendar 2.0 or Events Calendar PRO 2.0 — the slug’s behavior and functionality is identical between the two.

Adding events to your menu

Adding events to the header menu is another process that doesn’t change regardless of whether you’re using The Events Calendar or Events Calendar PRO. Follow these steps:

1. On your site’s backend, navigate to Appearance –> Menus.
2. In the middle column, scroll down until you see an option for “Events.” You’ll notice that underneath it are other event-related metaboxes: Venues, Organizers, and Event Categories. You can add any of the above to your menus by just clicking the checkbox next to them and hitting “Add to Menu.” They’ll as a result appear in the list of menu items in the right-hand column.
3. Notice that if you go into the Events section on this page and toggle from “Most Recent” to “View All,” you’ll see the first item in the list is “Events.” Adding this will add the entire events calendar (at /events, by default) to the header menu. Every other item in that list is an individual event listing — only this first “Events” item is the broader category. Keep that in mind as you go about your additions.
4. Upon saving the menu changes and navigating to the frontend, you should see the events-related links in the menu that you added them to. You’ll notice that if you click into an individual event, the menu item is “highlighted” (bold) to be consistent with the way WordPress’ menus handle other post types.

If there are any other lingering questions you still have about plugin basics, do let us know so we can put together some appropriate documentation to guide you towards the light.

 
The largest change in 2.0 is the move from having events live in regular posts to the (somewhat new) WordPress custom post types. This means that events are no longer going to appear in your posts but rather in their own panel called events. Part of the process of upgrading is to move your events (we have a magic button).

Step -1: OOPS – I didn’t want to update. No problem, you can easily revert. Grab a copy of the version of the events plugin you want here: http://wordpress.org/extend/plugins/the-events-calendar/download/ and add it to your plugins folder. Deactivate the new one and activate the old one your just upload. All better. If you already migrated your posts though that won’t work. In that case, go grab a backup from before you migrated, restore and revert to an older plugin.

Ready to Go?

Step 1: Before you do anything: BACK UP YOUR SITE. That way if you run into challenges you can revert if you have to. We use backup buddy and are extremely happy we do as we have had to restore numerous times over the years while playing with WordPress & Plugin updates.

Step 2: Click update in the plugin admin or download and add it manually.

Step 3: Migrate! In order to migrate your events after you activate the plugin, you will need to visit the setting panel and click the “Migrate Data!” button. We have some screenshots of the process on our FAQ.

Step 4: Reset your permalinks (go to settings > permalinks > hit save). We’ve noticed that a lot of weird issues people have often get solved by this easy step.

Step 5: Walk through the setting. The place the most people will run into challenges will be with Themes. We have a new theme integration approach that allow you to pick from any page template (screenshot) the theme offers or from the default event templates we bundle with the plugin. Try different options to see what looks best. If we get lucky, your theme will play nicely and one of these will work out of the box. If not, then you have a few options. There is a before / after html set of text areas to allow you to add any divs etc you might need. Often the issue is simply a little missing css on your main content div and can be added to your theme css file. This may take some noodling. We wish the you the best of luck. Feel free to ask the community for help on this step. People have been great. The plugin devs won’t help on this step unless you have uncovered a legit bug with the plugin as supporting the 100k+ themes in the world is basically impossible and we all want them to stay focused on making awesome features.

Step 6 (optional): Dealing with custom templates. If you have been noodling in code, odds are extremely high you are going to have to make some fixes.

The path from open source 1.6.5 to 2.0 has been a long one with years of evolution. As you can imagine the template tags, queries & css have significantly changed over time. The odds of a highly customized theme upgrading cleanly is unlikely. While it may not be a ton of work, some is inevitable. We are actively working on documentation this week and will have it up soon at http://tri.be/support as it comes out. There are already quite a few items in the FAQ and you are welcome to search the PRO forums to find answers as it fills out.

Please let us know where you get stuck as you go through the migration process. While we won’t help you code your site, we are on the active lookout for bugs. The more clarity we can get, the faster we can patch those suckers and get everyone an update.

Hope you all enjoy the significant effort we have put into the new version once you get through the migration and get up and running.

One quick note: PRO WON’T FIX YOUR SITE. If you are having any issues with the free version, adding PRO won’t make any difference. All PRO or any other add-on offers are some additional features to help you accomplish more awesome things.

There’s a lot you can take advantage of on the Settings page, in both The Events Calendar 2.0 and Events Calendar PRO 2.0. We walk through what those are and how to use them for making the most of this plugin in the screencast below.

As the video shows, there is a lot that can be configured on the settings page. We’ll skip over the license key information since that has been covered elsewhere — and jump into the meat of it starting with…

Default View For Events: Lets you configure whether your events appear on the frontend in grid or list view. Both views remain accessible to users viewing your calendar and they can toggle back and forth between them using easily labeled buttons.

Show Comments: A simple checkbox for enabling and disabling comments on your events. If enabled, comments will behave the same as any other WordPress comment, and their behaviors dictated by what you’ve set under Settings –> Discussion on your site’s backend.

Multiday Event Cutoff: Sometimes you have an event that, while technically spanning over the course of two days, isn’t quite appropriate to have displayed that way. A good example is a party: while you may have rented the bar out from 9 p.m. Friday until 4 a.m. Saturday, it wouldn’t make sense to have that event displayed as a Friday-Saturday party. (What if people showed up the second night hoping for a rager?!). By using this setting, the final day for any event that ends on or before the time specified in the dropdown will not appear in grid view.

Enable Google Maps: Check this box if you want to enable the ability to display an embedded Google Map within your event listings. The map can be controlled on a post-by-post by basis, and will display the venue location using the Google Maps API.

Events URL slug/Single Event URL slug: These control where on your site the event calendar lives. The first is the broader calendar; if it shows /events (which is what it defaults to with pretty permalinks enabled), this means that visiting /events on the frontend of your site will bring up the calendar. Change this to whatever you desire but note that it cannot conflict with the Single Event URL slug. Examples of the slug as it’ll appear with relation to your site’s full URL is presented for each.

Debug: When this box is checked, debug information will be logged to your server PHP error log.

Events Template: Provides a dropdown from which you can adjust the calendar’s appearance on the frontend. The plugin comes with template options of it’s own, and most plugins bring their own as well. Select a template from the dropdown, save and review the frontend of your site to see which works best for your layout.

Add HTML before/after calendar: Any information — text or HTML — that you’d like to display above or below the calendar can generally be added right here. Make sure to check your work on the frontend after saving, since there is a chance to make your calendar ugly if using this without being careful.

Customize defaults: After the box to enable these has been checked, customized defaults can save time on the event creation side by keeping you from having to manually re-enter venue/organizer details. Configure as many or as few details as you wish and upon saving, any new event created will have those fields pre-populated until you say otherwise.

Additional fields: We’ve covered this elsewhere, so I won’t go into it here.

———

Any of the information above unclear? Let us know in the comments and we’ll do what we can to clarify.

Now that you’ve made it this far, it’s time to set up your first event. This is going to be easy. From your site’s dashboard, find “Events” in the sidebar and select “Add New.” You’ll be taken to a familiar page that looks very similar to the post creation page you’re used to from drafting regular WordPress posts.

Do all the things you’d do with any WordPress entry: add your title and your event description. Select your categories and tags in the right-hand sidebar. Add a featured image if the mood strikes you.

Now scroll down a bit to the section for The Events Calendar. This is where things change from what you’re used to, and where you’ll configure the remaining details of your event.

Event Time & Date

All day event? Check this box if you want your event to appear as an all-day event, with no start/end time indicated to frontend readers.

Start Date/Time & End Date/Time: The date and time your event starts and ends. Select the date from the calendar pop-up; select the time from the dropdowns. Note that if you have the “All day event?” box checked, no time customization options will appear here.

Recurrence: Configures the recurrence setting for PRO users, allowing you to have an event occur multiple times on dates of your choosing. We’ve covered this elsewhere so I won’t go into much more detail about how recurrence operates.

Event Location Details

You can either use a Saved Venue by selecting one from the dropdown, or add a new one by leaving the dropdown on “Use New Venue” and adding the venue name/address details appropriately below. Make sure to either show the Google Maps link or embed the map itself (both controlled by checkboxes) if you want this data to display.

Event Organizer Details

Similar to the venue, organizer details provide more on who is hosting an event. You can use a saved organizer from the dropdown or enter the details for a new one. Remember that saved venues & organizers can be viewed & edited from the “Venues” & “Organizers” admin menu items on the backend.

Event Cost

If your event will cost money, enter the value here. If it’s free enter a “0″, or leave it blank entirely if you don’t want any cost data to be displayed.

———

That’s it. Add an excerpt if you wish, make sure everything looks good and then publish or schedule the post. You’ve created your first event…you’re done!

By now you’re probably aware that to install Events Calendar PRO 2.0, you really have to install two plugins: the free, open source Events Calendar, and the PRO add-on. Both can be accessed from tri.be.

The Events Calendar

To snag The Events Calendar, which is actually hosted at the WordPress.org open source repo, visit tri.be and navigate to Products –> The Events Calendar in the header navigation.

Once you’re there, you’ll see a big blue “Download” button. Click it and you’ll be taken over WordPress.org, where there wil be another “Download” button (this time in red) referencing the current release number. Follow the instructions on the screen and save the file to your desktop.

Events Calendar PRO

Head back to tri.be, and this time find Products -> Events Calendar PRO. (You can also hit the “Go PRO” button if you’re still on the Events Calendar product page).

Select the license type that best fits your needs, hit “Buy Now” and move through the checkout process accordingly. At one point you will be asked to set up a username and password; make sure to remember these, as they’ll be what you use for accessing the site and support forums going forward.

After completing the checkout process, you’ll land on a “Thank You!” screen that includes — among other things — the words “Events Calendar PRO” as a hotlink. Click that link and it will download the PRO code to your computer.

Note that you don’t have to download the plugin right when completing your order, if you don’t want to. Users can always come back and re-download the plugin later…just go to Account Central –> Downloads and you’ll have access to any plugin you’ve previously purchased.

Installing & Activating

By this point, you should have two ZIP files on your desktop: one for The Events Calendar, the other for Events Calendar PRO. Now open up the dashboard of your site and navigate to Plugins –> Add New –> Upload.

Do not unzip the plugins; you’re going to upload them in their full zip files. Do The Events Calendar first and activate it upon completion. Next upload Events Calendar PRO and activate it upon completion as well. Just to make sure everything went according to plan, navigate to your active plugins list and make sure that both are active and showing the version number you expected.

One last point to remember: you can use The Events Calendar without Events Calendar PRO, but you can’t use Events Calendar PRO without The Events Calendar. There is really no circumstance under which you should have just Events Calendar PRO active if you’re running 2.0 or later.

———

Hopefully this was of some value to you. If any questions linger, leave them in the comments and we’ll do what we can to provide clarity.

Whenever a new version of the PRO code is released, you’ll see a prompt on your site’s backend to update to that new release. How this message will appear will differ depending on whether you’ve added your license key or not.

If you haven’t yet added your license key, you’ll be able to view what’s new in the release but won’t be able to update until you’ve added your license key. Let’s navigate over to tri.be and log in (using the credentials first configured when buying the plugin) so we can get that key taken care of.

After logging in, navigate to Account Central –> License Keys. Here you’ll be presented with a list of all the keys you’ve purchased so far, as well as what sites (if any) they’re currently being used on. If your key hasn’t been added on the site’s backend yet, then presumably it’s not in use. (Double check by making sure nothing appears under the “Install/Site Url/Registration” fields just to be safe. If there is a url listed, you’ll need to disconnect the license so it’s free for use). Then copy the entire license key — making sure there are no empty spaces before or after — and navigate back to your site’s backend.

Head to Settings –> The Events Calendar. In the blank “License Key” field, paste the key we just copied from tri.be and watch as it validates/displays the expiration date in green. Save your changes now.

Upon saving, the license key should remain in the field. Once you’ve checked that it has, head back to the Plugins list. You’ll see now the update message no longer asks you for the license key. You’re in the clear and can now update PRO directly from the backend of the site.

When the “Plugin Reactivated Successfully” message shows, you know you’re all set and that you’re a licensed user running the latest code. Congratulations!

Custom recurring events allow for event creators to make more complex recurrence patterns than the standard Daily/Weekly/Monthly/Yearly options do.

On the event creation page, find the “Events Calendar” section and head to the Recurrence dropdown. Skip over all the options until you reach the last one in the list: Custom.

You’ll first need to specify whether the event ends on a certain date or after a fixed number of occurrences. Then set the frequency.

• Daily: Set your event to occur every X days.
• Weekly: Set your event to occur every X weeks, on the days (selected via checkbox) of your choosing.
• Monthly: Set your event to occur every X months, on days filtered by two specific dropdowns of criteria.
• Yearly: Set your event to occur every X years, on months of your choosing AND days filtered by two specific dropdowns of criteria.

Custom recurrence doesn’t allow for everything, but should accommodate for most of the recurring events one would want to configure. If there’s something you’re looking to do but can’t see how given the information presented above, let us know in the comments and we’ll see what we do to help.