For some reasons, I tend to stay away from tag clouds whenever possible. While they’re visually appealing, tag clouds tend to give focus on highly-used tags and it’s quite difficult to scan for certain topics that you might actually be interested in.
With that in mind, I wanted the users to:
- See a list of all tags on my site.
- See the tags sorted in alphabetical order to allow easy scanning.
- Show number of frequency each tag has been used.
- Provide a link for users to see posts related to the tag.
On this post, I’ll show you how you could achieve all the points above, while still keeping your tags visually appealing. In short, we’re going to create a page similar to the Tag Index page on octalforty.
Preparing the PHP file
First off, we’re going to create a new PHP file called tag-index.php and save it to your themes folder. Your tag-index.php should be on the same location as the widely-known functions.php. Once that’s done, we’ll include the code below to your tag-index.php:
<?php
/*
Template Name: Tag Index
*/
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<!-- Tag index code will be placed here -->
</div><!-- .entry-content -->
<footer class="entry-meta">
<!-- The footer for your tag index page -->
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>On line 2 — 4 on the above code, we’re telling WordPress the Template Name. This will be used when we’re going to create the actual page later on. The rest of the code is a copy of WordPress 2011 theme page markup. Feel free to make any modifications to suit your own theme.
Outputting the tags
Finally, the fun part.
On line 18 of your tag-index.php, replace that line with the code below:
<?php
// Make an array from A to Z.
$characters = range('a','z');
// Check if $characters exists and ensure that it is an array.
if( $characters && is_array( $characters ) ) {
foreach( $characters as $index=>$character ) {
// Get the tag information for each characters in the array.
$tags = get_tags( array('name__like' => $character, 'order' => 'ASC') );
// Output a wrapper so that our arrays will be contained in 4 columns.
if ($index != 0 && $index % 4 == 0) {
$html = "<div class='post-tags clearfix' style='clear:left;'>";
} else {
$html = "<div class='post-tags clearfix'>";
}
// Output the character and use it as the title.
$html .= "<h3 class='title'>{$character}</h3>";
// Output the markup for each tag found for each character.
if ($tags) {
$html .= "<ul>";
foreach ( (array) $tags as $tag ) {
$tag_link = get_tag_link($tag->term_id);
$html .= "<li class='tag-item'>";
if ( $tag->count > 1 ) {
$html .= "<p><a href='{$tag_link}' title='View all {$tag->count} articles with the tag of {$tag->name}' class='{$tag->slug}'>";
} else {
$html .= "<p><a href='{$tag_link}' title='View the article tagged {$tag->name}' class='{$tag->slug}'>";
}
$html .= "{$tag->name}</a><span>#{$tag->count}</span></p>";
$html .= "</li>";
}
$html .= '</ul>';
}
$html .= '</div>';
// Output the markup for the current character.
echo $html;
// Increment the index by 1.
$index++;
}
}
?>Easy huh? I’ve commented each line to ensure that it’s easier to understand what’s going around. If you’re unsure of something, just leave a comment eh?
Once you’re done figuring out what’s happening, save the file.
Create the page
Now go to your Add New Pages page on your WordPress admin. You should see a screen similar to the ones below:
Screenshot showing the Add New Page on WordPress.
Give your post a title (Hint: Tag Index). Under the Page Attributes section on the right of your screen, select Tag Index as the template.
Screenshot showing Tag Index set as the Template.
Done? Awesome. Save and preview your page to see a list of tags ordered alphabetically. You can then style it according to your taste.
Hey! Nice one…
Is there any way I can modify this to fetch tags from a particular category or custom post type?
Thanks!
@Siddharth Arun: Thanks :)
To get tags from a particular category (or categories), you could probably use this nifty function from WP forum.
Hope that helps!
Hi Yassir, thanks for the post, is there a way to get the related tags (by id or slug) to each tag as here: http://032c.com/topics/
Please email me so i’ll explain better.
Hi, I have a question :)
What if I want to hide the chars without tags?
Thanks,
A.
@Adriana:
Hey Adriana! Thanks for dropping by :)
To hide characters without tags, simply wrap the
if ($tags)around the lines where you output the markup. Something like this :