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)

Displaying a simple term link is minimalist, but in many cases, you may want to show more details about the selected term(s). For example, besides the term's name, you might also want to display their description, and image, with the image being an ACF Image field attached to the term.

Example of the detailed WP term display: name (wp), description(wp), estimated workload (ACF), and image (ACF).

To display term details, follow these steps:

1. Use the AVF Pro Edition: Ensure you have the AVF Pro edition, which allows you to customize the appearance of object fields.

2. Create the Primary View: Start by creating the main View, which will act as the master View. Choose the target taxonomy field as save the View.

3. Create a ‘Term Details’ View:

   This View will be responsible for displaying term details.

   In the Fields tab, select the term fields you want to display, such as the description and image (an ACF Image field).

4. Save the 'Term Details' View: After setting up the fields, save the 'Term Details' View.

5. Link the Views:

   Go back to the primary (master) View.

   In the Taxonomy field settings, select the 'Term Details' View in the 'View' setting.

6. Save the Master View: Save the master View to complete the setup.

7. Customize as Needed: Now, each chosen term in the Taxonomy field will be displayed according to the 'Term Details' View. You can further customize the markup and add CSS styles as needed.

That's it! By following these steps, you can display detailed term information and have full control over the layout 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 View 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)

AVF 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 View, change the 'Enable Slider' option to 'Splide v4' and press the Save button. 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.