Archived topic
Tag cloud font size not working
7 replies · Started by Rachel on December 16, 2021
I'm using the built-in Tag Cloud block/function, and I want the font sizes to vary based on the number of posts with that tag.
I tried simply setting the font size with CSS, but it makes all the terms the same size.
I tried (using the Tag Cloud block inside of a GP Block-Hook Element) adding the filter hook code below (using the Code Snippets plugin), and it works for the largest size, but does not affect the smallest size.
add_filter('widget_tag_cloud_args','set_tag_cloud_sizes');
function set_tag_cloud_sizes($args) {
$args = array(
'smallest' => 1,
'largest' => 2,
'unit' => 'em'
);
return $args;
}I have tried using a Hook Element with the code below, and I end up with half of the code displaying on the front end.
<?php
$tags = get_terms('post_tags')
$args = array(
'smallest' => 1,
'largest' => 2,
'unit' => 'em',
'number' => 0
);
wp_generate_tag_cloud( $tags, $args );
?>I even tried setting the sizes with 'px' and 'pt' instead of 'em' with no success.
Any advice on how I can properly set the tag cloud font sizes?
Hi Rachel,
Can you let us have a look at the page w/ the tag cloud? To inspect it and have a clearer idea if something's overriding the sizes.
Hey Elvin, I put the link in the private info - its a work in progress :)
Hmm I don't believe this is a theme issue but let's test.
Does the tag cloud block and code works if you add it in a page/post content instead of a block element?
If not does the method work in a Twenty series WP theme environment?
Let me know :)
Hi Leo,
I tried the Tag Cloud in regular content of a page, and with the Twenty Twenty theme, and it still didn't work.
So that means this is an issue with the Tag Cloud block itself, not something to do with GeneratePress?
Yeah that means this filter widget_tag_cloud_args isn't actually working.
You can check with WordPress' support team and see if they are able to comment :)
Thank you for your help Leo!
I did some more googling, and I found other complaints about that filter not working, but no alternatives or solutions.
Finally came across this hack-y solution using the inline style for the CSS selector:
.tag-cloud-link[style*=": 8"] { font-size: 1em !important; }
Thought I'd post it just in case someone comes across this question in the future!
Thanks for sharing!
