Dazzling Design Choices for Events on Your WordPress Website

If you display events on your website, you want to showcase them in a way that entices website visitors to sign up and pay (if you’re charging) and show up as attendees. The latest updates to RSVPMaker give you more flexibility in how you want to present your event listings, capitalizing on advances in the design flexibility WordPress now offers for all sorts of website content.

The modern WordPress editor allows web pages and blog posts, as well as entire website designs, to be assembled from “blocks” — visual components that provide context-specific controls for different kinds of content (paragraphs, headings, and images) as well as layout elements (columns, rows, and navigation menus).

For several years, RSVPMaker has provided multiple content blocks, including the RSVPMaker Upcoming block for displaying event listings. However, website creators didn’t have as many options for layout as the latest RSVPMaker releases provide by working with the WordPress Query Loop block.

Here’s a quick tour:

The Query Loop block is a visual representation of the database lookup that retrieves a series of posts, pages, or other content items and “loops” through the process of presenting each one on screen embedded within the Query Loop is a Post Template block, and inside the template are blocks representing the title, featured image, and excerpt for each item. You can add, delete, and rearrange blocks within the template to create a variety of layouts.

If your website uses one of the newer “block theme” WordPress themes as the basis for its design, the Query Loop is used to display blog listings, category pages, and search results. You can also embed it in your site wherever you want a listing of blog posts or other content, including RSVPMaker posts.

The only problem, from my point of view, is that the standard Query Loop block defaults to displaying content in a format that’s appropriate for blog posts, not events. For RSVPMaker to play nicely with the Query Loop required a few additions and changes:

  • The RSVPMaker Date Block provides a clear display of the event date and time, along with add-to-calendar icons (if those are turned on in the event post settings)
  • The RSVPMaker Excerpt block cleans up some unwanted and sloppy output that the standard Excerpt shows in event listings, such as a plain text display of the event date.
  • The RSVPMaker Button block displays the registration button. This is actually a wrapper around the standard Buttons block container and Button block with default styling. The link to the registration form is added dynamically.
  • The RSVP Loop Blocks block is used to insert the date, excerpt, and button blocks, along with a Read More link. Once inserted, those “inner blocks” can be rearranged and customized. (In an earlier iteration, I provided a single excerpt block with options for displaying the date and button.)
  • The RSVPMaker Calendar block lets you embed a calendar grid that shows your upcoming events anywhere on your site, with or without the Query Loop.
  • The RSVPMaker Title + Date block can be used for simple lists of links, with the event title and date (time optional) as the link text. Provides standard formatting controls for alignment and colors.
  • The RSVPMaker Query Loop and RSVPMaker Query Loop + Calendar let you insert templated variations on the standard Query Loop that include the blocks mentioned above.
Transform To options

Tweaks to back end database routines to ensure events are displayed in the correct order (soonest to farthest in the future) even in with the standard Query Loop block. However, the RSVPMaker Query Loop variations add event-specific controls.

As of version 10.9.5, RSVPMaker provides one-click conversion of RSVPMaker Upcoming blocks to a Query Loop variation — with or without the calendar, depending on whether you had that feature turned on. Click the calendar icon on the toolbar, and you’ll see Query Loop as one of the Transform To options.

The Post Excerpt block displayed in a standard Query Loop will also display a “Transform To” option for RSVPMaker Loop Blocks.

Demo examples from a real website

The next few examples use a Query Loop/Post Template combo that displays content in a 3-column format. We can easily change it to display events in 2 columns, a single column, or in more elaborate formats.

The examples are based on content from the real website of a client, Swank Specialty Produce, which supplies all the best chefs in South Florida and regularly hosts gourmet dinner events. Because every event has been assigned a Featured Image that’s displayed at the top of each individual event post, we can make use of those images in event listings that advertise multiple events.

3 Column Layout for Events

Understanding the structure of the Query Loop

When working with any of the WordPress layout blocks such as columns — but even more so with a Query Loop block — it helps to use the Document Outline sidebar that opens on the left of the editor screen when you click the stair-step icon at the top left of the editor window.

