Navy Road

Tag Cloud Widget

This widget displays your categories, each weighted by how many posts have been added to it. You can control how tags appear through CSS style rules. You may also control the optional widget title.

Download the widget here: nrs_tag_cloud.zip

Unzip the download, and upload the “nrs_tag_cloud” folder to your plugins directory. Activate the plugin. Then, add the widget to one of your sidebars. Once the widget is added, you can control the title. Read on for help with styling the result.

How to Make It Look Like A Tag Cloud

The categories are displayed in an unordered list (<ul>) in alphabetical order. Therefore, unstyled, it will look like a plain-jane list; you have to apply some style rules, for example, having the <ul> and <li> tags display inline. See below for a complete working example.

ach category is in a list item (<li>) tag. Each <li> tag is given a CSS class corresponding to the category’s weight, from “nrs-tag-cloud-weight-0″ to “nrs-tag-cloud-weight-10″…

• nrs-tag-cloud-weight-0 is used for categories that have no posts in them (this is possible when a post is categorized in a child category, but not the parent category.)
• nrs-tag-cloud-weight-1 is used for categories that have the fewest posts.
• nrs-tag-cloud-weight-10 is used for categories that have the most posts.

CSS Style Example

Since the widget outputs a basic, alphabetized list (<ul>), you have to add some styles to your style sheet in order for it to look like a tag cloud. Here’s an example:

/* set the base font-size and remove list styling for the
<ul> with the id nrs-tag-cloud-list */
ul#nrs-tag-cloud-list{font-size: .7em;display: inline;list-style:none;margin: 0px;padding:0px;}
/* the li tags... */
li.nrs-tag-cloud-item {display: inline;list-style:none;margin: 0px 5px;padding:0px;}
li.nrs-tag-cloud-item a {text-decoration:none}
/* different font-sizes for each weight...*/
.nrs-tag-cloud-weight-10 {font-size: 2em;}
.nrs-tag-cloud-weight-9 {font-size: 1.9em;}
.nrs-tag-cloud-weight-8 {font-size: 1.8em;}
.nrs-tag-cloud-weight-7 {font-size: 1.7em;}
.nrs-tag-cloud-weight-6 {font-size: 1.6em;}
.nrs-tag-cloud-weight-5 {font-size: 1.5em;}
.nrs-tag-cloud-weight-4 {font-size: 1.4em;}
.nrs-tag-cloud-weight-3 {font-size: 1.3em;}
.nrs-tag-cloud-weight-2 {font-size: 1.2em;}
.nrs-tag-cloud-weight-1 {font-size: 1.1em;}
.nrs-tag-cloud-weight-0 {font-size: 1.0em;}