By default, out of the box, Drupal taxonomy term pages are styled kind of ugly, but with the 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 a 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 the core, and if you are already familiar with how to style taxonomy term pages in Drupal 7, it will be an easy task in Drupal 8, as most of the steps involved are the same.
Although this aticle was writtne for Drupal 8, most of it still applies in Drupal 9 and Drupal 10 versions. If you need any help with configuring Drupal taxonomy pages I might be just the person you're looking for. As the founder of Terramatris.eu, a Drupal development agency, I have years of experience working with this platform and helping clients achieve their goals through custom Drupal installations. Learn more at Terramatris.eu
Default taxonomy term page view in Drupal 8
In the 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 the 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 the views page (admin/structure/views), edit the 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 the display
- Construct your display in a 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
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 the 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 to display, and under the Feed setting remove Attach to Page
Now you have some basic knowledge of 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 the same taxonomy term page in Drupal
Here we can see two nodes, both tagged with Tbilisi, the first one is an article, and as you can see from the display it shows an image, title, description, and read more button, while the second is a tour, displaying additional info on the same taxonomy term page, tour type, duration, price, and booking.
When constructing a custom taxonomy view page, make sure to list all possible fields and then use the hide if empty option to rewrite the final result.
Another great feature of Drupal 8, is displaying taxonomy term descriptions 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
There is nothing much you should do to print taxonomy term descriptions on the Drupal 8 taxonomy term page, just edit the taxonomy term and add a brief term description, the rest is handled by the taxonomy/term/% views page.
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.
If you're in need of someone with expertise in Drupal development and module configuration, I might be just the person you're looking for. As the founder of Terramatris.eu, a Drupal development agency, I have years of experience working with this platform and helping clients achieve their goals through custom Drupal installations. Learn more at Terramatris.eu