Introduction
Creating a visual distinction between different groups of loop items can significantly enhance the user experience on your website. This tutorial will guide you on how to add coloured labels to your loop grids, using their taxonomy term as the basis for the labels. This technique can be particularly useful for distinguishing between free and paid courses, or for differentiating between various tiers of premium services offered by your company.
This tutorial uses Elementor Pro, ACF, and either a code snippets plugin or a child theme. Elementor provides a range of powerful features, including flexbox containers, loop grids, loop carousels, and taxonomy filters. However, there is room for improvement, particularly in expanding the dynamic tags functionality.
In this tutorial, we’ll use Elementor Pro
to create the loop grid, ACF to create the custom post type (CPT) and custom taxonomy, and ACF to add a 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:
- Navigate to the Advanced Tab of the required heading widget.
- In the “Attributes” accordion, click on the dynamic tag icon.
- Choose the “Shortcode” dynamic tag, and click on the wrench icon.
- Insert the shortcode
[cat-color]under the Settings accordion. - Under the Advanced Accordion, in the “Before” input, add the following code:
style|background-color: - Save and exit.
If you’ve followed these steps correctly, you’ll successfully apply coloured labels to your loop grid.
Leave a Reply