With the Document Outline active, you can see the nested set of blocks that make up the Query Loop and Post Template. With the Query Loop selected, we get a button bar that provides access to settings like the number of posts per page to be displayed. Several additional controls are available through the sidebar on the right.

Events listing in the editor, created using a variation on the Query Loop block. Select the loop block to change the number of items displayed per page.

To make changes to the layout, select the Post Template block within the Query Loop, and click the arrow to reveal the blocks embedded within the template.

Post Template details

The outline shows that for each upcoming event retrieved by the Query Loop, the website will display the title, featured image, excerpt (the RSVPMaker version) and a Read more link. You can add, delete, or rearrange blocks within the Post Template to change the layout that will be applied to every event.

Below the Post Template are the Pagination block, which allows website visitors to navigate to the next page of results if nor all your events fit on one page, and the No results block where you can specify content to be displayed when there are no upcoming events.

With Page Template selected, the button bar lets you toggle between a single-column list and a grid view where events will be arranged in columns.

The sidebar on the right hand side of the editor shows additional formatting options like how many columns should be used for the grid view. Click on the half-shaded circle icon for additional styling options like background color, text color, typography, and spacing.

Drawbacks of the standard Query Loop block for RSVPMaker content

One reason for the latest customizations is that I’ve been hearing from RSVPMaker users who have been taking advantage of the Query Loop structure for blog posts, WooCommerce product listings, and other content. They wanted to be able to do the same with RSVPMaker content, and now they can.

Although you can set the standard Query Loop to display RSVPMaker event posts in a variety of suggested layouts (or “patterns”), one issue is that the default presentation offers a somewhat jumbled presentation of the event date and excerpt from the post content.

RSVPMaker events can be shown with the standard Query Loop block, but the display is not ideal.

The date that is displayed more prominently here is the date the event was posted to the website. That’s because this is the default presentation for a series of blog posts, and often readers want to see which posts are newer.

For an event, we care more about which events are coming up soon versus which are farther in the future. If you prefer to work with the standard Query Block, the first changes I would make to a layout like this are to remove the Date (publication date).

Then use the Transform To option of the Excerpt toolbar to change it to RSVPMaker Loop Blocks, which is really a collection including RSVPMaker Date, RSVPMaker Excerpt, and RSVPMaker Button.

The RSVPMaker Query Loop block variation is really the standard Query Loop with a few preset options, so you don’t give up anything when you use it. You can still customize the layout however you would like; it just aims to save you a couple of steps when getting started.

In addition, the RSVPMaker Query Loop adds a few controls you can use for special circumstances like displaying a list of past, rather than future, events, or excluding events in a specific category.

Creating a fancier layout with the Cover block

One of the most flexible and useful of the standard WordPress blocks is the Cover block, which allows you to display text and other content superimposed over an image. In the example below, I’ve removed the Featured Image block in favor of a Cover block that has been configured to use the featured image rather than a manually configured image.

A listing that leverages the Cover Block, with the event date and title embedded in the cover block, and a customized RSVP registration button.

The Cover block can contain other blocks, and in this case I embedded the Title block that displays the post title, followed by the RSVPMaker Date Block to show the event date.

The RSVPMaker Query Loop Excerpt block is placed below the Cover, and beneath that is the Read more block, followed by the RSVPMaker Button. I’ve centered the button and changed the colors.

Layout with 2 loops

Another effect you can play with is an events listing that displays the full content for one event — either your next event or one you particularly want to feature — followed by a summary listing of additional events people can sign up for.

In this example, a cover block at the top includes the event title, date, and an RSVP Now button. People who don’t need to be convinced can click to register right away. Others can read the details and hopefully still click to register.

Featured treatment for the next event, followed by a summary listing of other upcoming events.

Here’s that same layout in the editor, with the arrangement of blocks displayed in the left hand sidebar.

Two query loops, one that displays a single event with full content, and a second that shows upcoming events in a 2 column layout.

If we zoom in to show the blocks in more detail, we can see the two Query Loop blocks with different templates. The first query block is set to display a single post, which will be the next event on the schedule. The Post Template has been edited with the Content block replacing the Excerpt block, meaning that the full content of the event post will be displayed.

