You can use this widget to display your calendar on pages other than your default events page. Drag that little guy into the sidebar area of your choice, and you’re off to the races!<\/p>\n\n\n\n There are three settings that help customize the Events List widget experience. Let’s take a look at them:<\/p>\n\n\n\n It’s important to bear in mind that the Events List widget in The Events Calendar Pro<\/a> is the same widget that comes with the core version of The Events Calendar. If you have Pro, you’ll see the same Events List widget under Appearance > Widgets<\/strong>. In your frontend the Widget will have the same appearance; the only difference is that you have some more filtering options available to set up this.<\/p>\n\n\n\n As you can see, there are more configurable options when setting up the Pro widget. Add the widget to the sidebar the same way as described above, and now you’ll see more options. In addition to the same three options in the basic widget, Pro introduces these settings:<\/p>\n\n\n\n Please note that all that settings are responsible only for properly loading events from your database. They don’t add or remove any visual information in the Widget!<\/p>\n\n\n\n Phew, that’s a lot of stuff! You really have a lot of options here to customize the widget’s content without touching a line of code, and that’s awesome.<\/p>\n\n\n\n When using the Block Editor, you can add the Events List as a block instead. Simply search for Events List under blocks, and you’ll find all of the same available options.<\/p>\n\n\n\n To embed the advanced list widget, simply use the following shortcode:<\/p>\n\n\n The widget also comes complete with an advanced set of filtering options, and these can also be used with the shortcode. Here’s an example that looks for events in the party<\/em> category:<\/p>\n\n\n We can supply a list of several categories or tag slugs (we just need to separate them with commas), and we can also use IDs by prefixing them with the #<\/strong> symbol:<\/p>\n\n\n You can also add a tax-operand attribute to the calendar so that multiple categories or tags can display at once:<\/p>\n\n\n Also, just like the advanced list widget itself, it is possible to specify extra information which should be displayed, such as the phone number and address of each venue:<\/p>\n\n\n Here’s a complete list of those optional details:<\/p>\n\n\n\n Finally, you can specify the maximum number of events that should be listed:<\/p>\n\n\n You can apply custom CSS to the Events List widget to change its appearance. The widget’s styles are loaded from For guidance on where to add custom CSS and how widget stylesheets work, see our Customizing CSS<\/a> guide.<\/p>\n\n\n\n The template for the core Events List widget can be found at: Now that the template is in the theme, you can modify it to your liking. For example, you can customize the notice for when there are no upcoming events by changing this line:<\/p>\n\n\n …to something like:<\/p>\n\n\n The process for customizing the widget in Events Calendar Pro is very similar. Actually both Free and Pro version of The Events Calendar uses the same file to displays the widget. The main difference here is that Pro version gives you more filtering options in WordPress dashboard.<\/p>\n\n\n\n As you may have noticed, there isn’t an option to hide the end date\/time. If you need to do so, the following code snippet will help you achieve that. Be sure to check out our snippet guide<\/a> for information on how to apply the code snippet to your site.<\/p>\n\n\n <\/p>\n\n\n\n The ‘View All Events’ link in the Events List widget defaults to the main events archive page set under Events > Settings > General > Viewing. By default, this is the If you have created a custom page to display your calendar using a shortcode, or if you’ve simply changed the main calendar slug, you’ll need to update this link to point to your new URL.<\/p>\n\n\n\n This guide provides a simple code snippet to update the destination URL for the ‘View All Events’ link in the Events List widget.<\/p>\n\n\n\n This snippet uses jQuery to select the ‘View More’ link in the Events List widget ( Replace the URL:<\/strong> Change the dummy URL Add the snippet:<\/strong><\/p>\n\n\n\n Clear any site cache (plugin, server, or CDN) to ensure the new code is loaded on the front end.<\/p>\n\n\n\n For more information, please see our guide on the best practices for implementing custom code snippets<\/a>.<\/p>\n\n\n\n This approach is simpler than overriding the widget’s template file<\/a>, and ensures the ‘View All Events’ link points to your custom URL.<\/p>\n\n\n\n You can completely disable the link using a PHP snippet. Add the following code to your theme’s This method removes the link from the HTML entirely, so it won\u2019t be rendered on the frontend. <\/p>\n\n\n\n If you’d rather keep the markup and just visually hide the link, you can use this CSS snippet instead. Use this method if you prefer a non-invasive method that only affects the visual display.<\/p>\n\n\n\n You can add the CSS code in one of the following ways:<\/p>\n\n\n\n By default, the Events List Widget<\/a><\/span> in The Events Calendar<\/a><\/span> displays upcoming events in order of their event start date.<\/p>\n\n\n\n But what if you want to sort events by when they were published<\/strong> instead of when they take place? This would allow you to showcase the most recently added events, regardless of their start date.<\/p>\n\n\n\n Fortunately, with a simple code snippet, you can modify the Events List Widget to display events by publication date (newest first)<\/strong> instead.<\/p>\n\n\n\n The snippet below customizes the widget\u2019s behavior. You can add it as a standalone plugin or insert it into your theme\u2019s If you don\u2019t want this change to apply to all<\/strong> List Widgets, you can add constraints to target specific widgets or sidebars.<\/p>\n\n\n\n For example, if you only want this behavior for a widget titled “Newly Added”<\/strong>, modify the following line at the bottom of the snippet:<\/p>\n\n\n …to this:<\/p>\n\n\n This ensures that only the “Newly Added”<\/strong> widget adopts the new sorting behavior while others remain unchanged.<\/p>\n\n\n\n Check out the snippet below to implement this feature!<\/p>\n\n\n If you find yourself thinking, “The event list widget design is great<\/em>, but I wish it showed the event’s featured image,” well, we’ve got something for you. In fact, we have three approaches to do just that.<\/p>\n\n\n\n Let’s walk through those together!<\/p>\n\n\n\n In short, we’re adding a thumbnail of the featured image for each event that is displayed in the widget.<\/p>\n\n\n\n We’ve got the nice-and-neat way (which we recommend because we like things neat, and<\/em> you get to learn how the plugin templates<\/a> work).<\/p>\n\n\n\n As we’ve discussed before in other<\/a> articles<\/a>, our new templating system is chock-full of actions and filters that allow for fine-tuned customization. If what we want is to simply jam an image in there, we can do that with a couple of hooks.<\/p>\n\n\n\n Open up your This gives us the images just like we want:<\/p>\n\n\n\n There’s still a little styling to do there. For example, the thumbnail images are pushed right up against the event’s date and title. That’s nothing a little CSS in your theme’s stylesheet can’t handle.<\/p>\n\n\n\n \u2139\ufe0f Related:<\/strong> Customizing CSS<\/a><\/p>\n\n\n\n This approach is similar to the previous one, but we’re going to be a bit neater about where we put our HTML. What we’re doing is creating a custom template that contains the featured image, goes in the theme folder, and gets injected into the widget.<\/p>\n\n\n\n Follow that? Yeah, not exactly “nice and neat” but it is a very effective and clean approach to get the featured image thumbnail in the widget. It also proWides more room to add logic without creating a giant function to handle it like the previous approach.<\/p>\n\n\n\n First we use the Now let’s define that function, again, in the In the “nice and neat” approach, we used a similar snippet to inject the HTML for the featured image thumbnail. This time, we’re going to inject a custom template that contains that HTML. That way, you can always add more markup to the file instead of having to mess with your functions.<\/p>\n\n\n\n We don’t need to create a template from scratch. There’s already a template in the plugin that contains the event’s featured image. It’s located in The Events Calendar plugin files, which is in the Let’s copy that So, going back to the There’s some sleight-of-hand happening here. See that Here’s what we get:<\/p>\n\n\n\n![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/events-list-free-1024x488.png\")
<\/figure>\n\n\n\nEvents Widget Settings<\/h2>\n\n\n\n
\n
Premium Widget Options<\/h2>\n\n\n\n
![\"Event](\"\/knowledgebase\/wp-content\/uploads\/2020\/12\/the-events-calendar-event-list-widget.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/sidebar-events-list-1024x624.png\")
<\/figure>\n\n\n\n\n
\n
Widget Block<\/h2>\n\n\n\n
![\"Events](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/11\/Screen-Shot-2021-11-15-at-2.22.23-PM.png\")
<\/figure>\n<\/div><\/div>\n\n\n\nEmbedding the Widget with a Shortcode<\/h2>\n\n\n\n
\n[tribe_events_list]\n<\/pre><\/div>\n\n\n
\n[tribe_events_list category="party"]\n<\/pre><\/div>\n\n\n
\n[tribe_events_list categories="party, black-tie" tag="#512"]\n<\/pre><\/div>\n\n\n
\n[tribe_events_list tags="cabbage, broccoli" tax-operand="AND"]\n<\/pre><\/div>\n\n\n
\n[tribe_events_list phone="yes" address="yes"]\n<\/pre><\/div>\n\n\n
\n
\n[tribe_events_list limit="10"]\n<\/pre><\/div>\n\n\n
Customizing the Widget<\/h2>\n\n\n\n
Styling with CSS<\/strong><\/h3>\n\n\n\n
widget-events-list-full.css<\/code>. To target the widget with your own CSS rules, use the base class:<\/p>\n\n\n\n.tribe-events-widget-events-list {\n \/* your styles here *\/\n}\n<\/pre><\/div>\n\n\nUsing Calendar Views<\/h3>\n\n\n\n
\/plugins\/the-events-calendar\/src\/views\/v2\/widgets\/widget-events-list.php<\/code>. This single file contains all the content and functionality for the widget. To override it, make a copy of it, then:<\/p>\n\n\n\n\n
\n<?php $this->template( 'components\/messages' ); ?>\n<\/pre><\/div>\n\n\n
\n <p> No events here. Holla! <\/p>\n<\/pre><\/div>\n\n\n
Remove the End Date\/Time<\/h3>\n\n\n\n
\nadd_filter ( 'tribe_events_event_short_schedule_details', function ( $schedule ) {\n\t$dash_position = strpos( $schedule, '> - ' );\n\t$schedule = substr( $schedule, 0, $dash_position );\n\treturn $schedule;\n} );\n<\/pre><\/div>\n\n\nChange the ‘View Calendar’ Link<\/h3>\n\n\n\n
\/events\/<\/code> slug.<\/p>\n\n\n\n.tribe-events-widget-events-list__view-more<\/code>) and updates its href<\/code> attribute to a custom URL.<\/p>\n\n\n\nadd_action( 'wp_footer', function() {\n?>\n<script>\njQuery(document).ready(function($) {\n \/\/ Replace 'https:\/\/example.com\/new-page\/' with your desired custom URL\n var customCalendarUrl = 'https:\/\/example.com\/new-page\/';\n\n \/\/ Target the 'View All Events' link in the Events List widget\n $('.tribe-events-widget-events-list__view-more a')\n .attr('href', customCalendarUrl);\n});\n<\/script>\n<?php\n} );\n<\/pre><\/div>\n\n\nHow to Use the Code<\/h4>\n\n\n\n
'https:\/\/example.com\/new-page\/'<\/code> to the exact URL of your custom calendar page.<\/p>\n\n\n\n\n
functions.php<\/code><\/strong> file.<\/li>\n\n\n\nHide the \u201cView Calendar\u201d Link<\/h3>\n\n\n\n
functions.php<\/code> file or through a plugin like Code Snippets<\/a><\/strong>. Using this method if you want to remove the link from the DOM entirely (cleaner code output).<\/p>\n\n\n\nadd_filter( 'tribe_template_pre_html:events\/v2\/widgets\/widget-events-list\/view-more', '__return_false' );<\/code><\/pre>\n\n\n\n.tribe-events-widget-events-list__view-more {display: none !important;}<\/code><\/pre>\n\n\n\n\n
style.css<\/code> file<\/li>\n\n\n\nShow Newest Published Events<\/h3>\n\n\n\n
functions.php<\/code> file. Once in place, list widgets will prioritize newly published events instead of upcoming ones.<\/p>\n\n\n\n\nnew EventsListWidget_NewlyAddedEvents();\n<\/pre><\/div>\n\n\n
\nnew EventsListWidget_NewlyAddedEvents( array(\n 'widget_title' => 'Newly Added'\n) );\n<\/pre><\/div>\n\n\n
\n<?php \/\/Do not copy this line\n\nclass EventsListWidget_NewlyAddedEvents {\n\tprotected $constraints = array(\n\t\t'sidebar_id' => null,\n\t\t'widget_id' => null,\n\t\t'widget_title' => null\n\t);\n\n\tpublic function __construct( array $constraints = array() ) {\n\t\t$this->constraints = array_merge( $this->constraints, $constraints );\n\t\tadd_filter( 'widget_display_callback', array( $this, 'setup' ), 10, 3 );\n\t}\n\n\tpublic function setup( $instance, $widget, $args ) {\n\t\t\/\/ We're interested only in the (advanced or regular) events list widgets\n\t\t$targets = array( 'tribe-events-adv-list-widget', 'tribe-widget-events-list' );\n\t\tif ( ! in_array( $widget->id_base, $targets ) ) {\n\t\t\treturn $instance;\n\t\t}\n\n\t\t\/\/ Check for constraints\n\t\tif ( ! $this->constraints_met( $instance, $args ) ) {\n\t\t\treturn $instance;\n\t\t}\n\n\t\t\/\/ Modify behavior\n\t\tadd_filter( 'tribe_events_views_v2_widget_repository_args', array( $this, 'order_by_latest' ) );\n\n\t\treturn $instance;\n\t}\n\n\tprotected function constraints_met( $instance, $args ) {\n\t\t$fail = false;\n\n\t\t\/\/ Should only run within a specific sidebar?\n\t\tif ( ! is_null( $this->constraints['sidebar_id'] ) && $this->constraints['sidebar_id'] !== $args['id'] ) {\n\t\t\t$fail = true;\n\t\t}\n\n\t\t\/\/ Should only run in relation to a specific instance of the widget?\n\t\tif ( ! is_null( $this->constraints['widget_id'] ) && $this->constraints['widget_id'] !== $args['widget_id'] ) {\n\t\t\t$fail = true;\n\t\t}\n\n\t\t\/\/ Should only run when the widget title is set to something specific?\n\t\tif ( ! is_null( $this->constraints['widget_title'] ) && $this->constraints['widget_title'] !== $instance['title'] ) {\n\t\t\t$fail = true;\n\t\t}\n\n\t\treturn ! $fail;\n\t}\n\n\tpublic function order_by_latest( $args ) {\n\n\t\t\/\/ Don't interfere in other queries\n\t\tremove_filter( 'tribe_events_views_v2_widget_repository_args', array( $this, 'order_by_latest' ) );\n\n\t\t\/\/ Tweak the actual orderby clause\n\t\tadd_filter( 'posts_orderby', array( $this, 'override_orderby' ), 100 );\n\n\t\treturn $args;\n\t}\n\n\tpublic function override_orderby( $orderby_sql ) {\n\t\tglobal $wpdb;\n\n\t\t\/\/ Don't interfere in other queries\n\t\tremove_filter( 'posts_orderby', array( $this, 'override_orderby' ) );\n\n\t\treturn "$wpdb->posts.post_date DESC, $orderby_sql";\n\t}\n}\n\nnew EventsListWidget_NewlyAddedEvents();\n<\/pre><\/div>\n\n\nAdding the Event Featured Image<\/h3>\n\n\n\n
What We’re Making<\/h4>\n\n\n\n
![\"\"](\"\/knowledgebase\/wp-content\/uploads\/2020\/11\/List_Widget-1024x827.png\")
![\"\"](\"\/knowledgebase\/wp-content\/uploads\/2020\/11\/List_Widget_Filter_Images-1024x899.png\")
The Nice and Neat Way<\/h4>\n\n\n\n
functions.php<\/code> file. It’s located at the top level of your theme folder. Then add this snippet at the bottom of the file:<\/p>\n\n\n\n\/\/ Here we hook into our template action - just before the date tag, which is the first item in the container.\nadd_action(\n 'tribe_template_after_include:events\/v2\/widgets\/widget-events-list\/event\/date-tag',\n 'my_action_add_event_featured_image',\n 15,\n 3\n);\n\n\/\/ Here we utilize the hook variables to get our event, find the image, and echo the thumbnail.\nfunction my_action_add_event_featured_image( $file, $name, $template ) {\n \/\/ Get the event for reference - we'll need it.\n $event = $template->get('event');\n\n $link = sprintf(\n '<a href="%1$s">%2$s<\/a>',\n get_the_post_thumbnail_url( $event ),\n get_the_post_thumbnail( $event, 'thumbnail', array( 'class' => 'alignleft' ) )\n );\n\n echo $link;\n}\n<\/pre><\/div>\n\n\n![\"\"](\"\/knowledgebase\/wp-content\/uploads\/2020\/11\/List_Widget_Filter_Images.png\")
The Custom Template Way<\/h4>\n\n\n\n
add_action<\/code> as we did before at the end of the functions.php<\/code> file. This is hooking into the action that injects the template containing the event’s date and time and tells the theme to run a custom my_action_add_event_featured_image<\/code> action.<\/p>\n\n\n\n\/\/ Here we hook into our template action - just before the date tag, which is the first item in the container.\nadd_action(\n 'tribe_template_after_include:events\/v2\/widgets\/widget-events-list\/event\/date-tag',\n 'my_action_add_event_featured_image',\n 15,\n 3\n);\n<\/pre><\/div>\n\n\n
functions.php<\/code> file, right after the previous snippet.<\/p>\n\n\n\nfunction my_action_add_event_featured_image( $file, $name, $template ) {\n\t\/\/ Get the event for reference - we'll need it.\n\t$event = $template->get('event');\n\n\t\/\/ Here's where we get and display our image.\n}\n<\/pre><\/div>\n\n\nwp-content<\/code> directory one level up from the theme folder. This is the file we want: the-events-calendar\/src\/views\/v2\/list\/featured-image.php<\/code>.<\/p>\n\n\n\nfeatured-image.php<\/code> file and put the copy in the theme folder. It’s not terribly important where the copied file goes, but it’s best that it lives in a tribe<\/code> folder so it’s separated from the rest of the theme files. This would make a good path because it conforms to the same pattern used for template overrides<\/a>: [my-theme]\/tribe\/events\/v2\/widgets\/widget-events-list\/event\/featured_image.php<\/code>.<\/p>\n\n\n\nfunctions.php<\/code> file in the theme, we can add that path to our function, like this:<\/p>\n\n\n\nfunction my_action_add_event_featured_image( $file, $name, $template ) {\n $template->template( 'widgets\/widget-events-list\/event\/featured_image', $template->get_values() );\n}\n<\/pre><\/div>\n\n\n$template->get_values()<\/code> bit in the function? That makes sure the template values all get passed along to our new template.<\/p>\n\n\n\n
![\"\"](\"\/knowledgebase\/wp-content\/uploads\/2020\/11\/List_Widget_Images_Template_1-1.png\")
![\"\"](\"\/knowledgebase\/wp-content\/uploads\/2020\/11\/List_Widget_Images_Template_5-734x1024.png\")