Customizing the Event Output using Shortcode Variables

You can use variables to decide what event data appears, using either an existing design or a completely blank one. For example:

[ecs-list-events design="table"]
{thumbnail}
{url}{title}{/url}
{date}
[/ecs-list-events]

This will change the data for each event to include the thumbnail (if there is one), the title linked to the event, and the event schedule details.

You can still use the event filtering options to decide what events display, such as only showing a single event.

This powerful system also allows you to conditionally show content only if the event has certain details. For example:

[ecs-list-events design="columns"]
{if_cost}Event Cost: {cost}{/if_cost}
{thumbnail}

{url}{title}{/url} {if_status}Status: {status}{/if_status}

{start_date:Y-m-d} @ {start_time:H:i}
[/ecs-list-events]

This will only show the "Event Cost:" text if the event has a cost, and the "Status:" label (and the status) if the event has a status such as Cancelled or Postponed. This also customizes the date and time format.

Design Customization Options

There are various options you can use to customize the look of the designs. Not all options are available in every design.

Title Size

Customize the size of the title. For example:

titlesize="18px"

Border Radius

Modify how much the corners are rounded. For example, to remove the rounded corners:

border-radius="0"

Thumbnail

thumb="true" to show the event thumbnail image (if any)

Excerpt

excerpt="true" to show the event summary description under the title

Venue

venue="true" to show the venue name under the title

Time only

timeonly="true" to show only the start time

Button

button="View Details" to show a button with a link to the event, where you can change the "View details" text to whatever you want.

Using the Event Website Link

buttonlink="website" to use the event website URL instead of the regular link for the button

Button color

buttonbg and buttonfg to customize button color. For example buttonbg="black" buttonfg="white"

Customize using Template Files

If you'd like to completely customize the output and do the customizations via files, you can create a folder called tecshortcode in your theme directory, and in it create a file called custom.php

Then add your shortcode with "custom" as the design name (which matches custom.php):

[ecs-list-events design="custom"]

You can rename custom.php to another name and even create multiple design templates to use elsewhere on your site. Note that you should place this folder within a child theme so any updates to your main theme do not override your templates.

Customizing the Default Design

Want to customize the default design? You can copy

the-events-calendar-shortcode-pro/templates/default_tpl.php

to

wp-content/themes/your-theme/tecshortcode/default.php

then edit the default.php file as needed.

Note that you need to keep it named default.php in order to have the default options and styling come though. The template version is also slightly different than the non-template version, but has the majority of the features and functionality for you to customize.

Customizing the Compact Design

Want to customize the compact design? You can copy

the-events-calendar-shortcode-pro/templates/compact_tpl.php

to

wp-content/themes/your-theme/tecshortcode/compact.php

then edit the compact.php file as needed.

Note that you need to keep it named compact.php in order to have the default options and styling come though. The template version is also slightly different than the non-template version, but has the majority of the features and functionality for you to customize.

Customizing the Grouped Design

If you want to customize the grouped design, you can copy

the-events-calendar-shortcode-pro/templates/grouped.php

to

wp-content/themes/your-theme/tecshortcode/grouped.php

then edit the grouped.php file as needed.

Note that you need to keep it named grouped.php in order to have the default options and styling come though.

Customizing the Columns (Horizontal/Photos) Design

Want to customize the columns design? You can copy

the-events-calendar-shortcode-pro/templates/columns.php

to

wp-content/themes/your-theme/tecshortcode/columns.php

then edit the columns.php file as needed.

Note that you need to keep the file in your theme named columns.php in order to have the default options and styling come though.