Adding CSS Class name to Post Tags

add_filter( 'term_links-post_tag', 'paulc_add_custom_class' );
function paulc_add_custom_class( $links ) {
	$new_links = array();
	foreach ( $links as $link ) {
		preg_match( "|<a.*[^>]*>([^<]*)</a>|i", $link, $matches );
		$class = strtolower( $matches[1] );
		$link = str_replace( 'rel="tag"', 'class="' . str_replace( " ", "-", $class ) . '" rel="tag"', $link );
		$new_links[] = $link;
	}
	
	return $new_links;
}

add_filter( 'term_links-post_tag', 'paulc_add_custom_class' );

function paulc_add_custom_class( $links ) {

$new_links = array();

foreach ( $links as $link ) {

preg_match( "|<a.*[^>]*>([^<]*)</a>|i", $link, $matches );

$class = strtolower( $matches[1] );

$link = str_replace( 'rel="tag"', 'class="' . str_replace( " ", "-", $class ) . '" rel="tag"', $link );

$new_links[] = $link;

}

return $new_links;

}

Simply add the above code into the functions.php file of your active theme. It will add the tag slug to class parameter of anchor tag.

Comments

Jack says

August 3, 2019 at 4:19 pm

It looks good but cannot be used for all cases. In some case the class is invalid because the term itself has character such as “/”. The best way should be get Slug of the term and use it as class.

- Paul says
  
  August 3, 2019 at 4:48 pm
  
  Just replace this part in the code
  
  PHP
  
  str_replace( " ", "-", $class )
  
  1
  
  str_replace( " ", "-", $class )
  
  WITH
  
  PHP
  
  str_replace( array(" ", "/"), "-", $class )
  
  1
  
  str_replace( array(" ", "/"), "-", $class )
  
  - Jack says
    
    August 7, 2019 at 9:56 am
    
    Thanks, it solved the case. Just an idea, but can the solution be expand to category and custom taxonomy?
    
    Thanks.

Reader Interactions

Comments

Leave a Reply Cancel reply

Search Tutorials