The Events Calendar 3.0 Preview: Talking Templates with Jessica

This morning I sat down with Jessica Yazbek, a member of the core development team working on The Events Calendar/Events Calendar PRO 3.0, to review the new templates that are coming in the 3.0 release. Jessica has spent a good chunk of the past couple weeks working on rewriting the templates — based on feedback we’d received from support requests and beta testers alike — to make them more flexible.

In our talk this morning, Jessica walked through the changes she’s made and what you can expect from them. This is the first under-the-hood preview we’ve given so far and it should shed some light on what you can expect. Check out the video (less than 5 minutes long!) after the jump.

Pretty cool, right? Let’s review, using list view as our example to keep continuity with the video…

What’s changing and how the file is broken up

In the old list view, everything was in one file. It started with a wrapper, led into the header and the loop from there. The event single item was a big chunk of code within the list and repeated for every item in the event list; it would generate the same HTML for every event in the list. Underneath, it had the next/previous navigation and the iCal link. The big takeaway here should be that everything was all in one file.

In the 3.0 release, list view is still in the same location: plugin folder –> views –> list.php. But if you go into events –> views, you’ll see a list.php (the file that gets included first for list view — essentially the parent view file). Inside it, little pieces are called to handle each part of the view: for example, a template part for the tribe bar. We’ve included a new function: tribe_get_template_part. That is really similar to WordPress’ get_template_part function, and it looks in all the correct locations for tri.be templates. You’ll see includes like (‘modules/bar’), etc. The loop is also now in a separate file.

As an example: if you just wanted to add a div that wraps around the whole list, your approach will change in 3.0. Previously you would have been forced to copy the entire list file and make your changes there. But now you can merely copy this new file and leave the loop content alone, as it’s now included separately.

How to do an override

Overrides, then, have changed as well. You only have to override the piece you want to change — not the whole thing. Let’s say we want to override the list view so the next/previous links that appear before the loop were gone. To do this an override in the 3.0 codebase you’ll follow these steps:

1. Create a new “tribe-events” folder in your theme directory.
2. In that “tribe-events” folder, make a new folder called “list”.
3. Inside the “list” folder, make a file called “nav.php”.
4. Copy the contents of “nav.php” from the original “views” folder to your new file of the same name. (Note that we’re not copying the whole list.php file, as was the case previously).
5. Delete the nav-centric code from this file and replace it with something simple; for example, a basic line of text saying “There is no nav.”
6. Save the file, and refresh the frontend. Your navigation links will be replaced by that text we added.

Note that the rest of the template is untouched, and still pulling from the original plugin files. So when updates are released people will not need to update the entire list.php; they can keep using the version we’ve released and if they made modifications to the nav or any other small overrides, that’s all they’ll have to be responsible for maintaining.

One last point to keep in mind: in the old version, there was a lot of logic in the templates. This could be confusing for themers or other laymen, and made it a bit tough to scan as well. But for 3.0 we’ve moved a lot of that logic to template tags. So all you’ll have to do is throw out one template tag that does all this logic for you. Ultimately this means the templates themselves are also cleaner/simpler.

If you’re curious about anything else related to the templating structure, or if this raised questions in your mind that need an answer, let us know in the comments below.