
In the time since I posted my first tutorial about creating a horizontal event widget for Events Calendar Pro, I’ve become a huge fan of Flexbox. After all, what’s not to like? You get equal-height elements, vertical centering, and all kinds of other good things, plus you’re spared doing a lot of calculation and it cuts way down on media queries.
Since I recently had to make some other adjustments to my Events Calendar templates on the Radiant Body Yoga website, I decided it would be a good time to rewrite my widget to use Flexbox, and also a good time to put the code up on GitHub so people could download it without having to email me. I also consolidated all my Events Calendar CSS into the different CSS files that Modern Tribe recommends in its Themer’s Guide. In addition to being better for me and my client, these changes should make it a lot easier for the people who read these tutorials to figure out what to do.
What we’re aiming for
What I wanted (and had created before using display:inline-block
combined with different item widths at different screen sizes) is a widget that displays 4 events across on desktop screens, two across on tablet screens, and in a single column on phone screens. This is actually fairly easy to achieve with flexbox; the only difficulty was for the in-between screen sizes (larger tablets and smaller laptops) which had room for 3 events across and wrapped the fourth onto a new line, so I had to write a media query to handle that. I was able to remove all the other media queries that I’d created for the horizontal widget, however.
Add featured images to your widget
If you followed the original tutorial, you’ve already done this part, but if this is your first go at showing featured images in your list widget, add the following code to your functions.php file. Substitute the image size you want to use for ‘event-large’.
function custom_widget_featured_image() { global $post; echo tribe_event_featured_image( $post->ID, 'event-large' ); } add_action( 'tribe_events_list_widget_before_the_event_title', 'custom_widget_featured_image' );
Add a flex container in list-widget.php
You don’t want your widget title or your “View More” link to flex, so you need to wrap the actual event entries for the widgets into a div. That means modifying the list-widget.php
file. You might already have modified this for one of the previous tutorials; if not, copy list-widget.php
from /wp-content/plugins/events-calendar-pro/src/views/widgets
and add it to /tribe-events/pro/widgets/
.
Then enclose the foreach loop in your new div, like this. (I called mine event-widget-container.)
// Check if any posts were found. if ( isset( $posts ) && $posts ) : ?> <div class="event-widget-container"> <?php foreach ( $posts as $post ) : setup_postdata( $post ); do_action( 'tribe_events_widget_list_inside_before_loop' ); ?> <!-- Event --> <div class="<?php tribe_events_event_classes() ?>"> <?php tribe_get_template_part( 'pro/widgets/modules/single-event', null, $instance ) ?> </div> <?php do_action( 'tribe_events_widget_list_inside_after_loop' ) ?> <?php endforeach ?> </div><!--event-widget-container -->
Apply flexbox CSS to your new container
Remember to specify the class of the particular widget area that you want the horizontal layout for, or all of your event widgets will attempt to show horizontal events. In the case of the Radiant Body Yoga site, the class is .home-featured-events
. Substitute the name of your own widget area.
.home-featured-events .event-widget-container { display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; }
Browser prefixes for flexbox are not required for the latest version of most browsers, but I’ve set the Autoprefixer plugin for Sublime Text 3 to go 5 versions back, because not everybody uses the latest version of the browser. If I wanted to be really thorough, I’d write some fallbacks, but I don’t think there are many visitors to this site who use IE6.
I have set flex-wrap
to wrap
so that I can get two columns and then one column of events. If I had set it to nowrap
, then the items would shrink to their smallest allowable size (since items shrink by default) and the content would eventually overflow.
Because I want the events evenly spaced across their container, with no spaces on the outer left or outer right, I set justify-content
to space-between
.
Set flex items to grow
Every item in a flexbox has to have its flex
property set. (This is shorthand for flex-grow, flex-shrink, and flex-basis.) The default values for flex
are 0 (don’t grow) 1 (shrink) auto (content-width).
However, if you set flex items to shrink, they won’t wrap. (That’s right: there’s no shrink-wrap in flexbox.) So instead we need to set them to grow, so that they will fill up any extra space on the line after they wrap. And we set the flex-basis
to a width in pixels. (You do have to do a little math here to figure out how wide the event entries can be and still fit four of them in your flex container, but after that the browser will calculate all the margins.)
That gave me the following CSS for the flex items:
.home-featured-events .type-tribe_events { -ms-flex: 1 0 275px; -webkit-flex: 1 0 275px; flex: 1 0 275px; }
Fix the wrap problem on larger tablets
When I’d done this, the events looked great on a full-width screen, a phone, or a smaller tablet–say about 800 pixels. But between 960 pixels and 1200 pixels, I had three events on one line, all the same size, and one event below them at the full width of the container. This looked a bit awkward, though not noticeably more awkward then when all four events remained the same size but the last one appeared in a second row, which is what happens if both grow and shrink are turned off.
It’s possible there’s a better solution to this, but what I ended up doing was writing a media query to change the flex-basis
from 275px to 430px on screens between 960px and 1200px wide.
@media only screen and (min-width: 961px) and (max-width:1201px) { .home-featured-events .type-tribe_events { -ms-flex: 0 1 430px; -webkit-flex: 0 1 430px; flex: 0 1 430px; } }
Enjoy your widget!
Here are the screenshots of the widget as it now appears.




