• 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

Creating a Horizontal List Widget with Featured Images in Events Calendar Pro

April 21, 2015 by Sallie Goetsch 33 Comments

This entry is part 1 of 13 in the series Modern Tribe Tutorials
featured events widget on the home page of KiaMiller.com

It was important to be able to display upcoming events on the new KiaMiller.com website. There was a simple event listing on the old website, and the initial design comps for the new site showed a similar list in the sidebar, but the theme I was basing the site on, Envy Pro, was designed around a full-width home page, and I thought it would be better to display events in a row of featured boxes, like the featured products and featured pages. (Kia’s site doesn’t show featured products the way the demo does.)

Advanced List Widget Options for Events Calendar ProDoing so proved to be more difficult than I expected.

Events Calendar Pro provides an enhanced Event List widget that lets you choose whether to display Venue, Organizer, Address, City, State or Province, Postal Code, Country, Phone, and Price. It allows you to filter events by Event Category and/or Event Tag.

But there’s one very important omission: you cannot choose to display the event’s featured image. There is no widget that reproduces the lovely photo view display.

That meant I had to either modify the template for the list widget, or create a new widget to display events with featured images.

As it happened, creating a new widget was a bit beyond me, though I may go back at some point and figure that out, since it would be useful to have both a plain list widget and a widget with images, or a widget that lets you choose whether to show the image. I know some of my readers are better developers than I am, so maybe you’ll have ideas about how to do that.

Or maybe Modern Tribe will upgrade its Advanced Widget and I won’t have to do it. (I can always ask—they’re supposed to come do a demo at the East Bay WordPress Meetup in a few months.)

The good news is that The Events Calendar and Events Calendar pro are well-documented and have a great support forum. The bad news is that I’m still mainly a copy-paste-tinker sort of developer–hence my difficulty creating a whole new widget, though I have since created a couple of widgets and could probably figure it out now. I’ve learned a lot in the past 6 months.

I had a look at the Themer’s Guide and the Stylesheets and Theme Templates entry in the knowledgebase. My searches let me to a handy tutorial labeled “Add Thumbnails to Upcoming Events List Widget,” which provided me with the following code:

function custom_widget_featured_image() {
  global $post;

  echo tribe_event_featured_image( $post->ID, 'thumbnail' );
}
add_action( 'tribe_events_list_widget_before_the_event_title', 'custom_widget_featured_image' );

When I look at that tutorial today, it says to add the code to your functions.php file. I don’t know whether it said that in January. I ended up adding it to the single-event.php file in the /tribe-events/widgets/modules/ folder in my theme directory. (Before modifying any Events Calendar templates, create a /tribe-events/ folder in your theme directory and copy the files from the plugin directory.)

Whether you put it in functions.php or in single-event.php, this code will add featured images to the Advanced List widget. I found that I needed some additional styling for the widget in the sidebar (it comes pretty much completely unstyled):

/* Event Calendar Pro Widget */
.entry-content ul > li.sg-event-list::before {
  content:none;
}
.sidebar-primary .tribe-mini-calendar-event .list-info h2,
.sidebar-primary .tribe-mini-calendar-event .list-info h2 a {	
  font-family: 'Open Sans Condensed', 'Lato', Helvetica, sans-serif;
	font-size : 18px;
	font-weight:bold;
	line-height:24px;
	margin-top: 0;
	margin-bottom: 10px;
  padding:0;
}

.sidebar-primary .duration,
.sidebar-primary .vcard {
  margin-top:4px;
  margin-bottom: 4px;
}

.sidebar-primary .locality::after {
  content: ",";
}

.tribe-mini-calendar-event .tribe-events-event-image {
  margin-top:6px;
  margin-bottom:6px;
}

.tribe-mini-calendar-event .list-info { 
  font-size: 15px;
  width:100%;
}

.duration.venue {
  margin-bottom:12px;
}

Events Calendar advanced list widget with thumbnailsHere is the sidebar widget that results from that code. (Okay, the lotus before each widget is coded elsewhere.)

One of the things I needed to do was take out the calendar icon display before each event. While it’s handy for cueing visitors that what they’re looking at is an event listing, it just didn’t fit with the style of the site. That’s the content:none setting in .entry-content ul > li.sg-event-list::before.

