Events Calendar Pro, custom photo view

Update 24th June 2019

Hi all. I recently revamped my website and in the transfer forgot to include the files and some images for this post. Basically, I decided to put my blog on hold for a while and I didn’t pay it much attention during the redesign.

However, this post does get a lot of hits, so I have placed the code now in GitHub and provided the links.

My apologies to everyone.

Suffice it to say that getting to grips with these plugins can be quite a learning curve, but with so many features available I guess it should not be a surprise and I have always found the support team at the help desk very knowledgeable and willing to help where they can. The one area where they are understandably unable to provide detailed help is with custom coding.

There are fairly consistent requests from users in the support forums for help to customise the ‘Photo’ View which is a Pro feature and it certainly was at the top of mine and my clients list to produce a more ‘grid’ like view, with consistent heights for the events. In addition I wanted to add the ticketing information which comes as standard in the ‘List’ view, but does not in the ‘Photo’ view. The aim was to use the ‘Photo’ view as the default view and to provide a consistent user experience across ‘Photo’ and ‘List’.

The images below show the view you can expect as standard, the one on the right is where I ended up.

Photo View ‘Custom’

The bottom line is that these plugins are very easy to customise as Modern Tribe do provide a lot of Hooks that allow you to tinker to your hearts content.

As always, take a backup of your website before trying this and better still work on a staging site first until you are confident about what you are doing.

At the time of writing the Modern Tribe plugins were at the following versions on my site,

The Events Calendar v 4.6.10.1

The Events Calendar Pro v 4.4.22

Event Tickets v 4.6.3

Event Tickets Plus v 4.6.2

The single-event.php file from ‘Photo’ view we use later was a v 4.4.8

Please remember that hooks and functions can change, so keep an eye on any deprecation’s that Modern Tribe may announce in their revision documentation.

So without further ado, here are the steps we will take to create this view,

1. Create the Child structure required.
2. Add the code to display the ticket price and display the number of tickets available.
3. Change the excerpt to display fewer words.
4. Add a ‘Read More’ link.
5. Add CSS to style.
6. Add the code to change ‘Photo’ to ‘Grid’ and ‘Tickets’ to ‘Places’.

1. Create the Child structure

Using your FTP client (I use FileZilla) create the following directory structure in your themes Child folder. I am using Divi by Elegant Themes, so I have;

wp-content / themes / divi-child / tribe-events / pro / photo

Now go look at your wp-content / plugins directory and look for ‘events-calendar-pro’. Open it up and inside you will see a folder called ‘src’ , open it up. Now you are looking for the ‘views’ directory, open this up as well. In here you will see the directory ‘pro’ , open this up. In ‘pro’ you will see another directory called ‘photo’ and in here (phew!! we got there !!) you will see the file we need which is ‘single-event.php’.  This is the file we want to copy to our child folder ‘photo’ (see above).

In summary, the file can be found at,

wp-content / plugins / events-calendar-pro / src / views / pro / photo / single-event.php

Now copy that file to your child structure so we have,

wp-content / themes / divi-child / tribe-events / pro / photo / single-event.php

Oh, and incidentally you will need to have created a functions.php file in your child directory and enqueued your style sheet. If you do not know how to do this, then there are many sources on the web you can find to easily help you do this. So mine sits in,

wp-content / themes / divi-child /  directory.

Now, let us check first that the above steps have been done correctly shall we? before we do anymore real work.

Open up the single-event.php file you have just copied into your child directory and in the first few lines you will see the following,

<?php
/**
* Photo View Single Event
* This file contains one event in the photo view
*
* Override this template in your own theme by creating a file at [your-theme]/tribe-events/pro/photo/single-event.php
*
* @package TribeEventsCalendar
* @version 4.4.8
*/

if ( ! defined( ‘ABSPATH’ ) ) {
die( ‘-1’ );
} ?>

<?php

global $post;

?>

Now, between <?php and global $post;  type in the following,

2. Add the code to display the ticket price and the number of tickets available.

To get the price displayed we need to simply echo the function that is used in the ‘list’ view, which is the ‘tribe_get_cost” function. We simply decide where we want to place it in the content order and then add it in. I decided I wanted to add it after the event title. You will see this in a minute.

The code we need to display the number of tickets and emulate what is seen in ‘List’ view is a  do_action hook provided by Modern Tribe that displays the ticketing information and buy now button.

do_action(‘tribe_events_inside_cost’)

in addition to this, we add a couple of our own classes  so that we can target them later with our CSS. The code block looks like this,

There is a button below to get you access to all the code later.

3. Change the excerpt to display fewer words

Now the excerpt shown in Photo View is rather lengthy and in my opinion the user does not want to see this at this stage of their shopping experience. They want to get a general idea of what the course/ event is called, the date, price and if there are tickets left. Once they have made an informed choice, they will then want to click to read more detail and book a place.

In addition, if we want to end up with a fixed height for the event container, then we need to get very specific about how much content is displayed. So let’s see how we do this.

The first step is to open your functions.php file in you theme child folder and add the following code snippet,

function word_count($string, $limit) {

$words = explode(‘ ‘, $string);

return implode(‘ ‘, array_slice($words, 0, $limit));

}

Now let’s open our single-event.php file again and around line 60, towards the end, you will see the comment

<!– Event Content –>

look just below this for the code,

4. Add a ‘Read More’ link

You do not necessarily need this of course, as links to the event are included in the image, the title and now the price and ticket number. For mobile views I do not use this, but for desktop it was something my client wanted, so here it is.

Open your single-event.php file again from your child folder and at the bottom under the section

5. Add CSS to style

a) set the container height for the event to a fixed amount,

6. Code for changing some of the labels.

So, will have noticed that I have replaced the words ‘ticket(s)’ with ‘place(s’) and ‘Photo’ is now ‘Grid’.

Here are the code snippets to do this. Simply add them to your functions.php file in your themes child folder.

Ticket(s) to Place(s)

function changes_button_text( $html ) {

$html = str_replace(“tickets left”, “places left”, $html);
$html = str_replace(“ticket left”, “place left”, $html);
return $html;
}

Photo to Grid  (I also changed the label for the Calendar here from ‘Month’ to ‘Calendar’, delete this line if you do not need it).