Skip Navigation

[Resolved] Adding slug-based CSS class to each link to taxonomy term archive in a template

This support ticket is created 3 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 1 reply, has 2 voices.

Last updated by Waqar 3 years, 1 month ago.

Assisted by: Waqar.

Author
Posts
#2254321

In a content template, I want to add a CSS class in each taxonomy term hyperlink based on the slug for that taxonomy term.
(In short, these classes will ensure each taxonomy link is its own color on my site.)

[On a much older version of this site, I used something like this PHP...
-=-=-=-=-=-=-=-=-=-=-
function custom_category_styles() {
if ( $categories_list )
{
/* list of categories. */
foreach((get_the_category()) as $cat)
{
echo 'category_nicename . '" href="hidden link' . $cat->cat_ID . '">' . $cat->cat_name . ' • ';
};
};
-=-=-=-=-=-=-=-=-=-=-
...but I don't know how to apply it to toolset taxonomies, and I don't know where to put this code so that it will apply to my content template.

I found this documentation, but I don't know the best approach to take:
https://toolset.com/documentation/customizing-sites-using-php/
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/
https://toolset.com/forums/topic/css-for-taxonomy/
https://toolset.com/documentation/programmer-reference/adding-custom-code/using-toolset-to-add-custom-code/

I'm very new to Toolset, so I don't know where to start.

The link to my site is:
hidden link

#2254655

Hi,

Thank you for contacting us and I'd be happy to assist.

As there is no built-in block available to create a custom list of attached terms with the slugs used as the class names, you can register a custom shortcode for this.

For example:


function custom_attached_term_links_func( $atts ) {
	$a = shortcode_atts( array(
		'id' => get_the_ID(),
		'tax' => '',
		'separator' => ', ',
	), $atts );

	if( !empty($a['tax']) ) {
		$terms = get_the_terms( $a['id'], $a['tax'] );
		
		if ( $terms && ! is_wp_error( $terms ) ) {
			$term_link_output = array();
			foreach ( $terms as $term ) {
				$term_link = esc_url(get_term_link( $term ));
				$term_slug = $term->slug;
				$term_name = esc_html($term->name);
				$term_link_output[] = '<a class="'.$term_slug.'" href="'.$term_link.'">'.$term_name.'</a>';
			}
			return implode($a['separator'], $term_link_output);
		}
	}
}
add_shortcode( 'custom-attached-term-links', 'custom_attached_term_links_func' );

Note: The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

This new shortcode "custom-attached-term-links" can be included in the content template or views, through the "Shortcode" or "Fields and Text" block and it accepts 3 attributes:

1. id: by default, the shortcode will get the terms from the current post, but if you need to get the terms from a different post, you can pass its numeric ID, through this attribute.

2. tax: in this attribute you'll pass the slug of the taxonomy from which you'd like to get the terms.

3. separator: by default, the shortcode will separate each term link with a comma (, ), but to use a different separator, you can pass it through this attribute.

Usage examples:


// get terms from taxonomy with slug "book-category" which are attached to the current post, separated by default "," 
[custom-attached-term-links tax="book-category"]

// get terms from taxonomy with slug "book-category" which are attached to the post with ID "123", separated by " | "
[custom-attached-term-links id="123" tax="book-category" separator=" | "]

I hope this helps and please let me know if you need any further assistance around this.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar