Getting Started with The Events Calendar Shortcode & Block

Are you ready to list your events from The Events Calendar (by StellarWP, formerly Modern Tribe) anywhere on your WordPress site with The Events Calendar Shortcode & Block? We’ll show you how you can effortlessly add a list of events to your WordPress site using the plugin’s provided block in the WordPress editor or by utilizing shortcodes. Additionally, we’ll touch on compatibility with the Elementor editor, specifically using an HTML block.

Make Sure The Events Calendar Shortcode & Block Is Installed

Before diving into the plugin’s shortcode and block features, ensure that you have The Events Calendar Shortcode & Block installed and activated on your WordPress site. You can find the plugin in the WordPress Plugin Directory by going to Plugins > Add New Plugin, and then searching for The Events Calendar Shortcode.

Adding Events with the WordPress Editor Block

  1. Create or Edit a Page/Post: Open the page or post where you want to display your events using the WordPress editor.
  2. Insert The Events Calendar Block: Click on the ‘+’ button to add a block and search for “The Events Calendar”
  3. Configure Block Settings: The block allows you to choose the view (calendar, list, day, etc.) and customize the display settings. Adjust the settings according to your preferences.
  4. Update/Publish: Once satisfied with the content, update or publish your page/post.

Utilizing Shortcodes for Event Display

For those who prefer the classic shortcode method:

  1. Access the Post/Page Editor: Navigate to the page or post where you want to add the events.
  2. Insert the Shortcode: Use the shortcode provided by The Events Calendar Shortcode & Block to display events. For example [ecs-list-events]
  3. Customize Shortcode Parameters: Tailor the shortcode to your needs by adding parameters like category, venue, or date range. The plugin documentation provides a comprehensive list of available parameters.
  4. Update/Publish: After adding the shortcode, update or publish your content to see the events displayed.

Elementor Compatibility with HTML Block

If you’re using the Elementor editor and want to leverage The Events Calendar Shortcode & Block, follow these steps:

  1. Open Elementor Editor: Edit the page with Elementor.
  2. Add an HTML Block: Drag and drop an HTML block onto your desired section of the page.
  3. Insert Shortcode: In the HTML block, input the shortcode for displaying events. For example, [ecs-list-events]
  4. Update/Publish: Save your changes, and the events will seamlessly integrate into your Elementor-designed page.

Customizing the Look & Feel

The listing of events in the free version of The Events Calendar Shortcode & Block includes a lot of options for choosing what events to display, but not much styling. Cascading Style Sheets or CSS can be used to change how the events look on your site.

There’s a video I made on how to add the CSS and help finding what to change:

or a longer version with more examples of finding rules to override:

You can also upgrade to the pro version which not only includes styling for the basic listing of events in the default design, but also includes a number of other ways to display your events: a compact view, a table or column view, a grouped design, along with the ability to show a full calendar of events wherever you want! You can even add a filter bar so visitors to your site can choose what events they want to see.

Conclusion

Incorporating events into your WordPress site has never been easier, thanks to The Events Calendar Shortcode & Block. Whether you prefer the convenience of a dedicated block in the WordPress editor or the flexibility of shortcodes, this plugin provides a user-friendly solution. And for Elementor users, the compatibility with an HTML block ensures a smooth integration of events into your visually appealing designs. Enhance your website’s functionality and keep your audience engaged with this customizable plugin to display your events.

Want more designs and options for displaying your events? The pro version of The Events Calendar Shortcode & Block allows you to promote your events in multiple layouts, with or without images, a registration link, calendar view, description, and metadata such as the venue location.