Displaying Tags As Images

Have you ever wondered how people were able to display their tags on WordPress as images? Look no further. Inserting simple code into your index page will easily change this.
Capture

Go to the Appearance tab on the left hand side and click on Editor. You will need to find the index.php file of the theme you are using to be able to do this. Somewhere in your loop (within the php_content tag), and before the endwhile tag, insert this code:

<?php
$posttags = get_the_tags();
if ($posttags) {
  foreach($posttags as $tag) {
    echo '<img src="Your Image URL Where Tag Images' . $tag->term_id . 'file extension"
alt="' . $tag->name . '" />';

}
?>
<?php } else { ?>
<p class="tags">No Tags Found</p>
<?php } ?>

The $posttags is referring to the tags associated with the current post. The get_the_tags() is saying to pull it from the database matching the post id number. The if ($posttags) { is saying that if there are tags associated with the post, then echo (or display) the image associated with the tag number.

The is saying if it does not meet those conditions to do this instead, which is display alternate text (or image) in place of the tags.

Now, to make your tags match up, the code posted above will pull the “tag” number associated with the individual. Meaning all of your pictures will be like: 1.jpg, 13.jpg, or however you want it set up.

You can find out the tag id number by going to Post >> Tags. You’ll want to right click and click on properties for each individuals (as more than likely they will not be in any specific order), and you’ll want to find where it says: tag_ID=7. The number, 7, is the ID associated with that individual.

If I have chosen png files, my final coding would look something like this:

<?php
$posttags = get_the_tags();
if ($posttags) {
  foreach($posttags as $tag) {
    echo '<img src="http://domain.com/tags/' . $tag->term_id . 'png"
alt="' . $tag->name . '" />';

}
?>
<?php } else { ?>
<p class="tags">No Tags Found</p>
<?php } ?>

That will tell WordPress that I have stored the images in the /tags/ folder, and to call 7.png in place of the individual.

Nothing to it!

Originally Inspired by DasBecca