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.)
Doing 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;
}
Here 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.)
See it live here.
![screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir](https://www.wpfangirl.com/wp-content/uploads/2015/09/Livresque-du-Noir-final.jpg)
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.
Did you have to create a separate widget area on your homepage for this to work?
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.
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.
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.
Okie Dokie!
Thanks!
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.
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.
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]
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.
Ok. I need your email address to create you an admin account on my website
It’s sallie at wpfangirl dot com.
Email is sallie at wpfangirl dot com.
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
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.
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…
Send me your code and I’ll take a look at it.
I have emailed it to you at the email in the comment above, hope that is ok.
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!
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!
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%.
Hi,
You did a great job. nice article
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.
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.
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/
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.
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.
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.
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!
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.
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 :)
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 !
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.
Hi Sallie,
i have a lot of trouble with this, i put in my child theme’s style.css the changes for overriding the plugin’s styles but with no effect!
It seems that /wp-content/plugins/the-events-calendar/src/resources/css/widget-events-list-full.min.css is loaded after my child theme’s CSS so there is no override !
Can you tell me where should I add that custom CSS in order to make it work ?
Thanks a ton
Hi, Tudor.
Just to make your life more annoying, TEC requires you to put CSS overrides into a folder in your theme directory, usually `tribe-events`. You can see their “Customizing CSS” article for details.
Cheers,
Sallie