• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Horizontal Events Widget for Events Calendar Pro — Now with Flexbox!

June 29, 2016 by Sallie Goetsch 10 Comments

This entry is part 9 of 13 in the series Modern Tribe Tutorials
Horizontal events widget created with flexbox: desktop view

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.

Horizontal events widget created with flexbox: desktop view
Horizontal events widget built using flexbox: desktop view
Flexbox events widget showing two columns at 968px
Flexbox events widget showing two columns at 968px
Flexbox events widget at 600px
Flexbox events widget at 600px
Flexbox events in single column at 320px
Flexbox events in single column at 320px

Get the code

You can now download all my Events Calendar code files for this tutorial from GitHub.

Get the Code

Modern Tribe Tutorials Series Navigation<< Previous PostNext Post >>

Related Items

  • Events Calendar Pro list widget showing list date and featured image
    Removing the List Date from Events Calendar Pro List Widget
  • screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir
    Horizontal Output for Events Calendar Pro Shortcode
  • featured events widget on the home page of KiaMiller.com
    Creating a Horizontal List Widget with Featured Images in Events Calendar Pro

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Tutorial, Events Calendar Pro, Flexbox

Reader Interactions

Comments

  1. Fatima says

    July 31, 2016 at 8:12 pm

    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.

    Reply
    • Fatima says

      July 31, 2016 at 8:14 pm

      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

      Reply
      • Sallie Goetsch says

        July 31, 2016 at 9:38 pm

        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.

        Reply
        • Fatima says

          July 31, 2016 at 9:42 pm

          Sure. It’s the home page: https://hamarainternet.org/

          Reply
          • Sallie Goetsch says

            August 2, 2016 at 7:58 am

            It looks fine to me, though you might want to add a margin: 0 10px to your .ecs-event class.

      • Ajay kumar says

        December 11, 2016 at 11:25 pm

        What a great tip. It looks like it would be an easy one to implement. Thank you for sharing.

        Reply
  2. Cesar says

    August 8, 2016 at 4:48 am

    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.

    Reply
    • Sallie Goetsch says

      August 8, 2016 at 7:09 am

      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.

      Reply
  3. Nigel says

    August 29, 2016 at 1:25 am

    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.

    Reply
    • Sallie Goetsch says

      August 29, 2016 at 7:05 am

      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

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)


More in this series:

  • Creating a Horizontal List Widget with Featured Images in Events Calendar Pro
  • Change Photo View in Events Calendar Pro to Equal-Height Grid with Venue & Location
  • Horizontal Output for Events Calendar Pro Shortcode
  • Displaying Multiple Rows of Events in Events Calendar Pro Widget
  • Defining Event Image Size in The Events Calendar by Modern Tribe
  • Removing the List Date from Events Calendar Pro List Widget
  • Adding Non-Standard Pricing Info in The Events Calendar Using ACF
  • Moving the Gcal and iCal Links in The Events Calendar
  • Horizontal Events Widget for Events Calendar Pro — Now with Flexbox!
  • CSS Grid Layout for Event List Widget with Flexbox Fallback
  • How to Change Event Image Size in The Events Calendar without Modifying Templates
  • CSS Grid Layout for Events Calendar Pro Widget Shortcode
  • Update: Moving the Events Calendar iCal and Gcal links in 2018

Follow Sallie on Twitter

    Sorry, no Tweets were found.

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact