About a year ago, I was handed a design comp from a designer that required me to build out an alphabetical index for a custom post type in WordPress. You know, something like this:
…where clicking on one of those letters would take you to a page showing only posts with titles starting with that letter. I managed to cobble together a solution that works pretty well. Not great, but passable. It involved writing quite a few custom functions – one to generate that bunch of links you see in that image above, one to register a query parameter so I could use it in WordPress, and then a few more functions to do the right queries in the database, a bunch of code in the template to make sure I was showing the right posts…and on and on.
I remember spending quite a bit of time hacking that all together and being pretty pleased with the results at the time. And then I promptly forgot about that ball of kludgy code…until that same designer handed me a design comp for another WordPress project just a couple months ago:
…and my first thought was, “Oh hey, I know how to do that. I’ll just open up that project from last year, and copy … OH SWEET MOTHER OF CHEESE WHAT WAS I THINKING?” Yeah. As I started hunting for and finding the bits of code scattered throughout the theme and plugins I’d written to accomplish that last time, I realized that there had to be a better way to go about this.
I was right. You can do this with a lot less code.
I was lucky to come across this post from Kathy is Awesome which set me on a much, much better path, though I quickly realized this bit of code was missing a few important things I needed. But with this little push in the right direction, I was off and running. And here’s how you can accomplish this bit of WP magic:
1. Plan a new plugin
This new plugin is going to do three things:
- Register a custom post type (I’m working with songs and song titles for my example)
- Register a custom taxonomy
- Use the ‘save_post’ hook to automagically assign new posts to the right taxonomy
If you’re going to be creating an alphabetical index of regular old blog posts, then you can skip that first step.
And, in case you’re wondering, yes, you could do all three of these things in your theme’s
functions.php. But chances are that you’d like to have your custom post type, custom taxonomy, and alphabetical index available even if you decide to change themes or re-design your site, so a plugin is the better way to go.
2. Create a plugin
/wp-content/plugins and create a new folder. I’m going to call mine
alphaindex. Then create a blank
index.php inside that folder.
Now, inside of
index.php, we’ll add our header comment that tells WordPress about our plugin:
3. Register a custom post type
Next up, we’ll create a custom post type. I’m working with songs for my example, so I’ll create a post type called ‘song’.
This is a pretty common WordPress thing, so I won’t go into detail about creating a custom post type here. If you want to learn more about working with custom post types, check out the Codex.
4. Register a custom taxonomy
Now that we have a custom post type, we’ll create a custom taxonomy for that post type. I’m going to call mine ‘alpha':
Again, since this is a pretty common WordPress thing, I won’t go into detail about creating custom taxonomies – there’s the Codex if you want to learn more. But I do want to point out a couple of important things about the way this taxonomy is set up.
First, be sure to set
'false'. We don’t want to work with a hierarchical taxonomy here. Next, by setting
false, we’re hiding the taxonomy from the WordPress admin. That allows our alphabetical index to appear to work automagically – you can set that to
true if you want to see the taxonomy in the WordPress admin for troubleshooting or to assure that it’s working as expecting while you’re coding it up.
Also, yes, if you wanted to, you could register the custom post type and and the custom taxonomy inside the same function since they both get called on the
'init' hook. It works fine either way – just personal preference.
5. Automagically assign the correct taxonomy to the post when it’s saved
We’ll use the
save_post hook. Here’s the function:
I’ve included comments throughout to explain what we’re doing step-by-step. Now, each time we save a post, the correct alphabetical taxonomy gets assigned.
6. Link to letters
Now that we’ve used a taxonomy for the letters of the alphabet, we’re just working with a taxonomy. To display a list of links to each letter, we just use
wp_list_categories in the theme templates wherever we want them to display:
If you want to set up a special layout for these pages, create a
taxonomy-alpha.php template in your theme.
7. Sort the posts alphabetically
Since we’re sorting our posts by alphabet letters, it makes the most sense to also sort them alphabetically. We’ll use the
pre_get_posts hook. Use this function:
Now anytime we view the post archive for our custom post type or an archive page for our alpha taxonomy, the posts will be sorted alphabetically.
Now, next year if I need to do this again, hopefully I won’t find my code quite as cringeworthy. I especially like that we’re using the taxonomy functionality that’s already a part of WordPress – it makes it easier to work with and makes for nicer URLs too. Yay for no query parameters being required (as long as you’re using pretty permalinks of course).
In my case, I was creating this alphabetical index on a new site that didn’t have any content yet. What if you’re adding an alphabetical index to a site that already has dozens or hundreds of posts? That original post I referenced over at Kathy is Awesome shows you how to go through any existing posts and assign them to the correct taxonomy.
Image credit: Kristin Nador