The Events Calendar

Greystoke Web Design — Sat, 30 Apr 2022 09:38:04 +0000

This guide covers The Events Calendar – a plugin that can be used to add events and schedules to your website. I’ll cover adding Venues (where the events take place), Organisers (with contact details) and Events – which can have a Venue and an Organiser attached. I’ll also cover how to drop a pin on a Google map and add that map to any Event for more precise locations.

As always, I’m going to give you links to the official documentation! That’s guaranteed to be up to date. So use these notes as a guide, but refer back to the Events Calendar Knowledge Base for the latest position!

Adding Venues / Organisers

https://theeventscalendar.com/knowledgebase /k/venue-and-organizer-pages/

Adding a Venue

I would always recommend adding venues first (as they can then be picked when setting up the event). You can add a venue when setting up the event as well. To add a new venue go into the Events menu on the left hand side and pick ‘Venues’, then click the Add New button at the top of the page

Name the venue (e.g. My House)
Add a description (the main editing area)
Supply information about the venue (address, city, state, ZIP, phone and website)
Set options to display a Google Map for the venue

One thing to note is that adding a location requires the postcode for the free version of the events calendar. If you have the PRO version you can enter the latitude and longitude. (See also adding Events for an option to embed a map directly into the event for more accuracy).

Optionally you can enter an excerpt (this is the summary test for the venue) and a featured image. These are not really necessary for Venues or Organisers in my opinion, but are very useful for events!

Adding an Organiser

Again it’s useful to have the Organisers set up in advance, but these can be added at the same time as an event if they are not there.

As for Venues, select the left hand menu / Events / Organisers / Add New

Name the organizer (e.g. Ted Mosby)
Add a description (the main editing area)
Supply additional information about the organizer (eg phone, website and email)

Adding Events

https://theeventscalendar.com/knowledgebase/k/creating-an-event/

Top tip: always clone an existing event rather than starting from scratch – it’s often much quicker. And you won’t forget to set the event category (if applicable)

Adding an Event can be done straight from the left hand menu: Events / Add New. Or hover over an existing Event in the editor and select ‘clone’.

Events can be fairly straightforward, but you’ll often find they have ‘categories‘ set up (like posts) so that you can selectively show different events on different pages, or search for specific event types. As an example fundraising events might have their own category, so that they can be shown on a dedicated fundraising page.

Caution! If you do have event categories set up, it can be easy to forget about them. So if you add an event, but don’t see it appearing where you expect it to … it’s probably because you haven’t set the event category (This is easily fixed via the quick edit menu). This is why cloning an existing event is often easier!

Add an Event name, a description and a start and end time. You can then add an existing organiser and venue (or create new ones if required).

If you need to add a featured image, or change the event category, this can be done via the right hand panel – just make sure to select “Event” at the top rather than “Block”.

If you like, you can also add an excerpt, which will be shown on summary pages – this is not required.

Embedding a map in an event

If you need an exact location for an event, then here’s how to generate a pin, and embed a map on an event (or any page) – assumes you are using a desktop.

First follow these instructions https://wordpress.com/support/google-maps

In your Event, add a custom html block and paste the embed code into it – click the plus sign where you want to add the block, search for ‘custom’ or ‘html’ then click the block to insert

Here you can see a custom pin used in a map

Here’s the actual embed code used above. Note that if I wanted to make the map full width, I would just change the width (highlighted) from “600” to “100%”. For accessibility I would also add a ‘title’ attribute to the code for any maps I add to websites I build.

width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Dropped Pin example">

Final Checklist

If you think you are ready to publish, run through these questions first!

Did you optimise any images or PDFs before adding them (if applicable)?
Have you set the correct category, if needed (from the Post admin pane on the right hand side)?
Have you set a featured (optimised!) image? This can appear on event summaries.
Have you written a succinct excerpt? This also appears on summaries, and helps SEO.
If you want to highlight a specific event on the calendar, have you marked is as a ‘featured event’?

All good? The hit that Publish button!