Earlier, I wrote How To Display A Tag Cloud On WordPress, in that post, we display the tag cloud by WordPress default. In this post, I will share other ways to display the tag cloud by using the visualization tools and free WordPress plugin.
Multi-column Tag Map plugin
Multi-column Tag Map plugin does the good job to display the tags list. It comes with many options you can choose from.
Multi-column Tag Map plugin allows you to add the tag cloud via shortcode. Below is the shortcode example that you can add in the content editor or widget or your template.
[mctagmap taxonomy="YOUR TAXONOMY" tag_count="yes" show_navigation="yes" columns="5"]Notice that, each tag will link to the archive page and display all the posts related to the clicked tag. If you don’t want this link on the tag cloud, you can add the javascript code below at the footer.
<script>
jQuery( document ).ready(function($) {
// enable this script only on your specific page
if( $("body").hasClass("page-id-2135") ) {
var $tagLink = $("#mcTagMap").find("ul.links").find("a");
$tagLink.each(function() {
var $t = $(this);
$t.replaceWith( "<span class='keyword-tag'>"+ $t.text().trim() +"</span>" );
});
}
});
</script>In JS code, I check if the current page is the page I need, I will enable the JS code. The JS code will replace the link tag to span tag with the class name I want which I can style the tag later by this class name.
If you are not the developer or don’t know how to add the JS code in your site. You can use Header and Footer Scripts plugin for adding the JS code at the footer. Below is how the Header and Footer Scripts plugin look like when it enables.
After JS code is added, the link is gone from the tag cloud list.
Word Cloud from Highcharts
I have been using Highcharts since 2009. It provides free and paid version. Free version mostly is enough for the website and application. Highcharts is continue improving and adding more new features. In this post, we will use Word Cloud from Highcharts to display our tag cloud. I will create the plugin for display the Word Cloud. Also, I will create a shortcode names “keywords_tag” in order to display our tag cloud on the page and widget.
Create a new plugin
- create a new project-keywords folder under WordPress plugins folder (wp-content/plugins). You can change the folder name as you like.
- create a new project-keywords.php which is our main plugin file under the project-keywords folder.
- add the code below into the project-keywords.php. I add the useful comment in the code to explain each snippet.
<?php
/**
* Plugin Name: Your Plugin Name
* Description: Your Plugin Description
* Version: 1.0
* Author: Apple Rinquest
* Author URI: https://applerinquest.com
*/
// # block directly access to this file
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
// # get all keywords tag
function get_keywords_list()
{
$terms = get_terms([
'taxonomy' => 'Your Taxonomy',
'hide_empty' => false,
]);
$keywords = '';
if (count($terms) > 0) {
foreach ($terms as $term) {
$keywords = $keywords . $term->name . ',';
}
}
// remove the last comma from the string
$keywords = substr(trim($keywords), 0, -1);
return $keywords;
}
// # add the JS files to WordPress
add_action('wp_enqueue_scripts', 'mms_tag_cloud_scripts');
function mms_tag_cloud_scripts()
{
wp_enqueue_script('mms-highcharts-script', 'https://code.highcharts.com/highcharts.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('mms-hc-wordcloud-script', 'https://code.highcharts.com/modules/wordcloud.js', array('jquery', 'mms-highcharts-script'), '1.0.0', true);
wp_enqueue_script('mms-hc-exporting-script', 'https://code.highcharts.com/modules/exporting.js', array('jquery', 'mms-highcharts-script', 'mms-hc-wordcloud-script'), '1.0.0', true);
wp_enqueue_script('mms-hc-export-script', 'https://code.highcharts.com/modules/export-data.js', array('jquery', 'mms-highcharts-script', 'mms-hc-exporting-script'), '1.0.0', true);
wp_enqueue_script('mms-hc-access-script', 'https://code.highcharts.com/modules/accessibility.js', array('jquery', 'mms-highcharts-script', 'mms-hc-export-script'), '1.0.0', true);
// # get all keywords list
$keywords_list = get_keywords_list();
// Style #1: default tag cloud
from Word cloud Highcharts
wp_enqueue_script('mms-hc-custom-script', plugin_dir_url(__FILE__) . 'js/custom.js', array('jquery', 'mms-highcharts-script'), '1.0.0', true);
wp_localize_script( 'mms-hc-custom-script', 'mms_keywords_list', $keywords_list );
// Style #2: spirals algorithm
// wp_enqueue_script('mms-hc-custom-script', plugin_dir_url(__FILE__) . 'js/spirals-algorithm.js', array('jquery', 'mms-highcharts-script'), '1.0.0', true);
// wp_localize_script( 'mms-hc-custom-script', 'mms_keywords_list', $keywords_list );
}
// # add [keywords_tag] shortcode
add_shortcode('keywords_tag', 'keywords_tag_shortcode');
function keywords_tag_shortcode()
{
$result = '
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
';
// return the content from shortcode
return $result;
}
The live demo from the Word cloud from Highcharts can be found here.
Note that, in the code above, you will see I am passing the PHP value to JS script (wp_localize_script function). If you want to learn more, please follow this link.
Word cloud style #1
In the code above, I add two styles to display the Word cloud from Highcharts. First, we will look at style one.
Now, at the project-keywords folder, create new js folder and create new a custom.js file under the js folder. Then add the code below into the custom.js.
// # data source
var text = mms_keywords_list;
var lines = text.split(","),
data = Highcharts.reduce(lines, function (arr, word) {
var obj = Highcharts.find(arr, function (obj) {
return obj.name === word;
});
if (obj) {
obj.weight += 1;
} else {
obj = {
name: word,
weight: 1
};
arr.push(obj);
}
return arr;
}, []);
Highcharts.chart('container', {
accessibility: {
screenReaderSection: {
beforeChartFormat: '<h5>{chartTitle}</h5>' +
'<div>{chartSubtitle}</div>' +
'<div>{chartLongdesc}</div>' +
'<div>{viewTableButton}</div>'
}
},
series: [{
type: 'wordcloud',
data: data,
name: 'Keyword'
}],
title: {
text: 'Keywords Cloud'
},
credits: {
enabled: false
}
});Now, when you add the [keywords_tag] in your page, you will see the word cloud as below.
Highcharts comes with the export menu out of the box. You can export the chart as jpg, png, pdf, svg, csv and xls. Also, you can view the data as the data table, print out and view the chart as full screen.
Word cloud style #2
For style two, just comment the style one and remove the comment the style two as the code below.
// Style #1: default tag cloud
from Word cloud Highcharts
// wp_enqueue_script('mms-hc-custom-script', plugin_dir_url(__FILE__) . 'js/custom.js', array('jquery', 'mms-highcharts-script'), '1.0.0', true);
// wp_localize_script( 'mms-hc-custom-script', 'mms_keywords_list', $keywords_list );
// Style #2: spirals algorithm
wp_enqueue_script('mms-hc-custom-script', plugin_dir_url(__FILE__) . 'js/spirals-algorithm.js', array('jquery', 'mms-highcharts-script'), '1.0.0', true);
wp_localize_script( 'mms-hc-custom-script', 'mms_keywords_list', $keywords_list );Then create a new spirals-algorithm.js under the js folder. And add the code below into the spirals-algorithm.js.
// # data source
var text = mms_keywords_list;
var lines = text.split(","),
data = Highcharts.reduce(lines, function (arr, word) {
var obj = Highcharts.find(arr, function (obj) {
return obj.name === word;
});
if (obj) {
obj.weight += 1;
} else {
obj = {
name: word,
weight: 1
};
arr.push(obj);
}
return arr;
}, []);
// -----------------------------------------------------------------------
/**
* archimedeanSpiral - Gives a set of cordinates for an Archimedian Spiral.
*
* @param {number} t How far along the spiral we have traversed.
* @return {object} Resulting coordinates, x and y.
*/
var archimedeanSpiral = function archimedeanSpiral(t) {
t *= 0.1;
return {
x: t * Math.cos(t),
y: t * Math.sin(t)
};
};
Highcharts.seriesTypes.wordcloud.prototype.spirals.archimedean = archimedeanSpiral;
// -----------------------------------------------------------------------
Highcharts.chart('container', {
accessibility: {
screenReaderSection: {
beforeChartFormat: '<h5>{chartTitle}</h5>' +
'<div>{chartSubtitle}</div>' +
'<div>{chartLongdesc}</div>' +
'<div>{viewTableButton}</div>'
}
},
series: [{
type: 'wordcloud',
data: data,
name: 'Keyword',
spiral: 'archimedean' // enable spirals algorithm
}],
title: {
text: 'Keywords Cloud'
},
credits: {
enabled: false
}
});Now, when you add the [keywords_tag] in your page, you will see the word cloud as below.
Word cloud from Highcharts useful links
And that’s it for today.
