# Display Grouped Posts

### In this example

We'll take a list of company employees, and display them in alphabetical order 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 *****Layout***

1. Click the **Add New** button to add a new *Layout and* Enter a **Name** for your *Layout*. 
2. Click the **Add Field** button in the Assign *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 *Layout*. 
4. Optional — Continue editing your *Layout*, 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 *****Post Selection***

1. Use the "Add new" button under 'Assigned to Post Selections' in the right sidebar of your Layout, or Simply go to the *Post Selections* top tab.
2. Click the Add New button to add a new *Post Selection*, enter a Name for your *Post Selection*.
3. On the General tab choose Sort by "Meta value", with the Sort by Meta Field Group the one containing the name field, 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 (Pro) and insert the function snippet below. Replace your field name for "last\_name".

```php
<?php
// ...
use Org\Wplake\Advanced_Views\Pro\Bridge\Cards\Custom_Card_Data;

return new class extends Custom_Card_Data {
    public function get_variables(): array
    {
        $post_ids = $this->get_default_variables()["_card"]['post_ids'] ?? [];
        $grouped_items = [];

        foreach ($post_ids as $post_id) {
           // declare the field to group by
            $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,
        ];
    }
// ...
}
```

5. Switch to the Template tab, and copy the Default template content into the Custom template field below it.

Modifying from line 5 -> 8.

<pre class="language-twig" data-overflow="wrap"><code class="lang-twig"><strong>// Card template example
</strong><strong>&#x3C;acf-card-684a9281e1bf1 class="{{ _card.classes }}acf-card acf-card--id--{{ _card.id }}">
</strong>
    {% if _card.post_ids %}
        &#x3C;div class="acf-card__items">
            {% for first_letter, post_ids in grouped_items %}
            {{ first_letter }}
            &#x3C;hr>
                {% for post_id in post_ids %}
                    [avf-layout id="{{ _card.view_id }}" object-id="{{ post_id }}"]
                {% endfor %}
            {% endfor %}
        &#x3C;/div>
    {% else %}
        &#x3C;div class="acf-post-selection__no-posts-message">
            {{ _card.no_posts_found_message }}
        &#x3C;/div>
    {% endif %}


&#x3C;/acf-card-684a9281e1bf1>
</code></pre>

6. Publish or Save your *Post Selection* and copy the shortcode into place.

Remember to create your posts and fill out some information in the fields.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wplake.gitbook.io/advanced-views/guides/display-grouped-posts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.