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-150x150.jpg)
