Make Your Own Events Listing Page in Hestia Theme.

If you need an events listing page for your small local social enterprise or not for profit organisation’s website, you could install a WordPress plugin such as Modern Events Calendar by Webnus.

However, it might be quicker and easier to make your own events listing pages using WordPress blocks. If you can already use the WordPress block editor I recommend you try build your own events page first. It’s not that difficult.

Video: Make your own events page without using a plugin.

In the example below I used WordPress blocks and a Google map.

I used two rows, each row contains a columns block, the column widths are two thirds and one third. I now have two rows of two columns, four columns in all.

In the columns I placed these blocks:

1. Image block.
2. Table block.
3. Custom HTML block
4. Table block.
5. Custom HTML block.

Table block settings.

I enabled the table block header.

I also made the rows stripy and bolded some of the text.

Getting the Google maps code.

Google allows you to embed a Google map in your web page, just follow the instructions below this image.

• Go to Google Maps and type in the name of your location or your address and post code.
• Click the share button.
• Select the Embed Map tab.
• Copy the HTML code.

You then paste the code into a WordPress Custom HTML block in one of your columns. To get a Custom HTML block in your column, place your cursor on a new line then type a forward slash immediately followed by HTML. Like this…

/HTML

You then see this popup…

When you click the blue HTML button a text insertion box opens, paste your Google maps code into the text insertion box and your Google map will display at that point. You can leave the code as is, or you can edit the map’s width and height setting in the code.

WordPress blocks documentation.

You can find more information about the WordPress blocks on the official WordPress blocks documentation page.

The Get Directions Button:

To make it easy for your visitors to get directions, you can add a get directions button. Then when a user types their post code or starting address into the form, Google will show them directions to your premises.

This is the code to make the get directions button work. You paste this code into a WordPress Custom HTML block and then customise the destination address value=.

<form action="https://www.google.com/maps/dir/" method="get" target="_blank">
    <label for="saddr">Enter your postcode:</label>
    <input type="text" id="saddr" name="saddr" placeholder="Your postcode">
    <input type="hidden" name="daddr" value="Community Sports Hall, Leeds">
    <button type="submit">Get Directions</button>
</form>

Replacing the code.

In the example code I provide here you would:

• First go to Google maps.
• Find the best search term to locate your premises.
• Then in the code I provided above, replace “Community Sports Hall, Leeds” with for instance “Bradford City Football Club”.

If Google maps knows your organisation, you might be able to just use the name of your organisation. Otherwise, use your full postal address including your post code. Experiment and see what gets you the most accurate result in Google maps.

I like to keep things simple.

To make it easy to edit this event listing in later, I would make a different page for each type of event. For instance, I’d have one events listing page for our walking football events and another page for our lunch club events. But if you’re confident in your ability to edit a more complex page, you could list several types of event on one page. Experiment and see what works best for you.

Most small social enterprises and not-for-profit organisations only have a few events, so this DIY approach works well. If you host many events you could consider using an events planner WordPress plugin. However, most plugins will be more difficult to set up than the method I describe above.

Good luck with your events and thank you for making your local community a better place to live :-)