How to Change the WordPress Tag Cloud Dimensions

Use CSS to change the width and height of the tag cloud.

Tag clouds list every tag on your WordPress blog in a way that makes common tags appear in large fonts and less common tags appear in small fonts. WordPress comes with a built-in tag cloud widget simply titled "Tag Cloud." This widget generates a DIV with an ID of "tagcloud," so you can use that to write Cascading Style Sheet, or CSS, code to change the tag cloud dimensions. You can set a width, height, minimum height or a combination of any of the three.

Instructions

1. Navigate to the wp-admin directory of your website and log in to the WordPress dashboard.

2. Click "Appearance" in the left-hand menu of the dashboard and click "Editor" to load the "Edit Themes" screen. Find style.css file listed under "Templates" and click on its link to load it in the editing box.

3. Add this line to the bottom of the code in your style.css file:

   #tagcloud {

   width: XXpx;

   height: XXpx;

   }

   Replace "XX" with the width or height in pixels. Be careful when setting the height because you might cut off some tags. You can leave that line of code out if you do not need a specific height. Set "min-height" if you want the box to grow in size as needed but take up a minimum amount of vertical space.

4. Click the blue "Update File" button to save your changes. Check your website in the browser to make sure the tag cloud looks right with its new dimensions. Try removing "height: XXpx" if there is a problem.

Tips & Warnings

• To check if a line of CSS code is causing problems, wrap it in comment marks like this: /* height: XXpx; */. Save the file and check the website again.

• Back up your style.css file before editing.