Customizing the Information, Look, & Feel of Events in Grids and Lists

When creating your own custom event listing, grid, or schedule pages, you'll first want to add a display of your upcoming events. There are a variety of ways to do this, including several Elementor or Beaver Builder modules, WordPress archive pages, and FacetWP's own Listing Templates.

When you installed the Elevent for WordPress plugin, some FacetWP listings were created for you. This makes adding event grids and lists easy to start with, but provides a lot of power and flexibility if you want to do something unique.

Note: Monthly, weekly, and daily calendar views don't use any of the above methods--they just have their own shortcodes that come with the Elevent Plugin and cannot be directly modified.

Adding a default Event Grid or Event List to a Page

To add one of the event display options that come with the plugin, head to Settings -> FacetWP in your WordPress Admin.

Choose Listings from the submenu. 2022-09-30 17_21_12-FacetWP ‹ Elefest QA — WordPress.png

You will see a few listings to choose from--hover over the cogwheel for Event Grid and copy the shortcode.

listing-shortcode.gif

Paste this shortcode onto your page in whatever way you build content on a WordPress page. For instance, in Gutenberg, you would add a shortcode block like this.

2022-09-30 17_38_57-Edit Page “Event Grid – Gutenberg” ‹ Elefest QA — WordPress.png

Save and view your page. Depending on which listing template you chose, you'll see your events displayed accordingly.

2022-09-30 17_42_49-Events – Elefest – Elevent Demo.png

Making Changes to Content and Layout

FacetWP comes with a Listing Template Editor, making it fairly straightforward to make changes to grids and lists. You can even create your own complex layout--it will all work with Elevent Events and Elevent Showtimes, and still be filterable/searchable/sortable with whatever facets you add later.

For instance, if you wanted to add Premiere Status underneath the title of every event in an event grid, you can. Return to Settings -> FacetWP. Choose Listings again in the submenu.

It's a good idea to leave the default listing templates alone--in case you ever want to revert back to what the plugin came with. Find the template you want to start with, hover over the cogwheel, and Duplicate. Rename it to something you think is inspiringly descriptive.

dupe-eventgrid.gif
You'll see the list of data that gets listed out for each event. Let's add Premiere Status.

Press the + row to add another bit of data. Choose [Elevent Events] Premiere Status, and drag it up to where you want it to display. And while we're here, let's make it bold and a cool background color so it stands out.

new-premstatus.gif

Press Save Changes and don't forget to Re-index.

Since we duplicated the listing template, go back to your webpage and replace the shortcode with your new listing. If you take another look at your event grid page, you'll see your changes.

2022-09-30 17_56_06-Event Grid - Gutenberg _ Elefest QA.png




Showing Only Certain Events in a Listing Template

You might want to have a page somewhere that only shows events from one festival, season, or series; or a page dedicated to events of a certain type. You can copy or create a listing template that'll do just that and place it on the page of your choosing.

If you return to the Listing Template builder, switch to the Query tab.

2022-09-30 18_29_08-FacetWP ‹ Elefest QA — WordPress.png

From here you can determine how many results to show per page, how results will sort by default, and decide which events will be included.

Where it says Narrow results by we can already see of the Elevent Events we're fetching, only Coming Soon and Now Showing events will show up--that rules out any past events.

2022-09-30 18_30_37-FacetWP ‹ Elefest QA — WordPress.png

Press that Add query filter button. Choose a condition with which to also pre-filter in results, and then save changes and re-index.

add-query-filter.gif

If you refresh the page your Listing shortcode is on, you'll see only those results you decided to include will be possible to view.

Not finding what you're looking for? Contact Us Directly