Drupal 8 Custom Taxonomy Term Pages with Views

By default, out of the box, Drupal taxonomy term pages are styled kind of ugly, but with help of just a few simple tweaks we could style them as we wish, just by using CSS. In today's Drupal tutorial series, I will provide simple how to on how to create custom Drupal 8 taxonomy term pages using views.

Luckily, you won't need to install any additional modules, as in Drupal 8, views are already built in core, and if you are already familiar with how to style taxonomy term pages in Drupal 7, it will be easy task in Drupal 8, as most of the steps involved are the same.

Default taxonomy term page view in Drupal 8

Default taxonomy term page view in Drupal 8

In above example you can see the default taxonomy term page view (taxonomy/term/%) in Drupal 8. For this tutorial I'm using tourgeorgia.eu website, listing tours in Georgia where each tour is tagged with predefined taxonomy, for example, cultural tour, spiritual tour and so on. Though, technically speaking, taxonomy term pages are not the ones generating most page views and in fact are rarely visited, that doesn't mean we should leave a bad user experience. On the other hand, taxonomy term pages might be used in your Drupal's SEO strategy, and in case of that - even more, it's time to make them rock.

Drupal views for Taxonomy term pages

  • Go to views page (admin/structure/views), edit Taxonomy term page
  • Under Format, change display from Content to Fields
  • Add fields, like title, body, image and custom block
  • Exclude all, but custom block fields from display
  • Construct your display in custom block using replacement variables, you should add here css classes as well
  • Apply CSS to your themes style sheet

Here is the final result

Custom Drupal 8 taxonomy term page

Custom Drupal 8 taxonomy term page

Now, looks much better. As you can see I have displayed additional custom fields on taxonomy pages as well, like price,  and even a direct link to booking form. The sky is the limit when working with taxonomy term pages in Drupal.

Tip: If you are figuring out how to remove subscribe to rss link from taxonomy term pages, go back to the taxonomy term page view, select feeds display and under Feed setting remove Attach to Page

Now you have some basic knowledge how to create custom Drupal 8 taxonomy term pages using views.

In case you are using more than just one vocabulary for taxonomy terms, you could create some additional rewrites per vocabulary. Personally I prefer using just one taxonomy term page display, with most rewrites done already in views.

Like in the case of tourgeorgia.eu - we have two vocabularies, one for tour type and other tags in free format, using rewrites in Drupal view construct page it's not a problem to display on one page two different displays (see example)

Taxonomy terms from different vocabularies on same taxonomy term page in Drupal

Taxonomy terms from different vocabularies on same taxonomy term page in Drupal

Here we can see two nodes, both tagged with Tbilisi, the first one is article, and as you can see from display it shows image, title, description and read more button, while second is tour, displaying additional info on the same taxonomy term page, tour type, duration, price and booking.

When constructing custom taxonomy view page, make sure to list all possible fields and then using hide if empty option rewrite final result.

Another great feature in Drupal 8, is displaying taxonomy term description on the taxonomy term page, out of the box. It was kind of complicated to get this done in Drupal 7, see: How to List Drupal Child Terms on Taxonomy Pages with Views

Taxonomy description in Drupal 8

Taxonomy description in Drupal 8

There is nothing much you should do to print taxonomy term descriptions on Drupal 8 taxonomy term page, just edit taxonomy term and add a brief term description, the rest is handled by taxonomy/term/% views page.

The Bottom Line

As you can see - the sky is the limit when dealing with taxonomy term pages in Drupal. If implemented with SEO strategy, well optimized taxonomy pages can help to improve overall site rankings in Google search. 

 

Disqus