Hi
I created a tag cloud (a screenshot of the snippet is attached) and added it to my blog archive template.
The tag cloud is showing perfectly in the builder and in preview mode. Please see the screenshot of the tagcloud, on the right hand side of the page (I wasn’t able to include a link to preview mode).
However, it’s not showing in frontend. What you see is {tag-cloud}, which is the custom dynamic name that I created. Here is a link:
Any idea how to fix this?
Thanks in advance,
litmol
Here is the code that creates a tag cloud. It works perfectly. You can add some CSS to style the tag claud to your liking.
function custom_tag_cloud($limit = 20) {
// Get all tags and their respective post counts
$tags = get_tags();
// If there are no tags, return
if (empty($tags)) {
return;
}
// Sort tags by count in descending order (highest count first)
usort($tags, function($a, $b) {
return $b->count - $a->count; // Sort by post count in descending order
});
// Get the top `$limit` tags (highest count)
$top_tags = array_slice($tags, 0, $limit);
// Sort the top tags alphabetically by name
usort($top_tags, function($a, $b) {
return strcmp($a->name, $b->name); // Sort alphabetically by name
});
// Define minimum and maximum font sizes
$min_size = 16; // Minimum font size (px)
$max_size = 30; // Maximum font size (px)
// Find the minimum and maximum counts of posts associated with the top tags
$min_count = min(array_map(function($tag) { return $tag->count; }, $top_tags));
$max_count = max(array_map(function($tag) { return $tag->count; }, $top_tags));
// Output the tag cloud
echo '<div class="custom-tag-cloud">';
foreach ($top_tags as $tag) {
// Calculate the font size based on the post count
$font_size = $min_size + (($tag->count - $min_count) / ($max_count - $min_count)) * ($max_size - $min_size);
$font_size = round($font_size); // Round the font size to the nearest pixel
// Display the tag name with the post count
echo '<a href="' . get_tag_link($tag->term_id) . '" style="font-size:' . $font_size . 'px;">';
echo $tag->name. ' <span>('. $tag->count. ')</span>'; // Wrap the count in a span
echo '</a>';
}
echo '</div>';
}
function custom_tag_cloud_shortcode($atts) {
// Set default limit value
$atts = shortcode_atts(array(
‘limit’ => 20, // Default limit is 20
), $atts, ‘custom_tag_cloud’);
// Output the tag cloud with the specified limit
custom_tag_cloud($atts['limit']);
}
add_shortcode(‘custom_tag_cloud’, ‘custom_tag_cloud_shortcode’);