Add dynamic color to taxonomy labels (Elementor + ACF)

Introduction

Creating a visual distinction among various groups of loop items can significantly improve the user experience on your website. This tutorial will guide you on how to add coloured labels to your loop grids. Their taxonomy term will serve as the basis for the labels. This can be especially useful to distinguish between free and paid courses. It can also help to differentiate between different tiers of premium services that your company offers.

This tutorial uses Elementor Pro, Advanced Custom Fields (ACF), and a code snippets plugin or child theme. Elementor provides a range of features. These include flexbox containers, loop grids, loop carousels, and taxonomy filters. However, there’s room for improvement, especially in expanding the dynamic tags.

In this tutorial, we’ll use Elementor Pro to create the loop grid. We’ll use ACF to create the custom post type (CPT) and custom taxonomy. We’ll also use ACF to create the colour picker meta field for the taxonomy label colour.

Check out the tutorial video and share your thoughts in the comment section below.

PHP Code Snippet

Below is the PHP snippet used to create the [cat-color] shortcode. It dynamically retrieves the colour meta field “resource-type-color” within the custom taxonomy “resource-type” for the current post:

function cat_color_shortcode() {
    global $post;
    $post_id = $post->ID;
    $term_list = wp_get_post_terms($post_id, 'resource-type', array('fields' => 'ids'));
    $term_id = (int)$term_list[0];
    $color = get_field('resource-type-color', 'term_'.$term_id);
    if($color) {
        return $color;
    } else {
        return '';
    }
}
add_shortcode('cat-color', 'cat_color_shortcode');

Updated PHP Code Snippet

Below is an improved PHP Snippet. It is more customisable and useful when you want to display many term meta fields on your page. The syntax for the shortcode is [dd-term-meta tax="your-taxonomy-name" field="your-term-meta-field"]. Use the shortcode widget or the shortcode dynamic tag to add the term meta field to your page.

<?php
function dd_term_meta_shortcode($atts) {
    // Extract shortcode attributes
    $atts = shortcode_atts(
        array(
            'tax'   => 'category',          // Default taxonomy
            'field' => '',    // Default field
        ),
        $atts,
        'dd-term-meta'
    );

    global $post;
    $post_id = $post->ID;

    // Taxonomy Info
    $dd_taxonomy_slug = sanitize_text_field($atts['tax']);
    $dd_term_meta_field = sanitize_text_field($atts['field']);

    // Get an array of term IDs
    $term_list = wp_get_post_terms($post_id, $dd_taxonomy_slug, array('fields' => 'ids'));

    // Check if there are terms
    if (!empty($term_list)) {
        $term_id = (int) $term_list[0];

        // Get term meta using ACF
        $dd_term_meta = get_field($dd_term_meta_field, 'term_' . $term_id);

        // Check if term meta exists
        if ($dd_term_meta) {
            return $dd_term_meta;
        } else {
            return '';
        }
    }

    return '';
}

add_shortcode('dd-term-meta', 'dd_term_meta_shortcode');

Adding the shortcode as custom attribute

Elementor does not yet offer the option to use a shortcode as a dynamic tag for the background colour. Unfortunately. To overcome this limitation, we’ll use the Custom Attribute instead. Follow the steps below:

1. Navigate to the Advanced Tab of the required heading widget.
2. In the “Attributes” accordion, click on the dynamic tag icon.
3. Choose the “Shortcode” dynamic tag, and click on the wrench icon.
4. Insert the shortcode [cat-color] under the Settings accordion.
5. Under the Advanced Accordion, in the “Before” input, add the following code: style|background-color:
6. Save and exit.

If you’ve followed these steps correctly, you’ll successfully apply coloured labels to your loop grid.