How To Build A Custom Category Tree With Toolset

   Agnes Bury

How to

November 29, 2021
16

Using Toolset, you can easily build a list of categories with subcategories for each. Of course, your categories can also be terms that belong to a custom taxonomy. In this tutorial, we show you how to create and display such a list.

Now, you might be wondering why you would want to use Toolset for doing this. The answer is – customization. This is because with Toolset you can:

  • You can create your own custom taxonomies, with any number of custom taxonomy terms (subcategories)
  • You can display your category tree in any way you prefer using any structure
  • You can apply virtually any styling you want (as long as you know CSS)

In our example, we have a list of lesson subjects with their subcategories.

A category tree displaying lesson subjects and their subcategories

Setup

We have a directory site listing tutors who give private lessons in various subjects. In our case, we used the Toolset Tutors demo site as a starting point.

Custom “Tutors” Post Type

Our site features a custom post type called Tutors with some posts. We used Toolset to create this custom post type.

A listing page for the Tutors custom post type

Custom “Subjects” Taxonomy

We categorize our Tutors using a custom taxonomy called “Subjects”. Again, we used Toolset to create this custom taxonomy.

The “Subjects” taxonomy includes top-level terms like Music, Math, French, etc. Each of these terms has some subterms. For example, under Music, we have Piano, Guitar, and Violin. 

Custom “Subjects” taxonomy with multiple terms and their subterms

How to Create a Category Tree – The Idea

To display a category tree, you need to create two Views:

  • Parent View: for displaying the top-level terms
  • Child View: for displaying the child terms. This inner View will be nested inside the parent View
Using two nested Views to display a category tree

To accomplish this, you must use the legacy version of Views which is based on shortcodes. 

This is because we need the following:

  • Create Views that list taxonomies
  • Use nested Views

Both features are currently not supported in the default, block-based Views interface.

High-Level Steps

  1. Enable the legacy mode for creating Views
  2. Create a parent View for listing top-level categories
  3. Insert the parent View into a page
  4. Create a View for listing child categories
  5. Insert the child View into the loop of the parent View
  6. Add custom CSS to polish your design

Step 1: Enabling Legacy Views

  1. Go to Toolset → Settings and scroll down to the Editing experience section.
  2. Select the option to show both legacy and Blocks interface.

For more details, check out the lesson about enabling the legacy version of Toolset Views.

Step 2: Creating A Parent View for Listing Top-level Categories 

  1. Go to Toolset → Views and click to create a View displaying all results.
  2. In the Content Selection section choose Taxonomy and select the taxonomy you want the View to list. In our example, it’s the “Subjects” taxonomy.
  3. In the Query Filter section add a filter by the Taxonomy parent and set it to None. This is necessary so that our View displays only top-level terms.
Setting up a legacy View that lists top-level categories

  1. In the Loop Editor section, click Loop Wizard and follow it to create a Bootstrap Grid with 2 columns.
  2. In the next step of the Loop Wizard, add the fields you want to display. In our case, we simply want to display a taxonomy term with a link so we select Taxonomy Link.
  3. In the Templates for this View section, click Stop using Block Editor for this Content Template. An additional editor will appear.
  4. In the editor that appeared, right after the wpv-taxonomy-link shortcode, add a paragraph tag with a message for a temporary placeholder. We will later replace this placeholder with a View for listing subcategories.
Contents of the Loop Item of the View listing top-level categories
  1. Save your View.

Step 3: Inserting the Parent View Into a Page

  1. Edit the page where you want to display your category tree.
  2. Insert the Toolset Fields and Text block.
  3. Click on the Add Field or View icon.
  4. In the pop-up dialog that appears find the Taxonomy View section. There, click the View you created in Step 2 above.

Your View should display a basic list of all your parent categories (top-level taxonomy terms).

Parent View inserted into a block-based page

Step 4: Creating a View for Listing Child Categories

  1. Go to Toolset → Views and click to create a View displaying all results.
  2. In the Content Selection section choose Taxonomy and select the taxonomy you want the View to list. In our example, it’s the “Subjects” taxonomy again.
  3. In the Query Filter section add a filter by the Taxonomy parent and select the option Parent is the taxonomy selected by the parent Taxonomy View. This makes sure that the View doesn’t display the main (parent) category in the loop but its sub (child) categories.
Setting up a legacy View that lists subcategories belonging to a parent category

  1. In the Loop Editor section, click Loop Wizard and follow it to create an unordered list.
  2. In the next step of the Loop Wizard, add the fields you want to display. In our case, we simply want to display a taxonomy term with a link so we select Taxonomy Link.
  3. In the Templates for this View section, click Stop using Block Editor for this Content Template. An additional editor will appear.
  4. In the editor that appeared, right after the wpv-taxonomy-link shortcode, the wpv-taxonomy-post-count shortcode. This will display how many posts there are in each listed subcategory. Surround this shortcode with parenthesis to make its output look better.
Contents of the Loop Item of the View listing subcategories

  1. Save your View.

