[Plugin: The Events Calendar] Solved! How to show past and future events (the missing documentation)

I love The Events Calendar. But actually, it’s kind of a love-hate relationship… and that’s mostly due to the documentation.

While the plugin itself is very smoothly programmed, and adding event info to a post is quite easy, I ran into a real brick wall when trying to do what I thought was quite simple – add a list of upcoming events, PLUS a list of past events, to my homepage.

How do you modify your template to achieve this? The documentation is frustratingly silent on this. There is a bare-bones list of variables and tags, but no specifics of how to use them.

We’re not all master chefs – many (most?) of us need a recipe. I figured it out via experimentation and a bit of luck, but others shouldn’t have to do the same. So here is how I solved this issue.

How to add current and past events as separate lists on your home page!

As the documentation states, you should duplicate their templates for single posts, lists, and the grid view from “the-events-calendar/views” into a folder called “views” within your own theme folder, and not edit those files in the plugin folder (if you do, your changes will be wiped out with any upgrade to the plugin).

But how to add events to your homepage? Or any other page in your theme?

I started by taking everything except the header in the “list.php” file, and adding it to my “index.php”. You could also add this to “home.php” if you have one… or indeed any page in your theme.

You’ll see that, instead of the usual “query_posts” command, this code invokes a “wp_query” instead, with some different php arguments. Following that is a similar batch of code to what you find in a standard template, getting info about the post using “the_content” as well as some custom queries that grab calendar-specific info.

But this results in a list of all events, not just upcoming ones. If you want to filter the list in this way, you merely have to run a standard “query_posts”, AFTER the global “wp_query” (and practically speaking, you can simply place it just before the div that encloses the events, with an id of “tec-events-loop”).

Most importantly, in this query_posts, you have to specify the number of the category into which your events are being placed. Thus:

<?php query_posts('&cat=5&eventDisplay=upcoming'); ?>

Gets posts from category 5 (which is the cat for events in my own case – roll over your categories in your Dashboard to see what yours is), and only shows upcoming posts.

Multiple lists on a page

You’ll see this in the provided templates, at the bottom:

<?php /* For custom template builders...
	   * The following init method should be called before any other loop happens.
	   */
$wp_query->init(); ?>

And sure enough, that is what you need to do – include <?php $wp_query->init(); ?> just before any query_posts commands after your first one.

So, in my own homepage, I have this code first:

`<?php global $wp_query;
$tecCatObject = get_category( $wp_query->query_vars[‘cat’])
?>

<a class=”ical” href=”<?php bloginfo(‘home’); ?>/?ical=<?php echo $tecCatObject->slug; ?>”>
<?php _e(‘iCal Import’, $spEvents->pluginDomain) ?></a>

<?php query_posts(‘&cat=5&eventDisplay=upcoming’); ?>`

[standard loop goes here]

Followed later on by this:

`<?php rewind_posts(); ?>

<?php query_posts(‘&cat=5&eventDisplay=past’); ?>`

[another standard loop, this one, in my case, showing only titles]

Customizing the CSS

See “resources/events.css” and locate the relevant CSS styles; then add them to your own themes’s CSS, but make your rules more “specific” – I did this by adding “body” before the rule – to ensure your styles override those in the CSS from the plugin. (Again, if you directly edit the plugin’s CSS, it will get wiped out when you upgrade.)