How to Manage & Display Course Schedule With Filters

Using a schedule filter is perfect for an educational platform offering different course schedules, a booking page for doctors or spa services, movie or theater showtimes, or homestay listings with availability filters. This approach improves the user experience.

In this practice, I will take an example to illustrate the schedule filter for courses using MB Views.

Before going ahead, let’s check some tools we need for this practice.

Video Version

Before Getting Started

We’ll use a settings page for the schedule, where we show schedule details. Including courses are posts of a custom post type. The remaining information is stored in custom fields. And, to display the schedule filter and data, I use MB Views.

So, I highly recommend you use Meta Box AIO to have a framework to create a custom post type, custom fields, a settings page, and template. As well as, it provides advanced features from Meta Box extensions. These are some extensions I use in this practice:

• MB Custom Post Type: to create a custom post type for the course
• MB Settings Page: to create a settings page for the schedule
• MB Views: to create a view for adding the schedule filter to the page
• MB Builder: to have a UI in the backend for creating fields visually
• MB Group: to organize custom fields into groups for easier management

Let’s start now.

Create a Settings Page

As I said before, we’ll use the settings page to include all the content of the schedule.

Go to Meta Box > Settings Page, and add a new one.

For the position of the settings page, you can put it in any place you want. In this case, I keep the location by default.

It’s still blank since we haven’t added any content to it yet.

Create a Custom Post Type

We’ll have many courses, and each one is a post of a custom post type. So, let’s create that post type.

Go to Meta Box > Post Types, and create a new one.

After publishing, our post type appears right here. Move to it to create posts. And these are some courses I created as an example.

Create Custom Fields

Do you remember the settings page where we haven’t added content? We’ll do it in this step, through custom fields.

These are some fields I want to create. I use the new UI of MB Builder.

Each item is a day, including information about the teacher, the price, and the courses. The teacher can be chosen from the list, and the course can be selected from the course we created in the previous step. And, we obviously have many items, so I use a cloneable group to have them all.

To create them, navigate to Custom Fields in Meta Box, and create a new field group.

First, add a Group field.

Inside this group, add subfields as the structure you want.

Add a Date Picker field for the date.

Regarding the teacher, I add a Select field, then input the teacher’s names in the Choices box.

Simply add a Number field for the price.

Next, regarding the course, add a field in the type of Post. This field type allows you to choose more than one post from a regulated post type.

Then, in the Post Types setting, you should choose the post type which you want to choose posts. And enable the multiple setting to choose more than one course.

For the group, you should set the group as collapsible to see all changes in a clear structure and set the group title to distinguish it.

Next, make the group cloneable to add more than one item.

After having all the fields with essential settings, click on the Settings icon, and set the Location as Settings page, then choose the settings page you want to apply the field group to.

Now, go to your settings page, and you will see custom fields displayed. Just input data for each item.

When you click on the field of the Courses, a list of posts from the post type you set in the settings is shown. Just choose some of them.

With the entered data, you have two choices for displaying data on the frontend. I’ll use the tabular format for both of them:

1. Simply show information by date. Then, you can have an overview of the courses.
2. Filter all the information related to a course. It is useful when you want to check the schedule of the current single course being viewed. On it, you can check which days the course is scheduled for, who will teach, and how much it costs. Then, comparing and choosing one that fits you is easier. This choice involves a bit of coding knowledge.

Let me show you how to do each one, step by step.

Display All Courses on an Archive Page

In this step, we’ll display courses by day, following the structure of the field group.

We need to have the page first. Go to Pages and create a new one.

Next, we’ll use MB Views to show data on this page. Navigate to the Meta Box > Views and create a new view for displaying courses and other information.

In the Template tab, you can add code directly, but I recommend you use the Insert Field button and choose the field you want to get data from the list on the right panel. Since we saved fields in the settings page, move to the Site tab, and you can see our field group.

Click on it. It is a cloneable group, so you’ll see a loop is generated.

Inside this loop, just insert subfields one by one. MB Views also allows you to choose the format or output for some special fields. Select one that fits you.

There is more than one course on a day. That’s why when you insert the field, of course, there is a nested loop.

After that, scroll down to the Settings section to set the location for the template. You should set its type as Singular, then choose the page you created.

Now, view the page on the frontend; you can see all the data is displayed.

To make the data easier to read, I decided to display it as a table. So I returned to the created template to style it.

I’m adding some div tags and classes, as well as some code for the table format.

Pay attention to the line of code {% if not loop.last %}, {% endif %} to ensure that a comma is added after each course except the last one.

Then, move to the CSS tab to style the table.

And this is the new look of my page.

Display Schedule on the Single Course

This is our aim in this tutorial. It is to filter information related to a specific course. Your visitors can choose the date, teacher, and price that are suitable for them. I also use MB Views.

Go to Views, and create another view.

I’ll add some code directly.

{% set course_id = post.ID %}
{% set options = mb.get_option('schedule') %}
{% set schedule = options.schedule_detail ?? [] %}
{% set filtered = [] %}

Specifically:

• {% set course_id = post.ID %}: is to get the post ID of the course being viewed. It’s also the ID of the course.
• mb.get_option('schedule'): is a function to get data from the schedule settings page.
• {% set schedule = options.schedule_detail ?? [] %}: is to get data from the schedule_detail group field group. It’s the ID of the group we created.
• {% set filtered = [] %}: is to create an empty array to later store filtered results.

A course can be taught on different days. So we need a loop to get data from all the items in the schedule.

{% for row in schedule %}
    {% set related_courses = row.courses ?? [] %}
    {% if course_id in related_courses %}
        {% set filtered = filtered|merge([row]) %}
    {% endif %}
{% endfor %}

This part of the code means:

Inside the loop, I retrieve all the courses of each item and assign them to the related_courses variable.

In that variable, we’ll check whether it includes the ID of the course that is being viewed; the data row will be added to the array we created before.

Next, add this code:

{% if filtered is not empty %}
    <table class="mb-table">
        <thead>
            <tr>
            <th>Day</th>
            <th>Teacher</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        {% for row in filtered %}
            <tr>
                <td>{{ row.date | date( 'd F Y' ) }}</td>
                <td>{{ row.teacher }}</td>
                <td>${{ row.price }} </td>
            </tr>
        {% endfor %}
    </tbody>
    </table>
{% else %}
    <p>No schedule available for this course.</p>
{% endif %}

When the array has at least one value, the information, including date, teacher, and price, will be retrieved.

Otherwise, in the case that the filter is empty, the text of “No schedule available for this course” will be shown.

Since we display the data in a table, you should style the table a little bit. Move to the CSS tab to add some code.

Now, you need to set the location for this template. I want to apply it to a single course. So, also set the Type as Singular, but choose Course.

View a course on the frontend, you can see the expected information.

I uploaded the code to GitHub, so you can refer to it.

Last Words

With just a few lines of code and the power of MB Views, you've added a dynamic schedule filter right inside a single post; no complex plugins or page builders are needed.

We have many tutorials on building a dynamic website with the help of MB Views. Hope that they are helpful to you.

• MB Views: How To Display Relationships?
• How to Create Reusable Template Parts in WordPress
• How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
• How to Randomize Hero Image in WordPress - Using MB Views
• How to Display a Video Playlist - Using MB Views
• How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
• How to Create Reading Time to Your WordPress Posts - Using MB Views
• How to Add Code to Header and Footer in WordPress - Using MB Views
• How to Create Charts in Posts - Using MB Views
• How to Create a Dynamic Horizontal Posts Accordion - Using MB Views
• How to Manage & Display Course Schedule With Filters