If your business revolves around organizing events, hosting classes, or scheduling appointments, you might be looking for a practical way of displaying your event schedule or available slots on your website, in a timetable form. Fortunately, as it is usually the case with WordPress, you don’t have to do this manually or from scratch – whatever functionality you wish to add or expand, there’ll be a plugin for it.
There are plenty of scheduling plugins available on the market, but arguably the most popular one is the powerful Timetable Responsive Schedule plugin for WordPress. This plugin has been sold almost 10k times and boasts an average rating of 4.52, with regular free updates. It is a premium plugin that currently sells for $26 on Envato. Despite the fact that this is not a free plugin, you will get it at no additional costs if you pick up one of the WordPress themes with scheduling features. Even though the plugin comes with fully customizable options, our developers and designers customized it for use with each of our themes, making sure it fits the theme style perfectly, so you won’t have to lose valuable time over that.
For the purposes of this tutorial, we’ll be using our Songbook – Music School Theme.
In this guide, we’ll cover:
-
Installing and Activating the Timetable Responsive Schedule Plugin
-
Creating and Customizing Events
-
Creating and Customizing Event Lists
-
Setting Up Timetable Columns
-
Timetable Settings
Installing and Activating the Timetable Responsive Schedule Plugin
If you grabbed one of our themes with the Timetable Responsive Schedule plugin included, you just need to activate all the required plugins, and you’ll be ready to go. To do that, click on Activate installed plugins from your Dashboard.
After that, choose Activate from the Bulk actions dropdown and press the Apply button. Note that you don’t need to select all plugins that come with the theme, simply choose the ones you are going to use. Once the activation process is done, you can start working on your timetables.
However, if you’re using a different theme and have purchased the plugin separately from Envato, you will have to take a slightly different route, as you’d do with any plugin you add to your site. After you get the paid version of the plugin, you need to upload it to your WordPress library. To do this, navigate to Plugins > Add New from your WordPress dashboard.
Click on the Upload Plugin button to upload the plugin you have purchased.
Upload the plugin by clicking on the Choose File button, and then press the Install Now button.
Once the plugin is listed alongside the other plugins, you can activate it, and you are good to go!
Upon installation, you will notice that all the options related to the Timetable Responsive Schedule plugin are located in your admin panel, in the left-hand menu.
There are four different sections, and we’ll start with Events.
Creating and Customizing Events
As you already know, timetables are generally made of rows and columns. Columns represent days of the week, and the rows represent time slots – the timeslots of each event are defined by these two, as an intersection, like in any timetable. Since our Songbook theme is made for music schools, the events we used are classes, and they are organized in a timetable view like this:
You can’t have a timetable of events without the actual events so let’s see first how they’re created.
Events are created and customized individually, just like single posts on your blog, or portfolio items in your portfolio. To start, navigate to Events in your admin panel.
Now, if you’re using one of our themes that comes with this plugin, upon importing the demo content, you will have a number of premade events that you can simply customize under All Events. Of course, you can also delete them all and create your own, but customizing the existing ones often turns out to be a time-saver. On the other hand, if you’ve just purchased the plugin to use with another theme, you won’t have any premade events and you will have to create your own.
To add a new event single, click on Add New button from the top, or navigate to Add New from the admin panel.
The first thing you should do is add a title, or in other words – the name of your event.
On the right side of the screen, you can group your event to one of the existing categories.
If you want to add a new category, go to Events > Categories.
Add a name of the category you are creating into the respective field.
If you want to create a child/sub-category, then select the previously created parent category from the dropdown.
Additionally, you can include a description. Once you are done, press the Add New Category button, and your new category will appear along with the others, where you can select it from your single’s backend.
Alternatively, you can create a category directly from your event single’s backend by pressing the Add New Category button.
It will open an additional field below, where you are able to insert a category name, and optionally, choose the Parent Category from the belonging dropdown. When you are done, press the Add New Category button, and your new category will appear.
Once you choose the category, it will be positioned above the title on the live preview.
Next, you can add a featured image to your event single. Simply click on Set featured image and upload or choose an image from the media library.
The featured image will be displayed at the top of the event’s content, similar to the regular blog post. This is what it looks like in our theme.
You can add a subtitle by typing it into this field:
On the live preview, it will look something like this:
If you’d like to customize your event display on the timetable, you can change the box colors, text colors, and hours colors. Note that the Songbook theme has pre-designed color styles for these elements, but it is good to know that you can make these look different, if you want.
When the visitor clicks on an event in the timetable, it by default opens the corresponding event single. If you want to change that, you can add a custom URL to a different page, or even disable the timetable event URL option – this will make the event unclickable.
Now, if you’re using Songbook, you will have a couple of custom shortcodes at your disposal. One of them is the Events List shortcode, allowing you to create, well, event lists (more on that in a bit). If you plan on having an event list on your site, you should add a short description of your event in the form of an excerpt.
The most important setting, however, is the Event Hours section. To have an event displayed in the timetable, you’ll need to add its hours that determine the single’s timetable position. These hours may come as part of the demo content if you’re using Songbook, or you will need to create them on your own using the Timetable Columns>Add New, similar to how you added categories. We will talk about timetable columns in a bit, once we’re done with events and lists, but if you want, you can jump to that section right away.
Each ‘hour’ can be added to one of the previously created columns. Our Songbook theme comes with seven columns (Monday-Sunday), but if you’d like to display your timetable in some other format, you can change it easily – we’ll come to that part later. Now, when you’re adding your event to the timetable, the first thing you have to do is choose the Timetable column from the dropdown.
After determining the column, you should add additional important info like start and end hour, description(s), tooltip, category, available slots and slots per user. After you’ve filled these out, press the Add button.
Note that it is important to fill the Available slots and Slots per user fields, if you plan on using the booking functionality. We’ll come to the booking part later.
Logically, you can display more than one event/class in your timetable. Added singles will look like this in your single’s backend (see the image below). You can easily edit them by clicking the pencil icon, or delete the hour by clicking on the “x” icon.
On the live page, the classes (events) info is represented like this (see the image below). We can see the corresponding column at the top, and the corresponding hours on the left. When the class is hovered over with the mouse, the tooltip label appears, providing additional information.
Additionally, you can remove the booking option for this single for the one or for the all timetable columns. Simply choose the column from the dropdown and press the Delete button.
An additional option that might be of importance for you, if you have an event list, is the General Settings section at the bottom of the single’s backend, where you can add an image that will be displayed on the list instead of the featured image. Again, these list-related options are specific to the Songbook theme.
You can change the default image proportion. Simply choose the different one from the dropdown.
Our Songbook theme was originally created with Elementor. Let’s take a look at the event single content added with this page builder. Click on the Edit with Elementor button to reach the Elementor backend.
Elementor displays the content in the real time view. That means that even the content that can’t be edited over there is shown next to the editor – such as the header, the featured image, event title…
All the other content is added with the Elementor and can be edited right there.
On the right side of the screen you’ll notice the sidebar.
Its position is determined from the backend of our single. Let’s hop back to the classic single’s backend. At the bottom of the page, under the Sidebar Settings the first dropdown is to choose the position of it. It can be placed left or right, and it can take ⅓ or ¼ of the page grid width.
As for how the sidebar is created in the first place – we will come back to that in a bit, but once you have a sidebar, you can select it from the dropdown titled Custom Sidebar.
Another thing that can be set here is the space between the content and the sidebar.
You can choose one from offered spaces – from No (0) to Enormous (55) space. The measures in brackets are in pixels.
Now, let’s see how to create a custom sidebar for your event single. Again, this is something that depends on your theme, but in most cases, including Songbook here, the settings are located in Appearance > Widgets.
To create a new widget area, look for the Custom Sidebar near the bottom. Enter the name of your custom area, and press the Add Sidebar button.
We titled our custom widget area Classes Sidebar. To see the widgets added to it, click on the little arrow on the right.
Here are all the widgets we have added to our new sidebar widget area.
You can edit the existing widgets, remove them, or add different ones to the custom sidebar area. Here is the whole sidebar on the event single.
And while we’re on the subject of widgets, there’s a particularly hand one that comes with the Timetable Responsive Schedule plugin, regardless of the theme you’re using – the Upcoming Events Widget. You can use it to highlight certain events, classes or appointments in your sidebar or another widget-ready area. The widget can be found under Appearance > Widgets.
To add a widget to a page, click on the arrow icon to open all existing widget areas. Then, find one you’d like to add your widget to, select it and press the Add Widget button.
Here’s what the widget looks like within our sidebar on our Songbook theme, without any customization:
Still, you can adjust it to your needs. You…