Get the code
You can now download all my Events Calendar code files for this tutorial from GitHub.
For some reason, the PHP code is giving me an error. I’ve ran it through a PHP lint–all clear. Yet, there’s a syntax error. So strange.
Even with your GitHub file:
Parse error: syntax error, unexpected ‘if’ (T_IF) in /home/xxxxx/public_html/wp-content/themes/xxxxxx/tribe-events/pro/widgets/list-widget.php on line 1
Hmm. I’m pretty sure that’s the same code I have working in production. Can you give me a URL where it’s broken? I’ll take a look at my code when I get a chance.
Sure. It’s the home page: https://hamarainternet.org/
It looks fine to me, though you might want to add a
margin: 0 10px
to your.ecs-event
class.What a great tip. It looks like it would be an easy one to implement. Thank you for sharing.
Hi Sallie.
Is there any hack to limit the event title to 2 lines max two on photo view? Also how can I make appear Related Events? In my test platform I can not see them even if the option is unckeck on the settings section.
Thank you.
Hi, Cesar.
If related events are not showing up on your single event entries, you should probably ask Modern Tribe support. It’s not connected to the widget and not something I’ve dealt with before.
There’s a basic tutorial on WP Beginner about truncating post titles. You would just adapt that code and put it in the appropriate template in your /tribe-events/ folder.
HI Sallie,
First of all – thank you for this post. It covers both spectra of coders. I, for instance, belong to the lower end :P and was still able to figure out where to put what.
Unfortunately, it’s not working. I have ECP running. There is no widget in VC which I can drag or add to my homepage. So, I used VC’s Shortcode Mapper to make a shortcode for Tribe events-list.
I added the shortcode to my homepage – inserted the flex CSS and media queries to my custom CSS page in theme panel and previewed my home page. I was crestfallen to find out they appeared vertical.
If possible could you kindly help me out in setting this straight?!
For the time being – I’m using an image carousel to display thumbnails of my upcoming events. But this has its limitations; for instance, its manual and doesn’t update when I add a new event, etc.
P.S – Could it have something to do with not calling the right function? While yours is – .home-featured-event, I have no clue what mine is :(!
Regards,
Nigel.
Hi, Nigel.
If you want an event slider, Meta Slider Pro works with The Events Calendar to show upcoming events and automatically expire old ones. Also, Events Calendar Pro offers its own shortcodes. You don’t need to depend on the horror that is Visual Composer for that.
I suspect that what happened is that the names of the classes changed when you created the shortcode. If you inspect the item in your browser (you know, right-click and select “inspect”), it will tell you what the CSS classes are and what CSS is being applied to it from where.
Another possibility is that the Visual Composer CSS is overriding the CSS from your /tribe-events/ folder. I don’t know enough about VC to suggest ways to handle that, but if it includes a place to add custom CSS, you might want to put it there.
Good luck!
Sallie