Super Charge Your WordPress Categories With Free Plugins
Recently I was thinking through the process of making a Travel website. We would have blog posts about specific resorts and then a custom taxonomy called Destinations that would hold things like “Hawaii” and “Canary Islands”. WordPress was built for this kind of thing, so sorting and organizing posts by these Destinations is fast and easy.
The problem is, when I go to an Archive page of posts about Hawaii for example, our options for information about Hawaii are pretty limited. By default, terms can only have a Name, plain text Description, Slug, and a related Parent.
What I really want is a Featured Image, custom fields, and a dynamic description field. I could get all these things if I made Destinations into a Custom Post Type, but then I would be breaking from the wonderful built in relationships, user interface, and speed of a taxonomy.
Fortunately, we can get all of those things for taxonomy terms, and we can do it with free plugins. Here’s how.
Featured Image
I want a featured image so that I can render it at the top of my term page. Posts with the Hawaii term will get a beautiful beach scene at the top.
For this we’re going to use the plugin “Simple Featured Image”. It hasn’t been updated in a while, but it still works great.
SFI creates a settings page under the Settings menu, and in there you set what Taxonomy you want it to appear on. Don’t forget this, or you’ll be terribly confused about how to use it!
Once it’s installed and activated, on the form for new Terms and existing Terms you’ll see a field like this:
When you click the Upload/Add button it open the normal WordPress media library user interface and you set a featured image, just like with a post.
Once you’ve selected an image it looks like this:
And then on the Term list admin page you’ll see something like this:
And then we have a featured image!
Dynamic Description
The description field for Terms is plain text, which isn’t bad as long as you don’t want anything more interesting. I like adding the TinyMCE editor which used to be the default in WordPress. For this we’ll use the plugin “Visual Term Description Editor”.
IMPORTANT: The Yoast SEO plugin also enables this feature. If you’re already using Yoast you don’t need this. If you’re not using Yoast, don’t install it ONLY for this feature.
There are no settings for this plugin, it simply makes all Term descriptions in all taxonomies have the TinyMCE editor. It looks like this:
And then the main Term list admin page looks something like this:
So now we have a featured image, and better descriptions, but I also want some custom fields. Here’s how we’ll do that.
Custom Fields
Term Meta has existed as a feature in WordPress for quite a while now, but using them is still a bit of a chore. There’s a wonderful article at Smashing Magazine about how to build them yourself with code.
You can also use most of the common custom fields libraries like MetaBox.io and CMB2 to still do it with code, but in a smooth, standardized way.
For this post we’re going to choose the easiest way, which is Advanced Custom Fields. We’re using the free version found on WordPress.org. The pro version would obviously work as well.
If you’re already familiar with ACF, to get custom fields on Terms your Location should look like this:
I added a Field Group called Destination Details, with a standard “URL” type field to it like this:
And in the Term editor it looks like this:
More Custom Fields
I didn’t add any more for my examples, but I’m sure if you’re familiar with ACF or any other custom field manager you can imagine the power. Here are some other examples of custom fields you could add:
- Coordinates fields so you can render a Google Map
- An actual Map field you can you simply click to get the coordinates
- Meta information about the Destination like population, roads quality, international airport access, important cultural details, etc.
The list goes on as far as your imagination can take it.
Using This Information
Now that your taxonomy Terms are power houses of information, how do you see that information on your website?
Making a Template File
For this one you’re going to be creating and editing a template file. Most modern themes have a file called archive.php, and this is the file that renders your Post archive. Some themes also have a file called category.php, and this file is used to show an archive of posts in specific categories.
If you’ve added all the above fields to the default Category taxonomy associated with Posts, you’ll want to do this next part in category.php. If it doesn’t exist, you can copy archive.php to category.php.
If you’re using a custom taxonomy like I did, you’ll want to copy either category.php or archive.php to taxonomy-{taxonomy}.php, where {taxonomy} is the slug of your taxonomy. You can find the slug by going to the Taxonomy admin page and looking in the URL. I made a Destinations taxonomy, but my slug is travel_destination, and looks like this:
So my template file is called taxonomy-travel_destination.php.
Getting The Information
Featured Image
The plugin we used has a custom function to get the image. You can display the Taxonomy Featured Image in the front end using this php function.
wpsfi_display_image( $termID, $size = 'medium', $class = '', $width = '', $height = '' );
Parameters:
- $termID – (Integer) Taxonomy termID
- $size – (String) Image size
- $class – (String) Add custom class
- $width – (Integer) Width in px
- $height – (Integer) Height in px
Description
We didn’t really change how the description works, only what we can type into it in the form. Therefore the default WordPress functions work to print the descriptions.
get_the_archive_description() will get the description and allow you to put it into a variable, or process it with a sanitization function or something. Then you would print that variable like this:
$description = get_the_archive_description();
print wp_kses_post( $description );
Alternatively you could simply use the_archive_description() which will echo the content for you.
Custom Fields
How you get your custom fields depends on how you created them. If you made your own plugin, following the instructions in that Smashing Magazine article, you’ll want to use a WordPress function called get_term_meta() which works exactly like get_post_meta(). You pass it a TermID, the key of the field you want, and a flag to show if it’s singular or plural.
If you used a library like ACF, Metabox.io, or CMB2 you’ll probably want to use their custom functions for getting data.
For example, we used ACF to make a field called more_information. To get the contents of that field you would use something like this:
// get the current taxonomy term
$term = get_queried_object();
// var
$term_url = get_field( 'more_information', $term );
// make a link
echo '<a href="' . esc_url( $term_url ) . '">More Information</a>';
CMB2 and Metabox.io each have their own methods, you’ll want to research those in their documentation.
Summary
So now in my imaginary travel website, each location, like Hawaii, is going to have a beautiful banner at the top, information about the destination, and some extra information, like a link to get more information, and anything else I want to put in.
This turns your archive pages from a simple list of posts to something that looks like a well designed web page.