Building an Admin System in WordPress With Custom Post Types, Taxonomies and Meta Boxes

Posted by & filed under WordPress.

Building an Admin System in WordPress With Custom Post Types, Taxonomies and Meta Boxes

WordPress introduced some majorly important updates when version 3.0 was released back in June last year. Some of the new features have really helped shake off any of the persistent rumblings about WordPress not being a true CMS. As with all new updates to a platform like this, it requires you to learn a little bit more about the system. And I find the best way to learn is to do.

Before I start – this is not going to a be code-heavy how-to post. There are plenty of them around, better written than I ever could and I’ll make reference to them as I go. This is really just a collection of examples of how I used certain aspects of WordPress to get what I wanted out of it. I’ll give code examples along the way, but to fully understand how to use them, you should check out the accompanying links.

An admin site is something I’ve needed for a long time. It had to work the way I expected, the way I wanted and the way that made sense to me. And I thought I’d make use of all these new WordPress features while I was at it. Two birds, one stone.

The aim: to be able to add clients and projects as elements in their own right

What for?

Custom post types of clients and projects

New Clients and Projects custom post types

Previously you would need to add a ‘post’ that had been coded up to function how you wanted. A bit of hackery was involved to make them appear as something very customised and display them where you wanted, especially if you were running a blog as well (WordPress blogs use posts as the default display method)

What did I do?

Set up a new custom post type for clients. With a few lines of code in the functions.php file it’s pretty easy to do this.

function wpt_client_posttype() {
    register_post_type( 'clients',
        array(
            'labels' => array(
                'name' => __( 'Clients' ),
                'singular_name' => __( 'Client' ),
                'add_new' => __( 'Add New Client' ),
                'add_new_item' => __( 'Add New Client' ),
                'edit_item' => __( 'Edit Client' ),
                'new_item' => __( 'Add New Client' ),
                'view_item' => __( 'View Client' ),
                'search_items' => __( 'Search Client' ),
                'not_found' => __( 'No clients found' ),
                'not_found_in_trash' => __( 'No clients found in trash' )
            ),
            'public' => true,
            'supports' => array( 'title', 'editor', 'thumbnail', 'comments', 'custom-fields' ),
            'capability_type' => 'post',
            'rewrite' => array("slug" => "clients"), // Permalinks format
            'menu_position' => 5,
            'register_meta_box_cb' => 'add_clients_metaboxes'
        )
    );
}

add_action( 'init', 'wpt_client_posttype' );

Now you’ll have a new section in the left nav of you WordPress admin where you can view clients and add new ones. How satisfying is that! All you need to do now is create a new single-clients.php and customise the hell out of it until you get the kind of page you’re looking for.

Custom post types in-depth: Six Revisions: WordPress Custom Post Types Guide | Justin Tadlock: Custom post types in WordPress

Bonus: Use this Custom Post Type UI plugin to speed up adding and editing custom post types.

The aim: add new ways of filtering content through custom taxonomies

What for?

Taxonomies for clients

Multiple new taxonomies for Clients

In the same way categories and tags are ways of grouping related content, taxonomies are your opportunity to make a new kind of group. Using taxonomies I would be able to add groupings such as location, package type, company type etc etc. I would then be able to associate each client to each of these.

What did I do?

Instead of setting up tonnes of categories and tags which all have inherently the same value, I registered some new taxonomies in the functions.php file. To add a taxonomy use the following code:

add_action( 'init', 'create_company_type' );
function create_company_type() {
 $labels = array(
    'name' => _x( 'Company Type', 'taxonomy general name' ),
    'singular_name' => _x( 'Company Type', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Company Types' ),
    'all_items' => __( 'All Company Types' ),
    'parent_item' => __( 'Parent Company Type' ),
    'parent_item_colon' => __( 'Parent Company Type:' ),
    'edit_item' => __( 'Edit Company Type' ),
    'update_item' => __( 'Update Company Type' ),
    'add_new_item' => __( 'Add New Company Type' ),
    'new_item_name' => __( 'New Company Type Name' ),
  ); 	

  register_taxonomy('company_type','clients',array(
    'hierarchical' => true,
    'labels' => $labels
  ));
}

You’ve just registered a new taxonomy to your previous custom post type of clients. That means you can now enter as many different types of company as you want through the WordPress admin, as you would with regular categories, and then select which one your client belongs to. Imagine how far you can take this…

Custom taxonomies in-depth: Six Revisions: A Guide to WordPress Custom Taxonomy | Justin Tadlock: Post types and taxonomies: Linking terms to a specific post and Custom taxonomies in WordPress 2.8

Bonus: Use the same Custom Post Type UI as above to create new taxonomies and link them to specific post types.

The aim: add truly custom meta boxes that display only when adding or editing clients

What for?

I say ‘truly’ because by default WordPress offers a custom fields box which you can manipulate to do anything with. But if you want to add custom fields that have their own title and input field, and that are only displayed when adding a new client, you have to be a bit more clever. For example, if I wanted to add a website address for a client – the website would not need to be a taxonomy or category in itself because I would never sort clients by website address. So they would go in as flat data using a custom meta box.

What did I do?

Use the functions.php file to add a bunch of meta boxes to the custom post type of ‘clients’. The code is as follows:

// Add the Clients Meta Boxes

function add_events_metaboxes() {
    add_meta_box('wpt_website_address', 'Website Address', 'wpt_website_address', 'clients', 'side', 'default');
}

This will add a nice and neat little box to the side of your main content area where you can enter a website address for the client.

Custom meta boxes

Custom meta boxes for client info

Custom meta boxes in-depth: Shiba Shake: Add a Standard WordPress Meta-Box | Farinspace: How to Create A Custom WordPress Meta Box Instead of Using WordPress Custom Fields

Bonus: Use the Verve Meta Boxes plugin to add all sorts of new meta boxes.

The (nearly) finished product

Mixing all of these features together and with some customised single.php and taxonomy.php templates, this is what I ended up with. It’s not finished (probably won’t ever be as I continue to add functionality/improvements) and I’m still uploading content, but at least I now have a platform I’m comfortable with and that does the majority of what I need.

Client logos

Client page using native WordPress featured images

Single client page

Single client page

Details

Client details

Projects page

Projects page sorted by progress and showing project type (taxonomy)

Single project

Single project page showing filterable taxonomies such as server numbers, domain renewal dates and documentation provided

File repository

File repository for templates and re-usable docs (looking a bit bare at the moment)

Schedules and knowledgebase

Integrated Google calendars for schedules page and knowledgebase page

It was actually really enjoyable to build for many reasons. Partly, because my primary browser is Firefox, so I didn’t need to concern myself with Internet Explorer and cross-browser compatibility (although it does render pretty neatly outside of FF). But also, manipulating your own data rather than a clients’ for a change is actually very satisfying because you know exactly how it should work and be used. The only restraints are ones you decide to impose on yourself.

This is nowhere near finished and I intend to work on it over time to build up to a more robust and complete system.

Conclusion

This is obviously not a comprehensive post on how to combine custom post types, taxonomies and meta boxes. More an indication of how they could be used to compile something very customised.

While the introduction of these new features certainly improves the WordPress system as a whole, the features are not entirely complete and small bugs do exist. Though I have no doubt they will all be squished over time and hopefully some nice UI built into the core to add and manage them all. Still, these features alone have taken WordPress from awesome blogging platform/potential CMS to fully-fledged CMS as far as I’m concerned. Good work guys.

Other Thoughts Like This


Leave a Reply