WordPress.org

Plugin Directory

Test out the new Plugin Directory and let us know what you think.

WP Category Tag Cloud

Display a configurable 2D or 3D cloud of tags, categories or any other taxonomy filtered by tags or categories.

How can I contact you with a complaint, a question or a suggestion?

Please use the support forum on wordpress.org or send an email to henri.benoit@gmail.com

How can I display a term cloud in a page or a post?

You can use the showtagcloud short code.

Syntax: [showtagcloud options...]

Options:

  • taxonomy: the taxonomy to be displayed e.g. post_tag, category...
  • exclude: comma separated list of term IDs not to be displayed
  • number: max number of terms to be displayed
  • order_by: field by which to sort the terms in the tag. Should be "name" or "count"
  • order: how to sort. Should be ASC, DESC or RAND (resp. ascending, descending or random)
  • format: rendering type. "flat" for "Separated by whitespace", <option selected="selected" value="price" for "Price tags", "bars" for "Bars", "rounded" for "Rounded corners", "list" for "UL with a class of wp-tag-cloud", "array" for "3D HTML5 Cloud"
  • tag_id: a comma separated list of tag IDs
  • category_id: a comma separated list of category IDs
  • child_categories: set to 1 to also consider child categories
  • opacity: set to 1 so that the opacity of the different terms is modified based on the number of matching posts
  • tilt: set to 1 to randomly tilt the terms
  • colorize: set to 1 to randomly change the font color of the terms
  • nofollow: set to 1 to make all link nofollow
  • cache: set to 1 to cache the rendering of the cloud
  • timeout: the cache timeout in seconds
  • width: width of the 3D canvas. 0 means no specific width set. Use this to define the size of the generated canvas (to prevent pixelization due to stretching)
  • height: height of the 3D canvas. 0 means no specific height set. Use this to define the size of the generated canvas (to prevent pixelization due to stretching)
  • zoom: initial zoom factor e.g. 1
  • smallest: smallest font size in percent of the default font size e.g. 75
  • largest: largest font size in percent of the default font size e.g. 200
  • color: font color e.g #ffffff
  • background: background color e.g. #333333
  • border: border color e.g. #AAAAAA

    How can I programmatically insert a term cloud ?

Use the show_tag_cloud() function. It takes an associative array as parameter. The parameters are the same as for the short code above.

The easiest way to get to the code you need to write is to first create a new post or page (you won't need to publish it) and add a shortcode using the additional button provided in the visual editor. Select all the settings you want to have an insert the shortcode to the post/page. You can also use the preview button to see how the cloud would look like.

Let's assume this is the shortcode which was generated:

    [showtagcloud taxonomy="category" format="array" number="20" color="#FF5800" background="FFFFFF"]

Since the arguments of the shortcode are the same arguments as the ones of the show_tag_cloud() function, you can then copy them. So in the example above copy the following: taxomony="category", format="array", number="20", color="#FF5800", background="FFFFFF"

Then go to the theme editor and open the file you want to add it in, as an example we'll add it to the category archive of my theme. The code looked like this before my change:

get_header(); ?>
    <section id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

            <?php if ( have_posts() ) : ?>

            <header class="archive-header">
                <h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentyfourteen' ), single_cat_title( '', false ) ); ?></h1>

We'll add a call to show_tag_cloud, paste the copied arguments and change the list of arguments to an associative array. Here the resulting code:

get_header(); ?>
    <section id="primary" class="content-area">
        <div id="content" class="site-content" role="main">
            <?php show_tag_cloud(array( taxomony=>"category", format=>"array", number=>"20", color=>"#FF5800", background=>"FFFFFF" ));?>

            <?php if ( have_posts() ) : ?>

            <header class="archive-header">
                <h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentyfourteen' ), single_cat_title( '', false ) ); ?></h1>

Of course if you want to style it differently (e.g. center it and specify a width and height), you can wrap it with a div element with the appropriate style e.g. :

get_header(); ?>
    <section id="primary" class="content-area">
        <div id="content" class="site-content" role="main">
            <div style="width:600px;height:320px;margin-left:auto;margin-right:auto;">
                <?php show_tag_cloud(array( taxomony=>"category", format=>"array", number=>"20", color=>"#FF5800", background=>"FFFFFF" ));?>
            </div>

            <?php if ( have_posts() ) : ?>

            <header class="archive-header">
                <h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentyfourteen' ), single_cat_title( '', false ) ); ?></h1>

Requires: 3.0.1 or higher
Compatible up to: 4.1.15
Last Updated: 1 year ago
Active Installs: 10,000+

Ratings

4.7 out of 5 stars

Support

0 of 4 support threads in the last two months have been marked resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,1,1 100,1,1 100,2,2 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1
100,1,1 100,1,1 100,2,2
67,3,2
100,2,2 100,1,1 100,1,1 100,1,1 100,2,2 100,1,1
100,1,1 100,1,1 100,1,1
100,2,2
50,2,1
100,1,1
100,1,1
100,1,1
100,1,1
0,1,0