Menu icon
RedCrackle
Menu icon
Services
01Design Transformation
About UsCase StudiesBlogContact Us

<

Blog post

How to show comma-separated taxonomy terms in Drupal

Neerav Mehta

Founder & CEO

By default, Drupal displays taxonomy terms with a space in between. Here is an example of an Article node created with two taxonomy tags tag1 and tag2 in Drupal's standard installation profile.

How to show comma-separated taxonomy terms in Drupal

In this blog post, I will show you how to render taxonomy terms in a comma-separated format. Moreover, if the label is enabled, then it will also appear in the same line before the taxonomy tags. Here is how the tags will look once we are done.

How to show comma-separated taxonomy terms in Drupal

For this example, I have selected Bartik as the base theme. You could use any base theme that you wish. First create a sub-theme of Bartik called "testtags". You could select the name of your liking but the name of the function will change based on your selection. In your theme's template.php file, write the following function to render the tags with a comma in between.

/**
* Implements theme_field__field_tags().
*/
function testtags_field__field_tags(&$variables) {
  $output = '';

  // Render the label if it's not hidden.
  if (!$variables['label_hidden']) {
    $output .= '<div class="field-label"'
      . $variables['title_attributes']
      . '>' . $variables['label'] . ':&nbsp;</div>';
  }

  // Render the items.
  $index = 0;
  $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
  foreach ($variables['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= ($index ? ',' : '')
      . ' <div class="' . $classes
      . '"' . $variables['item_attributes'][$delta] . '>'
      . drupal_render($item) . '</div>';
    $index++;
  }
  $output .= '</div>';

  // Render the top-level div.
  $output = '<div class="' . $variables['classes'] . '"'
    . $variables['atributes'] . '>' . $output . '</div>';

  return $output;
}

Now Drupal will use the above function for rendering the tags field. Note that this function will be used for rendering the tags field on any content type that it is attached to. If you want to render them in comma-separated format only for the Article content type, then rename the above function to testtags_fieldfield_tagsarticle(). To know more about naming convention, click here. After this step, this is how the tags look.

How to show comma-separated taxonomy terms in Drupal

Next step is applying CSS so that the tags get rendered in one line. Add the following CSS in your theme.

.field-name-field-tags .field-items div {
  display: inline;
}

.field-name-field-tags .field-label {
  /* You may need to change the label's height based on your theme's line height. */
  line-height: 22px;
}

This is how the tags look after this step.

How to show comma-separated taxonomy terms in Drupal

If you want to render the label inline as well, then go to Manage Display tab of the Article content type (or whichever content type you are using) and make the label inline.

How to show comma-separated taxonomy terms in Drupal

Now you will see comma-separated tags being displayed on the same line as its label.

How to show comma-separated taxonomy terms in Drupal
Neerav Mehta

Neerav Mehta

Founder & CEO

Neerav Mehta is the Founder & CEO of Red Crackle. With sterling qualities, Neerav’s technological acumen is firing a generation of progressive companies on the digital path. With an undergraduate degree in Electrical Engineering from India's most prestigious institution IIT Bombay and having spent seven years developing and contributing to the launch of AMD's innovative line of computer products, Neerav founded Red Crackle where he is lauded for his dynamic and innovative genius.

View all posts

>

Read Next

10 Tips For Entrepreneurs In 2015

10 Tips For Entrepreneurs In 2015

Learn more

10 Ways To Increase Productivity At Work

10 Ways To Increase Productivity At Work

Learn more

30 best WordPress widgets for your site

30 best WordPress widgets for your site

Learn more

Let’s get you started!

Contact Us

>

RedCrackle

Explore

About Us

Services

Contact Us

Our address

5346 Gerine Blossom Dr,

San Jose, CA 95123

USA

Socials

Twitter
LinkedIn

© 2023 RedCrackle. All rights reserved.