In a previous tutorial we showed you how you can easily add custom post types to your Divi WordPress website using the free Advanced Custom Fields (ACF) plugin. In this tutorial we’re going to show you how you can use the same plugin to add custom taxonomies to your newly created custom post type. We’ll also show you how to add new taxonomies to existing post types like posts and projects.
What are Custom Taxonomies?
WordPress comes with two default post taxonomies – categories (category) and tags (post_tag). These taxonomies make it easy to organize your posts for yourself and for your site visitors. Following our “events” custom post type example, you can imagine how it would benefit site visitors to have the ability to filter events by:
- Event Type
- Event Location
These are just a few taxonomy examples we might want to add to our events custom post type. We could add as many as we want. For our purposes, these two will be enough to demonstrate how to add taxonomies to your Divi site and also show the difference between hierarchical and non-hierarchical taxonomies.
Registering Custom Taxonomies in Divi
To register our new custom taxonomies, we’re going to use the same free plugin we used to register our custom post types – Advanced Custom Fields (ACF). Assuming this plugin has been installed and activated, go to your WordPress admin dashboard -> left sidebar -> ACF -> Taxonomies page. Click the blue Add New button at the top of this page to create your first taxonomy. On the Add New Taxonomy page, simply enter the plural label, singular label, and taxonomy key.
- Plural Label – this is the plural version of your taxonomy name that will be displayed when viewing from the admin interface. For example “Event Types”. If your custom post type was “Event Category”, the plural label would be “Event Categories”.
- Singular Label – this is the singular version of your taxonomy name that will be displayed when viewing from the admin interface. For example “Event Type”.
- Taxonomy Key – the key is the unique name for your taxonomy. This is mostly used behind the scenes by WordPress and plugins as an identifier when querying and displaying your taxonomy and associated terms. This will generally be the same as the Singular Label (in lowercase), replacing spaces with a dash. For example “event-type”.
Next click on the Post Types select dropdown and select “Event” to add our new taxonomy to our event custom post type. You are not limited to a single selection here.
For example, if you want to have the ability to assign terms from your new Event Type taxonomy to events AND blog posts, you can select both Posts and Events. This could come in handy if you want your site visitors to be able to view and filter events and posts by Event Type together (which is possible with our Divi FilterGrid plugin). You can also select Posts and nothing else if you simply want to add a new taxonomy to posts and not a new custom post type.
Below the Post Types dropdown you’ll find three toggles. The Public toggle should be on by default. This simply makes your new taxonomy visible. You would only want to turn this toggle off if you were creating a very specialized, hidden custom taxonomy like the Divi layouts category in the Divi Library.
The next toggle is the Hierarchical toggle which is off by default. If you want to be able to create parent and child terms in your new taxonomy, you’ll want to turn this toggle on.
Hierarchical taxonomies will appear in the edit post section just like the default post category taxonomy, displaying a checkbox interface for existing terms with the ability to add new terms and assign terms a parent term.
Non-hierarchical taxonomies will appear in the edit post section just like the default post tag taxonomy, displaying an input that allows you to type in a comma-separated list of terms. If your terms do not need to have parent terms or if you prefer a single input for adding terms, leave the Hierarchical toggle off.
For our example, we want hierarchical support for our Event Type taxonomy so we’ll turn the toggle on. For our next taxonomy (Event Location) we’ll leave it off.
The last toggle is the Advanced Configuration toggle. Feel free to turn this toggle on to view all of the advanced options available. However, in most cases and for this tutorial, you can leave the default values for these options.
That’s it! Click the blue “Save Changes” button in the top right corner of the page to add your new custom taxonomy to your Divi site. You’ll need to repeat this process for each taxonomy you want to add.
For our example, I also added an “Event Location” taxonomy with the following settings:
- Plural Label -> Event Locations
- Singular Label -> Event Location
- Taxonomy Key -> event-location
- Post Types -> Event
- Public (toggle) -> On
- Hierarchical (toggle) -> Off
Once added, your new taxonomies will appear under the post type you added them to in the WordPress admin dashboard left sidebar.
Adding Custom Taxonomy Terms
For clarification, “taxonomies” are the structures used to classify posts and custom post types in WordPress. “Terms” are the individual items used within the taxonomies. For example, if our taxonomy is Event Type then a possible term might be “Music”. Music is a term within the Event Type taxonomy.
With that in mind, now that we have our taxonomies created, let’s add some terms. Go to your WordPress dashboard left sidebar -> Events and click on Add New Event. You should see an editor just like the post editor with your new Event Locations and Event Types in the right sidebar. You can now add terms to your first event just like you would add categories and tags to a post.
Notice that the Event Types interface is similar to the post categories interface since we added hierarchical support to it. Also notice that the Event Locations interface is similar to the post tags interface since we did not add hierarchical support to it.
Filtering by Custom Taxonomy in Divi
Now that you’ve added terms within your custom taxonomies to individual events, you’ll want to display them on the front end of your website for your visitors to view them. This is easy to do using the Divi theme and our Divi FilterGrid plugin.
We previously added a new page called Events in our custom post type tutorial. On this page we added the Divi FilterGrid module and modified the query to display events instead of posts.
We also turned off the Show Taxonomy Filters toggle since we didn’t have any custom taxonomies created yet. Now that we have our Event Type and Event Locations taxonomies created, let’s add them to the grid so our users can filter the events.
Edit the Events page and open the Divi FilterGrid module settings. Scroll down to the Taxonomy Filters section and turn on the Show Taxonomy Filters toggle if it’s not already on. By default the module will display post categories in the filters. We can change this by scrolling down to the Filter Taxonomies field, remove Categories, and add one of our new taxonomies.
If we want to display both taxonomies, scroll back up and turn on the Use MultiLevel Filters toggle. A new MultiLevel Taxonomies field will appear. Here we can remove Categories and add Event Types and Event Locations. If you don’t see your new taxonomies listed, click on the Refresh List button to refresh the available taxonomies.
You should now see two sets of filter buttons, one for Event Types and another for Event Locations. You can also change the filter layout to dropdowns in the Filter Options section if you prefer dropdowns over buttons.
Along with our new filters above the grid of events, Divi FilterGrid will display the event featured image, title and author for each event by default. However it’s capable of displaying so much more. If you want to display custom fields for your new custom post type, please have a look at our custom field tutorial which uses the same ACF plugin to add the custom fields.
