Taxonomy

The taxonomy field type (e.g. ACF Taxonomy field) works similar to the Post object field, but targeted on terms, allowing you to choose one or more taxonomy terms. By default, it displays title of the chosen items.

Displaying detailed information about terms (Pro)

Sometimes, instead of displaying the term as a link, you may need to display some fields of the selected term with your current Layout. With Advanced Views Pro, you can do this.

To display term details, follow these steps:

1. Install the Advanced Views Pro plugin, which allows you to customize the appearance of object fields.

2. Create the Primary Layout: Start by creating the main Layout. Choose the field Term (WordPress) Group, then the Field and publish to save your Layout.

3. Create a ‘Term Details’ Layout:

   This Layout will be responsible for displaying term details.

   In the Fields tab, assign the term fields you want to display, such as the Name and Description.

4. Publish the 'Term Details' Layout: After assigning the fields, save the 'Term Details' Layout.

5. Select the Field Layout:

   Go back to the primary (main) Layout.

   In the field row, select the Layout in the 'Field Layout' dropdown.

6. Save the Primary Layout: Save the main Layout to complete the setup.

7. Customize as Needed: Now, each chosen term in the Taxonomy field will be displayed according to the Layout chosen in the Field Layout. You can further customize the markup and add CSS styles as needed in the CSS & JS tab.

That's it! By following these steps, you can display detailed term information and have full control over the display and styling.

Use a Taxonomy field to 'categorize' content. Combine it with a Meta Filter (Pro) to query and display all items from a specific term.

Displaying items hierarchically (Pro)

By default, all the items displayed in the same order, in which were selected in the field. If your taxonomy supports hierarchy, and you want to reflect it on the front, you can group the items by the parent_id field.

See the Twig template example below.

<acf-view-65ae6721b4917 class="{{ _view.classes }}acf-view acf-view--id--{{ _view.id }} acf-view--object-id--{{ _view.object_id }}">

    {% if taxonomy.value %}
        <div class="acf-view__taxonomy">
            {% for term_item in taxonomy.value %}
                {% if 0 == term_item.parent_id %}
                    [acf_views view-id="{{ taxonomy.view_id }}" object-id="term" term-id="{{ term_item.value }}"]

                    {% set children = [] %}

                    {% for inner_term_item in taxonomy.value %}
                        {% if term_item.value == inner_term_item.parent_id %}
                            {% set children = children|merge([inner_term_item]) %}
                        {% endif %}
                    {% endfor %}

                    {% if children %}
                        <div class="children">
                            {% for child_term_item in children %}
                                [acf_views view-id="{{ taxonomy.view_id }}" object-id="term" term-id="{{ child_term_item.value }}"]
                            {% endfor %}
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}

</acf-view-65ae6721b4917>

Note: the template above expects that you've filled the Field Layout setting to get the detailed item information, but you can use the same approach with utilizing the 'parent_id' field even when you display items just as links.

Displaying terms in a slider (Pro)

Advanced Views comes with a set of pre-configured JS libraries, so you can easily turn the term items into a slider. Before activating the slider feature, read the 'displaying term details' section to learn how to setup the details look for each item.

Note: The Slider option is available only for Taxonomy fields that support multiple values. If the Taxonomy field’s appearance setting is configured to disallow multiple selections, the Slider option will not appear in the field settings.

After adding the Taxonomy field to the target Layout, change the 'Enable Slider' option to 'Splide v4' and Save. It'll automatically change the field markup to incorporate the necessary classes, and add the default JS instance:

var term_items = this.querySelector('.acf-view__terms');
if (term_items) {
	/* https://splidejs.com/guides/options/ */
	new Splide(term_items, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

You can customize it according to your needs, using any available Splide options.