The second Query Loop uses a 3-column Post Template and RSVPMaker’s blocks for the event date, excerpt, and RSVP Now button as shown in previous examples.

What’s different is the second query block is configured to show up to 20 events with an “offset” of 1. The offset tells WordPress to skip the first post (the one featured at the top of the page) and to start with the second.

To access those settings, make sure you have the Query Loop block selected. Then click the slider icon on the button bar to reveal the query settings.

Query Loop settings

An alternate approach for this layout would be to have the event displayed up top be the next one categorized with an Event Type like “Featured.” RSVPMaker event types are like blog categories.

If you use the RSVPMaker Query Loop block variation, an option for setting the Event Type to be displayed is shown in the right hand editor sidebar when you have that block selected. There is also an option to specify an Event Type that should be excluded from the list of events shown.

Instead of using an offset for the second query block, we can set the first Query Loop to display only posts from the Featured category and set the second Query Loop to exclude Featured category events.

If only one event should get the featured treatment, make sure only one upcoming event has been tagged with the “Featured” Event Type (or whatever you decide to call it).

Block theme customizations

If your website uses a “block theme” that allows you to customize the templates used to display content throughout your website, you can make tweaks to optimize the display of RSVPMaker content.

The WordPress Site Editor allows you to make design changes. To enter this special editing mode, click the Edit Site link (on the black menu bar that appears when you are logged in). Or, from the administrator’s dashboard, click the Edit option on the Appearance menu.

Navigate to the Templates section and click the + button to add a template for the RSVPMaker post type.

The Add Template screen shows several options related to the custom post types used by RSVPMaker. Templates to consider adding and customizing include “Single Item: RSVP Event,” “Archive: RSVP Events,” and “Event Type.”

If no custom templates are supplied, your theme will use its default templates for presenting blog listings or single blogs — which is probably not optimal.

For example, some themes present will present single events using a single blog post template with a great big date — the publication date, not the event date. If you just remove that awkward display of the pub date, the event date will be displayed by default by the standard post content block.

Optionally, you could make the same change to the “Single Item: Event Template” layout. That word “template” gets used to mean a lot of different things, but in this case it refers to an RSVPMaker document for recurring events, where instead of being associated with a single event, the template is associated with a schedule like “every Tuesday at noon” or “first Thursday at 7 pm.” RSVP Templates aren’t for public consumption, but you might want to make the design consistent for testing purposes.

The RSVP Event block template is used to display a listing of events at a default URL in the format example.com/rsvpmaker/ and similarly a URL like example.com/rsvpmaker-type/featured/ is built in for each event type you have defined to allow website visitors to see all events of that type. Again, an Event Type is the equivalent of a blog category.

When you add one of these archive or event type templates, WordPress gives you the option of picking from one of several pre-defined sample layouts. It’s usually easier to take one of those suggestions as a starting point, and customize from there. Typically, it will include the standard header and footer elements of your website design, along with a Query Loop block with a pre-set Post Template.

Once again, consider changing elements in the Post Template that emphasize the publication date in favor of the event date as shown by the RSVPMaker Query Loop Excerpt or the RSVPMaker Date Block.

Or, you could delete the Query Loop block and replace it with the RSVPMaker Query Loop block variation. Important caveat: In the right-hand block properties sidebar for the RSVPMaker Query Loop block, be sure to toggle on the Inherit from Post Template option, which is off by default. When the variation is embedded in a post, you want that option turned off so that you can specify that RSVPMaker events should be displayed. However, when embedded in a block template, you want it to behave according to the logic of the WordPress template system. For example, an Event Type listing wouldn’t be displayed properly if Inherit from Post Template is turned off.

More options await

The examples shown here are just those I came up with after a few days of playing with the possibilities, including taking block patterns intended for blogs and modifying them. I don’t doubt that other web developers with design skills far beyond my own will come up with even better examples — and I’d love to see them.

I host and support websites based on RSVPMaker and also have limited availability for consulting projects. Write to me at david@rsvpmaker.com. I’m @davidfcarr on Twitter/X and /in/davidfcarr on LinkedIn.

Share to


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Discover more from RSVPMaker Events and Email Marketing

Subscribe now to keep reading and get access to the full archive.

Continue reading