Clouddy

FAQ

How do I change the tag sizes?

In Settings → Clouddy set the minimum and maximum text size and the unit (rem/em/px). Each
tag’s size is interpolated between those values based on the tag’s popularity.

How do I style the tag cloud? (CSS classes and variables)

The markup is clean, low-specificity HTML — style it with regular CSS in your theme, a page builder (e.g. Bricks), or Appearance → Customize → Additional CSS. No !important needed.

Generated HTML:

<nav class="clouddy"
     style="--clouddy-min:0.8rem; --clouddy-max:2rem;
            --clouddy-color-a:#888888; --clouddy-color-b:#222222">
  <a class="clouddy-tag" href="..." style="--clouddy-weight:0.73">
    name <span class="clouddy-count">(24)</span>
  </a>
  ...
</nav>

CSS hooks:

• .clouddy — the container (<nav>, flex). Holds the variables --clouddy-min, --clouddy-max, --clouddy-color-a, --clouddy-color-b.
• .clouddy-tag — a single tag (<a>). Holds --clouddy-weight (0–1 per tag — do not override it).
• .clouddy-count — the post count (<span>, shown only when “Show post count” is on).

Size and color are computed from the variables on the container. To change the scale or the colors while keeping the popularity-based effect, override those variables — not font-size/color on the tag.

Size range (keeps popularity scaling):

.clouddy {
    --clouddy-min: 1rem;   /* rarest tag */
    --clouddy-max: 3rem;   /* most popular tag */
}

Do not set font-size on .clouddy-tag — that disables the scaling. Use --clouddy-min/--clouddy-max.

Colors (a smooth color-mix(in oklch …) is computed between the two ends — you only set the extremes):

.clouddy {
    --clouddy-color-a: #94a3b8;   /* rarest */
    --clouddy-color-b: #0ea5e9;   /* most popular */
}

Layout and spacing:

.clouddy {
    gap: 0.5rem 1rem;
    justify-content: center;
}

“Pill” tags (does not touch size scaling):

.clouddy-tag {
    padding: 0.2em 0.6em;
    border-radius: 999px;
    background: #f1f5f9;
}

One flat color instead of the gradient:

.clouddy-tag { color: #333; }

Hover zoom that is stronger for rarer (smaller) tags, using --clouddy-weight:

.clouddy-tag {
    transition: transform .25s ease;
}
.clouddy-tag:hover {
    transform: scale(calc(1.06 + (1 - var(--clouddy-weight, 0.5)) * 0.18));
}

Here 1.06 is the zoom every tag gets and 0.18 is the extra added to the rarest; both are free to tune.

Can I replace the default stylesheet entirely?

Yes. The default stylesheet (handle clouddy) loads on the front end and in the block editor preview (hook enqueue_block_assets). To style from scratch without it, dequeue it on the same hook (Code Snippets or your theme’s functions.php):

add_action( 'enqueue_block_assets', function () {
    wp_dequeue_style( 'clouddy' );
}, 20 );

The --clouddy-weight variables stay in the HTML, so you can build your own calc() / color-mix() formula or ignore scaling.

How do I embed the tag cloud?

Three ways, all rendering the same cloud from the global settings (Settings → Clouddy):

• Block — add the “Clouddy — Tag Cloud” block in the block editor.
• Shortcode — [clouddy] (accepts attributes, see below).
• Widget — the “Clouddy — Tag Cloud” classic widget (themes with widget areas).

Which shortcode attributes are supported?

Every attribute is optional and overrides the global setting for that single cloud, e.g. [clouddy mode="hybrid" number="40" order="name_asc"]:

• mode — which tags to include: popular, rare, random, hybrid. Default popular.
• number — total number of tags (integer, min 1). Default 30.
• order — display order: count_desc, count_asc, name_asc, name_desc, random, length_center, count_center, rare_center. Default count_desc. The *_center orders place the top-ranked tags in the middle (lens effect).
• rare_count — hybrid mode only: how many of the total are the rarest (integer, capped at number). Default 5.
• taxonomy — source taxonomy. Default post_tag.
• exclude — comma-separated term IDs to skip, e.g. exclude="12,34".
• min_size / max_size — smallest / largest text size (numbers). Defaults 0.8 / 2.0.
• unit — size unit: rem, em, px, pt. Default rem.
• color_a / color_b — hex colors of the rarest / most popular tags. Defaults #888888 / #222222.
• show_count — append the post count to each tag (true / false). Default false.
• aria_label — accessibility label for the cloud container. Default Tag cloud.
• ttl_minutes — cache lifetime in minutes. Default 720 (12 h).

What is the cache lifetime (TTL) and what does it do?

Clouddy caches the set of tags it queries (using the WordPress Transients API) so the database
is not queried on every page load. The cache lifetime (ttl_minutes) is how long that cached
set is kept before it is rebuilt from the database — default 720 minutes (12 hours). It is only
a safety net: the cache is also refreshed automatically whenever content changes (a post is
saved or deleted, or tags are added, edited or removed). You rarely need to change it; lower it
only if you want a tighter upper bound on how stale the cloud can be.

The “random” order does not change on every page reload. Why?

The order is computed in PHP when the page is rendered — Clouddy uses no JavaScript. If you use
a full-page caching plugin or a CDN (for example LiteSpeed Cache, WP Super Cache, W3 Total
Cache, or a host/CDN cache), the generated HTML — including that one random order — is stored
and served to visitors, so the order only changes when that page cache is regenerated. This is
expected for any server-rendered random content. To reshuffle on every view despite caching you
would need client-side randomization (JavaScript), which Clouddy intentionally avoids. Either
exclude that page from full-page caching, or accept that the order refreshes when the cache does.