Display WordPress and WooCommerce Tags as Lists

Share this!

WordPress tag widgets display tags in a tag cloud by default. Here’s how to override that default behavior; specifically, how to display WordPress and WooCommerce tags as lists.

For the Standard WordPress Tag Cloud Widget

tag-cloud-problem
Since WordPress 4.4, the functioning of the widget_tag_cloud_args filter hook (see here) changed in a way that I cannot adequately explain. However, what I do know is that the addition of the 'echo' => false argument somehow (counterintuitively, if you ask me) removed all the structural wrappers of the tag cloud unless one explicitly set the value of the 'echo' argument to false.

The short answer is that without passing 'echo' => false to the filter, the result is (in WordPress 4.4+) that your tag cloud (or list) will hug the left margin of the sidebar (and any title you enter in the widget will not appear). This is because the tag listing is being echoed, rather than returned for processing. Again, I wish I understood why. If you can explain this, please comment below.

The code snippet should be added to your theme’s (or child theme’s) functions.php or in a plugin. I tend to put these in a file in the mu-plugins folder.

Version One:

This version works. Note the added 'echo' => false line.

add_filter('widget_tag_cloud_args','nwb_tag_cloud_filter');
function nwb_tag_cloud_filter($args) {
	$args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'unit' => 'px', 
		'echo' => false, 
		);
	return $args;
}

Version Two:

This version, offered by afainu in the WordPress support forums, also works and may be preferable. That’s because it uses WordPress’ enhanced version of array_merge(), thus maintaining, rather than overwriting, the defaults.

add_filter('widget_tag_cloud_args','nwb_tag_cloud_filter');
function nwb_tag_cloud_filter($args) {
	$my_args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'unit' => 'px', 
		);
	$args = wp_parse_args( $args, $my_args );
	return $args;
}

For the WooCommerce Product Tags Widget

To convert the WooCommerce Product Tags Widget display from tag cloud to list, use something like this. The key here is the taxonomy argument, whose value must correspond to the slug for the WooCommerce product tag (‘product_tag’, by default).

add_filter('woocommerce_product_tag_cloud_widget_args', 'nwb_woo_tag_cloud_filter');
function nwb_woo_tag_cloud_filter($args) {
	$args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'taxonomy' => 'product_tag', 
		'unit' => 'px', 
		);
	return $args;
}
Share this!

About JeffCohan.com

The nSiteful Tech Blog (the official blog of nSiteful Web Builders, Inc. since January of 2013) is where I (Jeff Cohan) and (occasionally) associates will be posting articles of potential interest to like-minded techies, nSiteful clients who are playing active roles in the maintenance of their own Web sites and blogs, and pretty much anyone interested in how Web strategies and tools can help them reach their goals.

This entry was posted in Snippets and tagged , , by Jeff Cohan. Bookmark the permalink.

About Jeff Cohan

Jeff and his wife, Margie, are the proud parents of Sarah and Jake. Jeff is the founder, president and chief cook and bottle washer of nSiteful Web Builders, Inc., a Web development and Internet Consulting firm. In his spare time, Jeff builds Web sites and Web applications, plays guitar, putters around in his basement woodworking shop, mercilessly spoils his grandchildren, and creates videos from more than two decades of home movies. His current video project is an extended montage of people (mainly family members) asking him to stop filming them.

Leave a Reply

Your email address will not be published. Required fields are marked *