{"id":1896635,"date":"2019-10-18T13:19:42","date_gmt":"2019-10-18T17:19:42","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/featured-events-2\/"},"modified":"2024-10-09T12:27:09","modified_gmt":"2024-10-09T16:27:09","slug":"featured-events","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/featured-events\/","title":{"rendered":"Creating Featured Events"},"content":{"rendered":"\n

There’s a setting in The Events Calendar editor that allows you to “feature” an event. Featuring an event gives it a more prominent appearance in the calendar.<\/p>\n\n\n\n

For example, here’s a featured event in the calendar’s month view:<\/p>\n\n\n\n

\"\"
A featured event displays the event’s featured image and is marked in blue.<\/figcaption><\/figure>\n\n\n\n

And here it is in list view:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n\n\n\n

Featuring an event<\/h2>\n\n\n\n

Feature an event by selecting the “Feature Event” setting in the Event Options section of the post editor.<\/p>\n\n\n\n

\"\"
The setting is under “Event Options” in the post editor.<\/figcaption><\/figure>\n\n\n\n

There’s nothing else you need to do to feature the event. Once the post is saved, The Events Calendar will take care of making the event stand out on the calendar.<\/p>\n\n\n\n

\n\n\n\n

Styling featured events<\/h2>\n\n\n\n

When an event is featured, the plugin adds a special CSS class to the event based on the view is in.<\/p>\n\n\n\n

For example, in month view, the featured event class is .tribe-events-calendar-month__calendar-event--feature<\/code>. This can be used to style featured events that are displayed in month view.<\/p>\n\n\n\n

\"\"
Notice that the event actually has a lot of classes, with the featured class being among them.<\/figcaption><\/figure>\n\n\n\n

Here are all the classes for featured events and the views they apply to.<\/p>\n\n\n\n

Calendar View<\/th>CSS Classname<\/th>What it Does<\/th><\/tr><\/thead>
All Views<\/td>.tribe-common-svgicon--featured<\/code><\/td>Provides the background image for the icon of a featured event.<\/td><\/tr>
List View<\/td>tribe-events-calendar-list__event-row--featured<\/code><\/td>Styles the parent wrapper of a featured event in the calendar’s list view.<\/td><\/tr>
<\/td>.tribe-events .tribe-events-calendar-list__calendar-event--featured:before<\/code><\/td>Provides the blue border of a featured event in list view.<\/td><\/tr>
<\/td>tribe-events-calendar-list__event-featured-image-wrapper<\/code><\/td>Styles around the featured image in list view.<\/td><\/tr>
<\/td>tribe-events-calendar-list__event-featured-image<\/code><\/td>Styles the featured image of a featured event in list view.<\/td><\/tr>
<\/td>tribe-events-calendar-list__event-featured-image-link<\/code><\/td>Styles the link of a featured image for a featured event in list view.<\/td><\/tr>
<\/td>tribe-events-calendar-list__event-datetime-featured-icon<\/code><\/td>Positions the icon for a featured event in list view.<\/td><\/tr>
<\/td>tribe-common-svgicon--featured<\/code><\/td>Sets the background image that is used for the icon of a featured event.<\/td><\/tr>
<\/td>tribe-events-calendar-list__event-datetime-featured-text<\/code><\/td>Sets the text style for the “Featured” label next to the icon of a featured image in list view.<\/td><\/tr>
Month View<\/td>tribe-events-calendar-month__calendar-event--featured<\/code><\/td>Styles the parent wrapper for a featured event in the calendar’s month view.<\/td><\/tr>
<\/td>.tribe-events .tribe-events-calendar-month__calendar-event--featured:before<\/code><\/td>Provides the blue border of a featured event in month view.<\/td><\/tr>
<\/td>tribe-events-calendar-month__calendar-event-featured-image-wrapper<\/code><\/td>Styles around the featured image in month view.<\/td><\/tr>
<\/td>tribe-events-calendar-month__calendar-event-featured-image-link<\/code><\/td>Styles the link of a featured image for a featured event in month view.<\/td><\/tr>
<\/td>.tribe-events .tribe-events-calendar-month__calendar-event-featured-image<\/code><\/td>Styles the featured image of a featured event in the calendar’s month view.<\/td><\/tr>
<\/td>tribe-events-calendar-month__calendar-event-datetime-featured-icon<\/code><\/td>Positions the icon of a featured image in month view.<\/td><\/tr>
Week View<\/td>tribe-events-pro-week-grid__event--featured<\/code><\/td>Styles the parent wrapper of a featured event in the calendar’s week view.<\/td><\/tr>
<\/td>tribe-events-pro-week-grid__event-featured-image-wrapper<\/code><\/td>Styles around the featured image of a featured event in week view.<\/td><\/tr>
<\/td>tribe-events-pro-week-grid__event-featured-image<\/code><\/td>Styles the featured image of a featured event in week view.<\/td><\/tr>
<\/td>tribe-events-pro-week-grid__event-datetime-featured-icon<\/code><\/td>Positions the icon for a featured event in week view.<\/td><\/tr>
Day View<\/td>tribe-events-calendar-day__event--feature<\/code>d<\/td>Styles the parent wrapper of a featured event in the calendar’s day view.<\/td><\/tr>
<\/td>.tribe-events .tribe-events-calendar-day__calendar-event--featured:before<\/code><\/td>Provides the blue border of a featured event in day view.<\/td><\/tr>
<\/td>tribe-events-calendar-day__event-featured-image-wrapper<\/code><\/td>Styles around the featured image in day view.<\/td><\/tr>
<\/td>tribe-events-calendar-day__event-featured-image-link<\/code><\/td>Styles the link of a featured image for a featured event in day view.<\/td><\/tr>
<\/td>tribe-events-calendar-day__event-featured-image<\/code><\/td>Styles the featured image of a featured event in day view.<\/td><\/tr>
<\/td>tribe-events-calendar-day__event-datetime-featured-text<\/code><\/td>Sets the text style for the “Featured” label next to the icon of a featured image in day view.<\/td><\/tr>
Photo View<\/td>tribe-events-pro-photo__event--featured<\/code><\/td>Styles the parent wrapper of a featured event in the calendar’s photo view.<\/td><\/tr>
<\/td>tribe-events-pro-photo__event-featured-image-wrapper<\/code><\/td>Styles around the featured image in photo view.<\/td><\/tr>
<\/td>tribe-events-pro-photo__event-featured-image-link<\/code><\/td>Styles the link of a featured image for a featured event in photo view.<\/td><\/tr>
<\/td>tribe-events-pro-photo__event-featured-image<\/code><\/td>Styles the featured image of a featured event in photo view.<\/td><\/tr>
<\/td>tribe-events-pro-photo__event-datetime-featured-icon<\/code><\/td>Positions the icon for a featured event in photo view.<\/td><\/tr>
<\/td>tribe-events-pro-photo__event-datetime-featured-text<\/code><\/td>Sets the text style for the “Featured” label next to the icon of a featured image in photo view.<\/td><\/tr>
Map View<\/td>tribe-events-pro-map__event-card-wrapper--featured<\/code><\/td>Styles the parent wrapper of a featured event in the calendar’s map view.<\/td><\/tr>
<\/td>tribe-events-pro-map__event-datetime-featured-icon<\/code><\/td>Positions the icon of a featured image in month view.<\/td><\/tr>
<\/td>tribe-events-pro-map__event-datetime-featured-text<\/code><\/td>Sets the text style for the “Featured” label next to the icon of a featured image in map view.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Not sure how to use these classes in your theme’s CSS? Check out our CSS guide<\/a> for more information.<\/p>\n\n\n\n

Featured events in Filter Bar<\/h3>\n\n\n\n

If you have our Filter Bar add-on installed, then it gives you the option to add a filter for featured events:<\/p>\n\n\n\n

\"\"
Featured events become an available filter when the Filter Bar add-on is installed.<\/figcaption><\/figure>\n\n\n\n

Enabling the filter activates it in the calendar, allowing users to filter the calendar to display only featured events.<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

There’s a setting in The Events Calendar editor that allows you to “feature” an event. Featuring an event gives it a more prominent appearance in the calendar. For example, here’s a featured event in the calendar’s month view: And here it is in list view: Featuring an event Feature an event by selecting the “Feature…<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[130],"tags":[23],"stellar-product-taxonomy":[158],"class_list":["post-1896635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-post-manager","tag-css","stellar-product-taxonomy-events-calendar-pro"],"acf":[],"taxonomy_info":{"category":[{"value":130,"label":"Managing Events"}],"post_tag":[{"value":23,"label":"CSS"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":130,"name":"Managing Events","slug":"advanced-post-manager","term_group":0,"term_taxonomy_id":130,"taxonomy":"category","description":"","parent":61,"count":44,"filter":"raw","term_order":"0","cat_ID":130,"category_count":44,"category_description":"","cat_name":"Managing Events","category_nicename":"advanced-post-manager","category_parent":61}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":48,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1896635"}],"version-history":[{"count":2,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896635\/revisions"}],"predecessor-version":[{"id":1963080,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896635\/revisions\/1963080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1896635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896635"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}