If you’re finding the way to categorize items in a cloneable group by subfield value, this blog is for you. We’ll do it with the help of MB Views.

Table of Contents hide

1. Video Version
2. Before Getting Started
3. Create Custom Fields for Teacher
4. Categorize Items in a Cloneable Group by Subfield Value
1. 4.1. Display Items on the Page
2. 4.2. Categorize Teachers By Subjects
5. Last Words

Imagine that you are managing a school and you need to build a detailed list of your teachers, making sure all relevant information is included and clearly categorized by subject. This is exactly where this method becomes useful.

You can use this approach in many cases, for example, when building a summary page of study materials for students, where the resources are grouped by subject, or if you manage a restaurant and want to organize menu items into categories like appetizers, main courses, desserts, and more.

I use a teacher listing as an example. The page displays detailed information such as teachers’ names, subjects, and photos, and it can be categorized by subject.

Teachers are categorized by subjects

Video Version

Watch this video on YouTube

Before Getting Started

Since each teacher shares the same set of information, I’ll use a cloneable group to store their details. To display these groups and categorize them, I’ll create a template using MB Views.

So, I recommend that you use Meta Box AIO to have the framework for creating a template and custom fields. As well as the Meta Box extensions inside it provide you with advanced features, specifically:

MB Views: to create a page template for displaying the listings and categorize it.
MB Builder: to have a UI in the back end to create custom fields easily.
MB Group: to organize custom fields into groups.

Now, let’s go step by step.

Create Custom Fields for Teacher

First, create a new page for the teacher listing.

Create a new page for the teacher listing.

Next, go to Meta Box, Custom fields, and create a new field group for the teacher information.

First, add a Group field.

First, add a Group field.

Inside the group, add the subfield as the structure you want. Simply add a Text field for the name. And use a Select field for the subject. In the Choices section, input the options.

Add choices for the select field

Following this, add a Single Image field for the photo.

I set the group as cloneable to add more than one item for the teacher information.

Set the group as cloneable

After saving, move to the Settings tab, set the Location as Page, then select the page you created for the teachers.

Settings field

Now, go to the page editor then you will see all of the custom fields. Just enter information for each teacher, and click on the + Add more button to add other information for your needs.

Custom fields display in the post editor

Categorize Items in a Cloneable Group by Subfield Value

Display Items on the Page

Go to Meta Box > Views, and add a new view.

In the Template tab, besides adding code directly, you can use the Insert Fields to get data from the fields, then you can see the field group we need.

Insert fields to get data

Since it is a cloneable group, when you click on it, there’ll be a loop shown in the Template tab. Inside this loop, insert the subfield you want to get the value of as usual. And we have the code like this:

The code after inserting

After inserting all the fields you need, scroll down to the Settings section, choose the type of template as Singular, set the Location as Page, then select the page you created for the teachers' listing.

Set the location for the template

On the frontend, the page displayed all the teachers and their information.

Teacher information displays on the frontend

Next, we’ll style the page and categorize the teachers' list clearly by subject.

Categorize Teachers By Subjects

I use created template to add some code.

Add code to categorize items

Let’s break down the code.

First, I use the line {% set members = [] %} to create an empty array.

I modified the loop that displays teacher information.The loop here will go through the teachers listing.

Next, I create another empty array named grouped, which is used to organize teachers by subject.

Then, I add the part:

{% for member in members %}
    {% set subj = member.subject ?? 'Other' %}
    {% if grouped[subj] is not defined %}
        {% set grouped = grouped|merge({ (subj): [member] }) %}
    {% else %}
        {% set grouped = grouped|merge({ (subj): grouped[subj]|merge([member]) }) %}
    {% endif %}
{% endfor %}

It checks each teacher in the member list and places them into a group based on their subject. If a teacher does not have a matching subject, they are added to an “other” group. In addition, if a subject does not exist yet, a new group is created and the teacher is added to it. Otherwise, the teacher is simply added to the existing list for that subject.

The next step is to display teachers listing on the archive page:

<div class="teacher-wrapper">
    {% for subj, items in grouped %}
    <div class="subject-block">
        <h3 class="subject-heading">{{ subj }}</h3>
        <div class="teacher-grid">
            {% for item in items %}
                <div class="teacher-card">
                    {% if item.photo %}
                        <div class="teacher-thumb">
                            <img src="{{ item.photo }}" alt="{{ item.photo_alt }}">
                        </div>
                    {% endif %}
                    <div class="teacher-info">
                        <h4 class="teacher-name">{{ item.name }}</h4>
                             <p class="teacher-subject">{{ item.subject }}</p>
                         </div>
                    </div>
                {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

In there, we have two nested loops: the parent is to loop each subject and show its name as a heading. And, another one displays the teachers belonging to that subject, including their name, subject, and photo if available.

Next, move to the CSS tab and add code for styling.

Add CSS to style the page

You can refer to the code I use on GitHub.
And finally, we have a new look of the page, each subject is a separate block, and inside are the teacher cards for that subject.

The final result

Last Words

MB Views extension makes categorizing items in a cloneable group by subfield value an easy task. And your listing is clearer to overview and go to the category the reader wants. You can explore the power of this extension in this series. Thanks for reading!

Other series you might be interested in