tag cloud

I know that inline styles are bad for accessibility reasons, because it can prevent people from resizing the text size using their browser stylesheets.

I went looking for the CSS you mentioned the theme is using and I couldn’t see it: https://themes.svn.www.ads-software.com/twentyseventeen/1.4/style.css

Can you point to where this CSS exists if not the style.css file?

Since 4.9 has essentially removed the inline styles (all are 1em) it isn’t necessary to override them, therefore, I assume, it has been removed.
Was .widget .tagcloud a
4.9
ul.wp-tag-cloud li a.tag-cloud-link

Btw, without the tag count, what makes this a “cloud” now? It’s nothing but a list floated left isn’t it?
I can choose to show the count and then, talk about accessibility, I now have to read the list to determine the count instead of seeing it visually defined. It’s like making all headings the same font size! Also, adding (x) to the end of the tag doesn’t help my zip code tags, for instance!

What was producing the different inline styles based on tag count before 4.9? Is there some function I can bring back to my child theme? Or something I could modify to assign a class based on the count? It’s beyond my capability to create these, modify maybe.

I keep using the term 4.9 and should be using 1.4, I guess.

I think it would be much easier if you could show us your website with the tags. Not providing a link to your site is a huge barrier to us providing support.

Here is the issue as plainly as I can show it.
Tag cloud li stripped of href and classes

Theme: Twenty Fourteen and Twenty Seventeen prior to 1.4

.<(li)>.<(a) style="font-size: 8pt;" aria-label="80207 (1 item)">80207</a>.<(/li)>
.<(li)>.<(a)  style="font-size: 16.4pt;" aria-label="80209 (2 items)">80209</a>.<(/li)>
.<(li)>.<(a)  style="font-size: 22pt;" aria-label="80206 (3 items)">80206</a>.<(/li)>

Theme: Twenty Seventeen 1.4 – Show count

.<(li)><(a) style="font-size: 1em;" aria-label="80205 (1 item)">80205<span class="tag-link-count"> (1)</span></a>.<(/li)>
.<(li)>.<(a) style="font-size: 1em;" aria-label="80227 (2 items)">80227<span class="tag-link-count"> (2)</span></a>.<(/li)>
.<(li)>.<(a) style="font-size: 1em;" aria-label="80206 (3 items)">80206<span class="tag-link-count"> (3)</span></a>.<(/li)>
don't show count
.<(li)>.<(a) style="font-size: 1em;">80205</a>.<(/li)>

I tried to use the aria-label items as a selector with no success.

• This reply was modified 7 years ago by skyspec.
• This reply was modified 7 years ago by skyspec.
• This reply was modified 7 years ago by skyspec.
• This reply was modified 7 years ago by Jan Dembowski.

https://blog.skyspec.com/
To see what 1.4 does to our twenty fourteen site I’m converting to twenty seventeen
If you inspect a link in a tag cloud and find:

a, .content-sidebar .widget a {
    color: #008888;
}

then add

font-size: 1em !important;

a, .content-sidebar .widget a {
    color: #007272;
    font-size: 1em !important;
}

twenty seventeen adds a border and padding. These can be styled.

• This reply was modified 7 years ago by Jan Dembowski.

I can’t replicate the problem on your site; https://snag.gy/7mrtoR.jpg

All the tags look like they’re properly sized there. Or is it a different place you’re referring to?

You can’t change the font size for all .widget a to 1em?

That site is Twenty Fourteen. All are sized there according to the count, but 1.4 sets the font size for all to 1em, and as far as I’m concerned, that is not properly displayed. If there is no variation according to tag count, then it is nothing but a list–not a tag cloud.

Function Reference/wp tag cloud:
Description
The wp_tag_cloud() function displays a list of tags in what is called a ‘tag cloud’, where the size of each tag is determined by how many times that particular tag has been assigned to posts.

How can I change the font size according to the tag count in Twenty Seventeen 1.4?

The wp_tag_cloud did not change. It does not do 1em for everything like you are suggesting. It still works exactly the same and does it using the pt sizes.

Basically, we are confused as to what you are reporting here. What you are saying doesn’t make sense, and 4.9 didn’t change anything.

The site you linked to above has all the tags at different sizes. It looks like a normal tag cloud to me, in my browser.

What are you actually seeing? Where can we see it too? Please help us to help you by describing the problem you are experiencing, because we cannot duplicate your results.

Hey @skyspec,

Maybe the behavior you are after can be achieved with this filter function. Add it to your functions.php file of your theme and it should size tags accordingly between the largest and smallest size stated based on the weight the tag has in the cloud.

if ( ! function_exists( 'prefix_custom_tag_cloud_widget' ) ) {
	/**
	 * Custom tagcloud tweaks
	 *
	 * @param  array $args 	Array of args already passed to tagcloud widget.
	 *
	 * @return array 		Updated array with more args appended or udpated.
	 */
	function prefix_custom_tag_cloud_widget( $args ) {
		$args['largest'] = 21;
		$args['smallest'] = 14;
		$args['unit'] = 'px';
		return $args;
	}
}
add_filter( 'widget_tag_cloud_args', 'prefix_custom_tag_cloud_widget' );

• This reply was modified 7 years ago by williampatton. Reason: code formating
• This reply was modified 7 years ago by williampatton.

No change at all.

I found the tag cloud function in category-template.php where it passes the args you used above (it uses 22 and 8 respectively) and runs them through some formulas based on min/max count to generate the intermediate font sizes.

I have not been able to find what turns this off.

https://test.skyspec.com/blog/

OHHH, I get it now. Yes, okay. Twenty Seventeen modifies the tag cloud to have everything at 1 em.

You can disable this in a plugin or in a child theme by using this code:

add_action('after_setup_theme', 'restore_tag_cloud');
function restore_tag_cloud() {
   remove_filter( 'widget_tag_cloud_args', 'twentyseventeen_widget_tag_cloud_args' );
}

That will disable the override added by the theme.

• This reply was modified 7 years ago by Samuel Wood (Otto). Reason: Modified to be in the after_setup_theme hook

EDIT: or yeah just do what otto says, that’s easier method ??

Hey @skyspec,

Did you place the code at the start or at the end of the functions.php file?

TwentySeventeen theme adds it’s own version of this function to the theme which sets the sizes to be 1em for largest and smallest values.

The filter function I posted above needs to run after that function. You can make that happen by placing the function at the end of the file, or by setting a priority that puts it later in the firing than 10 in the add_filter() call like so:

add_filter( 'widget_tag_cloud_args', 'prefix_custom_tag_cloud_widget', 20 );

I’ve just tested and confirmed both methods work with WP v4.9 and TwentySeventeen v1.4.

• This reply was modified 7 years ago by williampatton.

Yeah, best to do that in a plugin or something, so that updating your theme version won’t overwrite your modifications.