Then I needed to tinker a bit with things like font family and font size, and spacing of the different elements.

I finally got a widget that shows featured images, event titles, dates, and location all legibly.

Note that all of the widget settings are the same as in the screenshot above: I didn’t change any of the widget options.

But the events display in a list, and I needed them to display in a row in the Home Featured Events widget area. Here is the CSS I used to display the event list widget entries in four columns.

/*Home Featured Events */
.home-featured-events .entry-title {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 10px;
  text-align: left;
}

.home-featured-events .widget-title {
  font-weight:400;
}

.home-featured-events .entry {
  border: none;
  margin-bottom: 20px;
  padding: 0 0 4px;
}

.home-featured-events .wrap {
  background-color: rgba(255, 255, 255, 0.5);
  border:none;
  padding: 20px 10px;
}

.home-featured-events .widget {
  float: none;
  font-size: 15px;
  width:100%;
}

.home-featured-events .tribe-mini-calendar-event {
  display:inline-block;
  width: 22%;
  margin-right: 3%;
  float: left;
  border:none;
}

.home-featured-events .tribe-events-widget-link {
  clear: both;
  text-align: right;
  padding-top: 12px;
  border-top: 1px solid #dedede;
}

.home-featured-events .list-info h2 {
  font-size:20px;
  font-weight: 700;
}

.entry-image.attachment-tribe_events {
  margin: 10px 0 0;
  width: 100%;
}

.featured-content a.alignnone {
  margin-bottom: 10px;
  width: 100%;
}

.tribe-mini-calendar-event .list-info h2,
.tribe-mini-calendar-event .list-info h2 a {	
  font-family: 'Open Sans Condensed,' 'Lato', Helvetica, sans-serif;
  font-size : 18px;
  font-weight:bold;
  line-height:24px;
  margin-top: 0;
  margin-bottom: 10px;
  padding:0;
}

And finally I needed to add media queries so the events would look right on smaller screens:

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
.home-featured-events .tribe-mini-calendar-event {
  display:inline-block;
  width: 44%;
  margin-right: 3%;
  float: left;
  border:none;
  }
}

@media only screen and (max-width: 600px) {
.home-featured-events .tribe-mini-calendar-event {
  display: block;
  width: 100%;
  float: none;
  border:none;
  }
}

I know–the Crayon Highlighter makes the media queries look funny. Don’t know why.

And voilà! A responsive horizontal list with four events across. The final featured event display on the home page looks like this. (It’s actually toward the bottom of the page, but the site has a sticky header.)

featured events widget on the home page of KiaMiller.com

See it live here.

Modern Tribe Tutorials Series NavigationNext 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
  • detail of Events Calendar Pro widget on Dit Gentofte website
    Displaying Multiple Rows of Events in Events Calendar Pro Widget

Share this post:

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

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

Reader Interactions

