Display Grouped Posts

An Advanced Guide for Pro users to help them through step-by-step on how to display lists of information grouped by a field.

In this example

We'll take a list of company employees, and display them in an alphabetical ordered list with the Last name in Ascending order, and include a line with first letter of the last name.

Step by step guide

1. First create your Field Group with the fields, in our case it's text fields for Last Name and First Name assigned to a Custom Post Type (CPT) called Employees.

2. Visit the Advanced Views tab in WordPress backend.

Create your View

1. Click the Add New button to add a new View and Enter a Name for your View.

2. Click the Add Field button in the Fields section. Then select the target Group from the list and the Field from the dropdown. Continue to Add Fields until they've all been assigned. in our case we're only adding two fields, Last Name and First Name.

3. Click on the Publish button to save and publish your View.

4. Optional — Continue editing your View, switch to the Template tab and copy the Default Template into the Custom Template field, add in a comma, so names are displayed nicely. e.g. Doe, John

Create your Card

1. Use the "Create card" link in the right sidebar of your View, or Simply go to Card top tab.

2. Click the Add New button to add a new Card, enter a Name for your Card.

3. On the General tab you should choose Sort by "Meta value", with the Sort by Meta Field Group to the one containing the name fields, in our case it's 'Employee (Names)'. Select Sort by Meta Field and the field of your choice, in our case it is 'Last Name (text)' with Sort order "Ascending" i.e. alphabetical.

4. Switch to Advanced tab and scroll down to Custom Data and insert the function snippet below. Replace your field name for "last_name".

// declare the field to group by
public function get_variables(): array
    {
        $post_ids = $this->get_default_variables()["_card"]['post_ids'] ?? [];
        $grouped_items = [];

        foreach ($post_ids as $post_id) {
            $last_name = get_field('last_name', $post_id);

            $first_letter = mb_strlen($last_name) > 0
            ? mb_substr($last_name, 0, 1, "UTF-8")
            : "";

        
            if (! key_exists($first_letter, $grouped_items)) {
                $grouped_items[$first_letter] = [];
            }

            
            $grouped_items[$first_letter][] = $post_id;
        }

        return [
            "grouped_items" => $grouped_items,
        ];
    }
//

1. Switch to the Template tab, and copy the default template into the Custom template field below it.

Modifying from line 5 -> 8.

// Card template example
<acf-card-684a9281e1bf1 class="{{ _card.classes }}acf-card acf-card--id--{{ _card.id }}">

    {% if _card.post_ids %}
        <div class="acf-card__items">
            {% for first_letter, post_ids in grouped_items %}
            {{ first_letter }}
            <hr>
                {% for post_id in post_ids %}
                    [avf_view view-id="{{ _card.view_id }}" object-id="{{ post_id }}"]
                {% endfor %}
            {% endfor %}
        </div>
    {% else %}
        <div class="acf-card__no-posts-message">
            {{ _card.no_posts_found_message }}
        </div>
    {% endif %}


</acf-card-684a9281e1bf1>

1. Publish or Save your Card and copy the shortcode into place.

Remember to fill out some information and create your posts.