i'm currently using this code to display a custom tag:

<?php echo get_the_term_list( $post->ID, 'region', 'Region: ', ', ', '<br>' ); ?>

The output of this looks like this:

Region: USA

What i want to do is display a flag instead of the words USA, EUR, JPN, etc like so:

Region: enter image description here

What's the easiest way to achieve this? In the past i used a very bloated method but i want to know an efficient way to do this, old method:

$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL

// Check tagslug.png exists and display it
    echo '<div class="entry-meta"><span class="tag-links">';
if ($posttags) {
 foreach($posttags as $tag) {
       $image = "/img/$tag->slug.gif";

       if (file_exists("img/$tag->slug.gif")) {
         echo '<a href="' . $home . '/tag/' . $tag->slug . '/">Region:<img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image . '"></a>';

       // If no image found, output no flag version
       } else {

    echo '<a href="' . $home . '/tag/' . $tag->slug . '/">' . $tag->name . '</a>';

echo "</span>";
echo "</div>";

A clean and semantic way to do it would be with CSS.

First, the PHP:

<div class="entry-meta">
    <span class="term-links">
        <?php foreach ( get_the_terms( $post->ID, 'region') as $term ) : ?>
            <a href="<?php echo esc_url( get_term_link( $term->term_id ) ) ?>">Region: <span class="<?php echo $term->slug ?>"><?php echo $term->name ?></span></a>
        <?php endforeach; ?>

Next, the CSS:

.term-links .usa {
    display: inline-block;
    width: 16px;
    height: 11px;
    background: url('http://i.stack.imgur.com/B2K4X.gif');
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

Just repeat the CSS for each region, changing the background URL.

  • Hi, would this work with the new custom taxonomy "region" shown on my first code? that is what i'm using now, i see your code is based on my old code but that was used with regular tags not custom tags. – Michael Rogers Aug 2 '16 at 13:48
  • @MichaelRogers Ok, I updated the code to work with the "region" taxonomy instead of tags. – Nate Allen Aug 2 '16 at 14:40
  • Hey thanks the code works, but it has a little problem when the region does not exist it gives a php error, could help me wrap it in an if to check if region exist only then do it? I'm so noob sorry i'll mark best answer. – Michael Rogers Aug 2 '16 at 18:16
  • I used this if, does it look right? if (get_the_terms( $post->ID, 'region')) { } – Michael Rogers Aug 2 '16 at 18:18

I'm assuming you want a comma-separated list of terms with links. Here's PHP to output that:

$post_regions = get_the_terms($post->ID,'regions');

//determines what the last region is so we know when to stop inserting commas between multiple regions
$region_keys = array_keys($post_regions);
$last_region_key = array_pop($region_keys);

echo('Region: ');
foreach ($post_regions as $key => $value) {
   echo('<a href="'.esc_url(get_tag_link($value->term_id)).'" class="'.$value->name.'" >'.$value->name.'</a>');
    //only insert a comma between if it's not the last region
    if ($key != $last_region_key){
      echo(', ');

It should end up with the following HTML, depending on the actual terms on the post of course:

Region: <a href="#" rel="tag" class="USA">USA</a>, 
<a href="#" rel="tag" class="EUR">EUR</a>, 
<a href="#" rel="tag" class="JPN">JPN</a>, 
<a href="#" rel="tag" class="Antarctica">Antarctica</a>

And you can style it with CSS. Using Sass, you can save yourself the duplication of writing a declaration for each region using the each directive like so:

@each $flag in USA, EUR, JPN {

  a.#{$flag} {

Live demo on Codepen. It will ignore any region names you don't specify in the SCSS and display the text for those, but for those it recognizes, it will hide the text and display the flag image instead. If you don't want to deal with Sass, you can change the option under CSS in Codepen to display the compiled CSS and use that instead.

  • get_the_term_list already returns a list of all the terms separated by comma. – Michael Rogers Aug 3 '16 at 0:08
  • @MichaelRogers okay, but in order to put class names on the links (which determines what image to show), one must use a more manual method like get_the_terms and then echoing the links while inserting the classes. – Mike Eng Aug 3 '16 at 0:10
  • 1
    I see thanks for the input i will also use your method for css all flags without repeating same rules. – Michael Rogers Aug 3 '16 at 0:22
  • @MichaelRogers sure thing. Keep in mind that CSS approach requires sass-lang.com/guide – Mike Eng Aug 3 '16 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.