{"id":102,"date":"2012-01-02T07:18:06","date_gmt":"2012-01-02T07:18:06","guid":{"rendered":"http:\/\/katrina-morris.com\/blog\/?p=102"},"modified":"2012-01-02T08:03:09","modified_gmt":"2012-01-02T08:03:09","slug":"pretty-er-default-wordpress-tagcloud","status":"publish","type":"post","link":"https:\/\/katrina-morris.com\/home\/pretty-er-default-wordpress-tagcloud\/","title":{"rendered":"Pretty (er) default wordpress tagcloud"},"content":{"rendered":"<p>I decided that I wanted a tag cloud tonight, but as usual, was not super excited about the default formatting of the widget that comes installed with wordpress. I also didn&#8217;t want to futz around with a plugin. I just wanted to change the font, sizing and spacing of the tags. Easy, right? Just change it with css, right? Not so much.<\/p>\n<p>Turns out that the default minimum and maximum sizes of the tags is initiated in the wp_tag_cloud() function in the wordpress core. Yeah. I&#8217;m not changing that. Thanks. However, I did find an article by a super smart person who said you could apply a filter in your child&#8217;s functions file. Guess what? You can! <a title=\"customize the wordpress tag cloud widget\" href=\"http:\/\/theme.fm\/2011\/07\/how-to-customize-the-wordpress-tag-cloud-widget-1045\/\" target=\"_blank\">Here&#8217;s the article over at theme.fm<\/a>.<\/p>\n<p>There are several options you can use in the filter, including sorting order, number of tags and separator. <a title=\"wordpress tag cloud widget codex\" href=\"http:\/\/codex.wordpress.org\/Function_Reference\/wp_tag_cloud\" target=\"_blank\">Here&#8217;s the codex<\/a>.<\/p>\n<p>There&#8217;s also another really smart person over at <a title=\"customize your wordpress tag cloud\" href=\"http:\/\/betterwp.net\/22-customize-your-wordpress-tag-cloud\/\" target=\"_blank\">betterWP.net who had a really good argument about using &#8217;em&#8217; as the unit size<\/a>. Read the part under the heading &#8216;Choosing a Font Unit&#8217;. Pretty clever. It didn&#8217;t suit me, but I thought it had merit.<\/p>\n<p>Once I got the sizing I wanted, all I had to do was change the font face, line height and link color. That whole big block of words all in the same bright color was really distracting to me. So I added the following css to my child style.css file:<\/p>\n<p><a href=\"https:\/\/katrina-morris.com\/blog\/wp-content\/uploads\/2012\/01\/tag-cloud-css.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-103\" title=\"tag-cloud-css\" src=\"https:\/\/katrina-morris.com\/blog\/wp-content\/uploads\/2012\/01\/tag-cloud-css.png\" alt=\"wordpress tag cloud css\" width=\"600\" height=\"203\" srcset=\"https:\/\/katrina-morris.com\/wp-content\/uploads\/2012\/01\/tag-cloud-css.png 600w, https:\/\/katrina-morris.com\/wp-content\/uploads\/2012\/01\/tag-cloud-css-300x101.png 300w, https:\/\/katrina-morris.com\/wp-content\/uploads\/2012\/01\/tag-cloud-css-500x169.png 500w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>And here&#8217;s the end result:<\/p>\n<p><a href=\"https:\/\/katrina-morris.com\/blog\/wp-content\/uploads\/2012\/01\/tag-cloud1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-115\" title=\"tag-cloud\" src=\"https:\/\/katrina-morris.com\/blog\/wp-content\/uploads\/2012\/01\/tag-cloud1.png\" alt=\"customized wordpress tag cloud widget\" width=\"612\" height=\"350\" srcset=\"https:\/\/katrina-morris.com\/wp-content\/uploads\/2012\/01\/tag-cloud1.png 612w, https:\/\/katrina-morris.com\/wp-content\/uploads\/2012\/01\/tag-cloud1-600x343.png 600w, https:\/\/katrina-morris.com\/wp-content\/uploads\/2012\/01\/tag-cloud1-300x171.png 300w, https:\/\/katrina-morris.com\/wp-content\/uploads\/2012\/01\/tag-cloud1-500x285.png 500w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/a><\/p>\n<p>Nothing fancy, but a little prettier.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I decided that I wanted a tag cloud tonight, but as usual, was not super excited about the default formatting of the widget that comes installed with wordpress. I also&#8230;<\/p>\n","protected":false},"author":1,"featured_media":115,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[36,34],"class_list":{"0":"post-102","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress-tinkering","8":"tag-tag-cloud","9":"tag-wordpress-themes"},"_links":{"self":[{"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":7,"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/posts\/102\/revisions\/106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/media\/115"}],"wp:attachment":[{"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/katrina-morris.com\/home\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}