July 26, 2019 Reading time: 5:17
In this article:
- How to find the Jetpack Upcoming Events Widget and set it up
- How to Connect to a calendar to the Jetpack Upcoming Events Widget to share events
A calendar is a key element of sharing information on a WordPress website. The Jetpack plugin for WordPress provides several widgets including one that allows you to share upcoming events by connecting to calendar feeds via an iCalendar feed. The widget, named Upcoming Events, works by displaying events that appear in the linked feed or feeds. This tutorial will walk you through finding the widget and applying it to your WordPress website using a Google Calendar.
Setting up the Upcoming Events Widget
Note: The following steps will require that you have the Jetpack plugin installed to your site.
Widgets provide extra functionality to your WordPress site and can be deployed by simply dragging them into your site. When Jetpack is installed it includes several widgets that are labeled “(Jetpack).” View the video or follow the steps listed below to add the widget to your website. Note that the Upcoming Events can only be placed in three locations: Sidebar, Footer 1 and Footer 2.
- Login to the WordPress Administrator Dashboard
- Go to the Appearance menu item in the left column and then click on Widgets
- Scroll through the widgets (they’re usually in alphabetical order) until you find Upcoming Events (Jetpack). When you click on this widget you will see the option to select where the widget goes. It can be placed in the Sidebar, Footer 1 and Footer 2. You can also click on the widget (hold the left-click) then drag it to the location you wish in the top right column.
Your next step is to configure the widget. If you need to leave the site at this point, make sure to save your page as a draft by clicking on the button in the top right corner of the page.
Need a better hosting server for your growing WordPress website? Check out the optimized WordPress Hosting solutions from InMotion Hosting!
Connecting the Upcoming Events Widget
The next part that you need to set up is the connection that allows the Upcoming Events widget to list events on your website. We are using Google calendar in this tutorial, but any calendar application that can share the iCalendar feed will work. Once you configure the widget, it will list the events in the location that you have selected. This tutorial will show you how to obtain the iCalendar feed and then add it to the widget. Follow the video below, or use the listed steps to guide you through the setup process.
Note: The Jetpack Upcoming widget will only share calendar events if the calendar is public. You will need to determine if the calendar is public based on the settings with the calendar application that you are using.
- For the Google Calendar, you will need to be logged into your account. When you’re in your calendar look for the list of calendars in the left column. Click on the calendar that you want to use, then click the three vertical dots to see the pop-up menu for that calendar.
- Click on Settings and sharing.
- You will then see the Calendar settings page. Scroll down until you find the Integrate Calendar section.
- Click on the field labeled “Public address in iCal format” and copy the URL that you see there. If you’re new to copy and paste, simply left-click in the field 3 times with your mouse to highlight the entire URL (or use the keyboard shortcut: CTRL + a), then right-click and select copy. If you don’t have a right button, you can use the keyboard shortcut for copy – CTRL + c. The URL will end in “.ics” so make sure that you get all of it when you copy it. As per the description of the link, this address is used by applications to access the calendar.
- Next, go back to your WordPress site and the Upcoming Events widget that you added in the right-side of the Widgets screen.
- If necessary, click on the drop-down arrow for the widget. This will show the default title of the widget. You can change it to personalize it if you wish.
- Underneath that setting, you will see the field labeled “iCalendar Feed URL:” Click on the field and then paste the public iCalendar URL that you got from your Google Calendar. You can either right-click and then select paste, or you can select the field and then use the keyboard option for paste: CTRL + v.
- Next, select how many events you want to show. It is set to show 3 events by default.
- Click on Save to preserve your changes.
There is also a button labeled Visibility at the bottom of the widget options. This allows you to set conditions to show or hide the widget.
Congratulations! You can now set up and connect the Upcoming Events widget in your WordPress site. For more information on using Jetpack, check out the tutorial for Configuring Statistics in Jetpack. This tutorial and more will be linked at the bottom of each article.