Getting Started with The Events Calendar Shortcode & Block

If you’re using The Events Calendar, you may want to show upcoming events somewhere other than your main events page.

For example, you might want to add a short list of events to your homepage, show workshops on a landing page, or place upcoming events inside a page you’re building with Elementor or Bricks.

The Events Calendar Shortcode & Block gives you a few simple ways to do that. You can use the WordPress block, paste in a shortcode, or use the included builder integrations.

In this guide, we’ll walk through the main ways to add events to a page or post.

Install and activate the plugin

Before using the block or shortcode, make sure The Events Calendar Shortcode & Block is installed and activated on your WordPress site.

You can install it from your WordPress dashboard:

  1. Go to Plugins > Add New Plugin
  2. Search for The Events Calendar Shortcode & Block
  3. Click Install Now
  4. Click Activate

Once the plugin is active, you can start adding event lists to pages, posts, and supported page builders.

Adding Events with the WordPress Editor Block

The easiest way to add events in the WordPress editor is to use the included block.

  1. Open the page or post where you want your events to appear
  2. Click the + button to add a new block
  3. Search for The Events Calendar
  4. Select The Events Calendar Block
  5. Choose the display options you want
  6. Update or publish the page

The block is a good option when you want to add events visually without writing a shortcode by hand. Depending on the options available in your version, you can choose what event details to show and adjust the display from the block settings.

Add events using a shortcode

You can also add events using the shortcode:

[ecs-list-events]

Add that shortcode anywhere WordPress supports shortcodes, such as a page, post, widget, or page builder HTML block.

For example, you might add it to a homepage section where you want to show upcoming events, or to a landing page where you want visitors to see only events related to a specific topic.

To use the shortcode:

  1. Open the page or post where you want the events to appear.
  2. Add a Shortcode block, Classic block, or another block that supports shortcodes.
  3. Paste in the shortcode.
  4. Update or publish the page.

The basic shortcode displays a list of upcoming events. You can also add options to control which events are shown.

For example, you can limit the number of events:

[ecs-list-events limit=’3′]

Or show events from a specific category:

[ecs-list-events cat=’workshops’]

For more examples, see the shortcode documentation.

Use the plugin with Elementor

If you’re building a page with Elementor, you can add events using the included Elementor widget.

Open the page in Elementor, then look for The Events Calendar Shortcode & Block in the widget panel. You can scroll through the widgets or use the search field to find it faster.

Add the widget to the page, then adjust the event display options from the Elementor sidebar.

If you need to use shortcode variables (included in the pro version), you can use an HTML widget instead and paste your shortcode there.

For a more detailed walkthrough, see how to use The Events Calendar Shortcode & Block with Elementor.

Using the plugin with Bricks

The Events Calendar Shortcode & Block also includes a Bricks element.

If you’re building your site with Bricks, use the included element instead of pasting a shortcode manually. This gives you a more natural editing experience inside the builder.

For setup details, see how to use The Events Calendar Shortcode & Block with Bricks.

Customize the event list design

The free version gives you several options for choosing which events to display. For example, you can show events by category, limit the number of events, or choose which event details appear.

If you want to change the visual design, you can add custom CSS to your site.

CSS can be useful for small changes like adjusting spacing, changing text size, or matching the event list to your theme. If you’re not sure where to start, these videos walk through how to find the CSS rules you need and where to add your changes.

When to consider Pro

The free version is a good fit when you need a simple event list and you’re comfortable making small styling changes yourself.

If you want more layout options without writing custom CSS, The Events Calendar Shortcode & Block Pro includes additional designs such as compact, table, grouped, and full calendar views. It also includes options like a filter bar, which can help visitors narrow down events by category or other criteria.

You can see the available layouts on the demo site or learn more about The Events Calendar Shortcode & Block Pro.

Get The Events Calendar Shortcode & Block Pro

Wrapping up

That’s all you need to get started.

Use the WordPress block if you want the simplest editing experience and most display options. Use the shortcode if you want more control over where and how events appear. And if you’re working in Elementor or Bricks, use the included builder options to add events directly inside your layout.

Once your events are showing in the right place, you can fine-tune the display with shortcode options, custom CSS, or the additional layouts available in Pro.