{"id":1896506,"date":"2019-10-18T13:19:18","date_gmt":"2019-10-18T17:19:18","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/add-event-content-to-an-event-widget-2\/"},"modified":"2024-10-23T15:10:00","modified_gmt":"2024-10-23T19:10:00","slug":"add-event-content-to-an-event-widget","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/add-event-content-to-an-event-widget\/","title":{"rendered":"Include Event Content in the Events Calendar Widget"},"content":{"rendered":"\n\n\n

One customization request we’ve seen come up regularly is how to add post content to the Events Calendar widget<\/a>. Here we’ll take a look at how to do just that.<\/p>\n\n\n\n

The Scenario<\/h4>\n\n\n\n

Let’s say we have placed the Events Calendar widget in the sidebar of a page. We can expect to see a lot of information about our events, including the dates, times, location, and more, depending on our widget settings.<\/p>\n\n\n\n

That’s nice and dandy, but what if we want to include a little more information about our events? Specifically, let’s find a way to add the event’s excerpt below the dates.<\/p>\n\n\n\n

\n
\n

Before:<\/h4>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

After: <\/h4>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

How it’s Done<\/h4>\n\n\n\n

The key here is that we can use the default WordPress function for the_excerpt()<\/a> to display content from the event directly in the widget. For this use case, we will be changing the mobile view templates, so please note that this will affect the widget and<\/em> the mobile month view of your calendar. <\/p>\n\n\n\n

This will require a template override. If you’re new to overriding calendar templates, then it’s a good idea to check out our Themer’s Guide<\/a>, which will walk you through the process step-by-step. The basic idea is that we will be creating a copy of one of the plugin’s templates, then adding it to our theme files. This allows us to override the template without touching the core code of the plugin.<\/p>\n\n\n\n