Step 5: Inserting the Child View Into the Parent View

  1. Go to Toolset → Views and click to edit the parent View you created in Step 2 above.
  2. Scroll down to the Loop Editor section and the Templates for this View editor.
  3. On the line below the wpv-taxonomy-link, remove the placeholder text you put in Step 2 and click the Fields and Views button.
  4. In the pop-up dialog that appears, look under the Taxonomy View section and click the child View you created in Step 4 to insert it.
Final contents of the Loop Item of the View listing top-level categories

  1. Save your View.

Now, when you visit the page that displays your main View, you should see your View listing subcategories.

Final page with the Views displaying our category tree

Step 6: Adding Custom CSS

To customize the appearance of your Views you can use custom CSS. You can find the CSS Editor just below the main Loop and Loop Item editors.

CSS editor for adding custom styling to a legacy View

There’s More!

This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!

Other articles in this series:

Feedback? Suggestions?

Do you often need to display a category tree on the websites you build? Did you know you can use (legacy) Views to do that?

Let us know in the comments and we’ll reply!

 

Comments 16 Responses

    • Hi, Guillaume! Well, you don’t have to forgo Blocks to use classic Views, you can use them together, as we do in this tutorial. 🙂

  2. All our sites use Views, very little in the way of Blocks.

    Views are way more powerful and flexible…in my opinion.

    • Hi, Peter! I understand what you mean, but I would add that it very much depends on your background in things like HTML and CSS. This is what I personally love about the combination of both. I could personally do most with blocks and it would be much easier and faster, and then use classic Views if I really need something extra that is currently not possible with blocks (like this category tree).

  3. But you can’t have Block and View on the same website. If you install Block, View is automatically desactivated. So, how can you use them together ?

  4. a nice tutorial that shows an unfortunate trend: when all plugins seem to be moving towards blocks, and solutions like the one on the tutorial already exist in out-of-the-box blocks (unlimited, kadence and other blocks plugins) or in competing plugins (jet), it feels like toolset is going backwards and progressively away from it’s claim of “no coding” to customize: shortcodes, custom CSS, custom JS,….
    On top of that Toolset blocks loads in every page, irrespective of being used (and also bloatloads woo blocks), hurting web vitals, Forms is something from last decade relying on twitter bootstrap, and Archive views filters are lagging behind competition (no “filters in use” block, or progressive filters,…).
    Currently Toolset’s main advantage, besides the legacy user base that have gone all the way of learning views and coding, is content templates, which is fading fast with FSE and WP5.9 around the corner.
    As a toolset subscriber for several years, I would very much like to see toolset moving forward rather than backwards.
    Just my five cents

    • Thanks for the sincere thoughts, Alex. I’d just like to comment on that the web vitals things… The whole “let’s rank also by speed” thing was “paused” by Google because it is still utterly unreliable (you can have a super-fast site on a super-fast server and still rank yellow or rank differently for every single test). However, we updated Toolset in April to make sure it’s fast and tested it closely. There shouldn’t be anything that would hurt you on Web Vitals (if you can show us this in practice, please use our support forum to report it and we’ll take a look). We tackled this in April and you can read about it here:
      – https://toolset.com/2021/04/toolset-blocks-1-5-faster-sites-for-better-seo-ranking/

  5. Thanks Dario,

    While we can now do a lot with the block editor it is always good to have the older HTML/CSS/JS approach to roll templates and views like this.

  6. I thought this was going to be a tutorial about the new Toolset Blocks support for taxonomies.
    Any word on that? And for bonus points, how about using the block editor for Toolset forms?

    • Hi, Darryl! As I commented above, I have no ETA on Toolset Blocks Views for displaying taxonomies. This is why I wrote this tutorial. 🙂

      As for the Toolset Forms… We did consider switching them completely to blocks but it would basically be a complete rewrite of the whole plugin, so this is also currently not planned for the near future.

  7. WordPress + Legacy Toolset is so powerfully solution, really custom websites. Blocks is just “constructor” for semi custom websites. God bless Legacy! 🙂

  8. It’s been 5 months since the release of Toolset 1.6… Just curious what’s next and when? 🙂 Thanks!

    • Hi, Peter! We’re currently focusing on the upcoming WordPress 5.9 release which is currently slated to go out on January 25th. It brings the first iteration of Full Site Editing and some changes to the Block Editor itself (on the code and UX level). We’re currently testing the latest beta and making sure Toolset is ready for WP 5.9. So, while I cannot predict too far into the future, I can tell you that this next Toolset release will focus on WP 5.9 compatibility and will go out somewhere around its release.

  9. What if I have sub-sub-categories? I see that I cannot insert the child view into the child view, because this produces an infinite loop error. Is there a way to use this with 3, 4 or even 10 sub-levels?

    • Hi, Simon! I didn’t test this but from what I remember… You cannot simply insert the child View into itself. If you have sub-sub-categories, you’ll have to create a separate child View for each level and insert that one into the (first/previous) child View. If this doesn’t help, I suggest asking in our Support, our supporters can definitely help with things like that. 🙂