Create A Staff Listing with Custom Post Types in WordPress
One of the most significant turning points in the history of WordPress is when version 3.0 came out in 2010. It included Custom Post Types, which allowed a developer to create entirely new kinds of content, manage how the administrative interface looked, and create unique templates for rendering the content on the front of the website.
A great, albeit simple, example of this is a Staff Listing. If you think about what a staff listing needs, it includes:
- A page listing all of the staff (or a page with pagination if there are too many)
- A single page for each staff person, with relevant data like phone number, office location, email address, etc.
- The ability to organize staff into groups, like departments, locations, etc.
A combination of a custom post type, meta fields, and custom taxonomies can create these pages, plus the administrative interface, in 30 minutes or less. Here’s how I did it.
Assembling the Tools
The Custom Post Type Plugin
The first thing I did is make the code for the custom post type. For this I used GenerateWP. It’s a multistage form that asks simple questions and at the end it delivers all of the code.
I wanted that code in a plugin, so I used Pluginception, a free plugin from Otto that lets you fill out a simple form and it creates an empty plugin. Then you paste in the code from GenerateWP and you have a plugin that creates your post type!
Custom Meta Fields
The Post Type doesn’t add any new fields to WordPress, it still has the same ones as a Post. So if I want fields like First Name, Last Name, Phone Number, etc., I need to create them. For this I used Advanced Custom Fields. There’s a commercial version of this plugin, but the free version does everything we need it to. This gave me an easy to use interface for creating fields and attaching them to my Post Type.
And this in turn gave me the fields I wanted in my Post Type editor.
That was it for the tools! Next comes the part where we make them look nice.
The View
For a theme I chose GeneratePress, though Custom Post Types work with any theme. There’s a commercial version of this one as well, but again the free version did everything we needed.
By default GeneratePress renders all Custom Post Types the same way it does Posts. I wanted to make some custom templates, and NOT have them get overwritten every time the plugin updated, so it was time to make a Child Theme. Fortunately GeneratePress provides a free child theme template. I installed that, dropped in some custom template files, put some CSS into the child theme style.css and ended up with an archive page like this:
and a Single page like this:
Note in the menu of the screenshots is an All Staff link. Since WordPress knows about this post type, it fits into all the functions of WordPress, including the Menu Manager.
Just a couple clicks and the menu is built!
I recently completed a 12 part video series for ostraining.com called Using Custom Post Types to Create a Plugin, showing how to do all of the above, step-by-step and more. Follow along and you can see how easy it is to build super powerful tools with WordPress!