Comments

  1. Nazeer says

    May 22, 2015 at 9:47 am

    Hi, I was going through your article and was trying to copy paste the provided code for my experimental site. Well honestly i got lost in the process as I dont know in which file to put the above CSS codes.
    Could you elaborate further with the file names?
    Thank you.

    Reply
  2. steven says

    June 18, 2015 at 2:15 pm

    Did you have to create a separate widget area on your homepage for this to work?

    Reply
    • Sallie Goetsch says

      June 19, 2015 at 12:31 pm

      Hi, Steven. I did create a “featured events” widget area on the home page, since I wanted events in addition to pages, but I believe you could use any full-width widget area.

      Reply
  3. martin says

    June 27, 2015 at 1:40 pm

    Great tip.
    How did you make the widget appear in the content page? I’m also using the Event Calendar pro as well as the Event List Widget, though I cannot add it to the content of any page without adding the sidebar.
    Thanks in advance.

    Reply
    • Sallie Goetsch says

      June 27, 2015 at 2:12 pm

      Hi, Martin.

      I’m using a Genesis theme on the KiaMiller.com site, so the whole home page is made up of widget areas. However, if you want your events to appear in your page content, check out the EventRocket plugin, which includes a pretty full-featured shortcode for event display.

      Reply
      • martin says

        July 3, 2015 at 6:35 am

        Okie Dokie!
        Thanks!

        Reply
  4. guenfood says

    September 21, 2015 at 4:47 am

    Hi,

    You did a great job.
    I’m trying to apply your tutorial to have same sidebar on my homepage.
    But i’d like to know for each css code, what’s the name of css file, and in which file on my server i have to upload them ?
    Thanks for your help.

    Reply
    • Sallie Goetsch says

      September 21, 2015 at 5:52 am

      You can add the code to your main style.css sheet, or keep it in a custom.css file that you enqueue in your functions.php, or use a custom CSS plugin, like the one in Jetpack or Simple Custom CSS. It’s often easier to start with the plugin in case you have to tinker with the CSS, then move the style somewhere more permanent when it’s ready.

      Reply
      • guenfood says

        September 21, 2015 at 6:32 am

        I dit it.
        I put the 3 CSS code in my style.css file, and the PHP code in my function.php theme.

        But nothing change in the display at the bottom of my homepage.
        Here is my homepage : http://www.livresque-du-noir.fr/
        where i put the shortcode [tribe_events_list]

        Reply
        • Sallie Goetsch says

          September 21, 2015 at 6:44 am

          Since my tutorial is for the widget, rather than the shortcode, you might need to use different CSS selectors. I can see looking at your site that .tribe-mini-calendar-event is set to 100% width, and you’ll have to change that (e.g. to 50% or 33%) before your events will line up side-by-side. If you’d like to give me access to your site I can fix it quickly and make a new tutorial for people who are using the shortcode instead of the widget.

          Reply
          • guenfood says

            September 21, 2015 at 6:46 am

            Ok. I need your email address to create you an admin account on my website

          • Sallie Goetsch says

            September 21, 2015 at 10:29 am

            It’s sallie at wpfangirl dot com.

          • Sallie Goetsch says

            September 21, 2015 at 11:54 am

            Email is sallie at wpfangirl dot com.

  5. Kat says

    October 12, 2015 at 12:59 pm

    Hi Sallie, thanks for this tutorial, I’ve managed to make the events display horizontally, I’m doing 2 across in two different widgets and have adjusted the percentages accordingly.
    The problem i’m having is getting the featured image to replace the date and display the full width of the post, there seems to be a .list-date before the .list-info and as there is no css for this in your tutorial it is still showing. I’m not sure where I’ve gone wrong.

    You can see the site in progress here http://byc-staging.europeaxess.com

    Reply
    • Sallie Goetsch says

      October 12, 2015 at 1:38 pm

      You could cheat and set .list-date to display:none, but you may also want to go into your theme-name/tribe-events/widgets/modules folder and edit single-event.php to remove the list-date div entirely. (I just commented it out.) Naturally you need to set up that /tribe-events directory if you haven’t, and copy the templates that you need to edit into it.

      Reply
      • Kat says

        October 13, 2015 at 2:11 am

        Thanks for the reply!

        That has got rid of the list-date div, thank you… but I still don’t see any featured images appearing? I have tried putting the code in both the parent theme function.php and the tribe-events/widgets/modules/single-event.php and the styling is all in my child theme style.css… but I must still be doing something wrong…

        Reply
        • Sallie Goetsch says

          October 13, 2015 at 5:41 am

          Send me your code and I’ll take a look at it.

          Reply
          • Kat says

            October 13, 2015 at 9:56 am

            I have emailed it to you at the email in the comment above, hope that is ok.

  6. Kat says

    October 15, 2015 at 4:56 am

    Thank you so much Sallie, the horizontal layout with featured images is working perfectly, couldn’t believe my luck when someone had done the exact plugin edit I needed AND had a tutorial for it! Thank you for your help in adding the event description excerpt. You are Awesome!

    Reply
  7. Adam says

    October 26, 2015 at 12:29 pm

    Hi Sallie,

    Firstly, I want to thank you for creating and sharing this incredible tutorial.

    I am having trouble trying to implement this on a brand new twentyfifteen theme wordpress website, and was wondering if you could walk me through how to do it?

    Thanks a bunch!

    Reply
    • Sallie Goetsch says

      October 26, 2015 at 1:09 pm

      Hi, Adam. If you read my follow-up post on using the Events Calendar Pro shortcode, you’ll see a note about how it’s important to get the CSS class for the container right. In my case, the container was called “featured-events,” but yours may be called something else.

      And, of course, if you are using a theme without widgets on the home page, you’ll need to register a new widget area. Last I checked, Twenty Fifteen didn’t have any widget areas except in the sidebar, so you are probably better off with the shortcode.

      You may also want to consider the width of your content area and set the entries up to be 3 across instead of 4 across. In that case, just change the width to 30% from 22%.

      Reply
  8. Jubin Thomas says

    October 7, 2016 at 4:25 am

    Hi,

    You did a great job. nice article

    Reply
  9. Patrick says

    October 11, 2016 at 10:28 am

    I can paste the code into my functions.php file (at the end) and then I click update and it redirects and says page cannot be found. It will never save into the file. I don’t have the PRO version and I can’t find the single-event.php file that you reference.

    Reply
    • Sallie Goetsch says

      October 11, 2016 at 11:31 am

      First, as far as I know, the code only works for the pro widget. Second, I now have the files for my updated widget on GitHub. And third, please tell me you are not using the editor within WordPress to edit your theme files.

      Reply
  10. farooq says

    October 25, 2016 at 6:49 am

    hi i am using your code but me face trouble still events show in line not row i want to show in row 3 what happend in my code check here
    http://consciousdancer.com/evo/

    Reply
    • Sallie Goetsch says

      October 25, 2016 at 9:01 am

      It looks fine to me, Farooq. Maybe you ran into a caching issue? Also, you might want to look at the updated tutorial with Flexbox.

      Reply
  11. Josh Morley says

    May 12, 2017 at 12:24 pm

    Thanks for this was a big help I had to tweak the CSS a little I am not sure if they have updated the plugin since you posted this but saved me a lot of time so thank you.

    Reply
    • Sallie Goetsch says

      May 12, 2017 at 1:28 pm

      Yes, the plugin has been updated several times. I have a more recent tutorial about using Flexbox for that layout, and I’m going to be doing one with CSS Grid Real Soon Now.

      Reply
  12. AIMEE M LAPIANA says

    October 20, 2019 at 8:26 pm

    Hi there…I’m a little lost. I’ve tried a few of your methods for this and can’t seem to get it working right. This method seems to have come the closest. Flex box directions kept breaking my site from php errors. I’ve got my items to line up horizontally but they’re not aligned vertically. Also can’t get the duration to left align for the life of me. There’s weird spacing between my elements as well.
    I’m working on a development site so I can share the password to view the page if you provide me an email? Any help would be much appreciated. It’s almost there I’m sure it’s just something I’m overlooking. Thank you for doing all this leg work!

    Reply
    • Sallie Goetsch says

      October 21, 2019 at 7:51 am

      Nothing you do with CSS should give you PHP errors. However, there have been various changes to The Events Calendar since I wrote that tutorial. Also, Flexbox only handles one dimension. If you need items to align both horizontally and vertically, you should use CSS Grid. I believe I have another tutorial on that.

      Reply
  13. AIMEE M LAPIANA says

    October 24, 2019 at 8:07 am

    Great! Thank you so much. It took some adjusting but I finally got it to work with your CSS Grid tutorial! I appreciate your help :)

    Reply
  14. Marc Soler says

    January 8, 2020 at 1:50 pm

    Hello Sallie,
    I’m trying to put Event List widget in horizontal.
    I’ve Event PRO and a DIVI Theme.
    I put the function into my functions.php and works.
    I put /* Event Calendar Pro Widget */ CSS into: ..themes/Divi-child/tribe-events/pro file: widget-calendar.css
    I put /*Home Featured Events */ ans Media CSS into: Home CSS

    with this is not Working. :(

    Is there any location of code Wrong?
    Or Is still Working now in 2020?

    Thanks a lot !

    Reply
    • Sallie Goetsch says

      January 8, 2020 at 2:24 pm

      I don’t know Divi at all, so I can’t say what that might affect, but my guess is that the class name of the widget area is different, and you will need to make some adjustments in the CSS to be sure it’s referring to whatever that widget area is called.

      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

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