• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

Lots of people are now powering their business websites with WordPress, one feature that a lot of business websites need is a staff listing section. You could accomplish this using normal pages, but a more elegant solution is to add a custom post type for handling staff and a custom taxonomy for handling the departments. In this tutorial Im going to walk you through how to add a staff area to your WordPress admin menu along with a nice icon that matches the WordPress UI. You can download everything at the end as a plugin.

Theme Functions or Plugin ?

The first thing to do is decide whether you would like to build this into your theme’s functions.php file or create it as a plugin. I would highly recommend creating it as a plugin – that way, if you change themes in future you will not lose any data you have stored for the staff custom post type. This tutorial will assume you are creating a plugin, the code is the same if you want to place it in your functions.php however.

Create Plugin File

Create a new php file and name it “staff.php” and paste this code at the top, editing for your own details where necessary :

<?php
Plugin Name: Staff Custom Post Type
Description: Adds custom post types for staff members
Version: 0.1
License: GPL
Author: Oli Dale
Author URI: http://wplift.com
*/

That is the standard way to create a plugin – save it in a folder called “Staff-Plugin”.

Create Custom Post Type for Staff

Next up, we need to add the code which will create our custom post type.
Paste in the following code :

add_action( 'init', 'register_cpt_staff' );

function register_cpt_staff() {

    $labels = array(
        'name' => _x( 'Staff', 'staff' ),
        'singular_name' => _x( 'Staff', 'staff' ),
        'add_new' => _x( 'Add New', 'staff' ),
        'add_new_item' => _x( 'Add New Staff Member', 'staff' ),
        'edit_item' => _x( 'Edit Staff Member', 'staff' ),
        'new_item' => _x( 'New Staff Member', 'staff' ),
        'view_item' => _x( 'View Staff Member', 'staff' ),
        'search_items' => _x( 'Search Staff', 'staff' ),
        'not_found' => _x( 'No staff found', 'staff' ),
        'not_found_in_trash' => _x( 'No staff found in Trash', 'staff' ),
        'parent_item_colon' => _x( 'Parent Staff:', 'staff' ),
        'menu_name' => _x( 'Staff', 'staff' ),
    );

    $args = array(
        'labels' => $labels,
        'hierarchical' => true,
        'description' => 'Staff names and descriptions',
        'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'menu_position' => 20,
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'staff', $args );
}

I found this really handy tool the other day which is online custom post type generator, add it to your bookmarks – makes things a lot quicker. If you’d like to see in a little more detail about custom post types, see our guide to them here.

Create the Custom Taxonomy for Departments

Next up we need to create a custom taxonomy which will be “departments”, this is so when you add a staff member you can choose which department to put them in, rather than using a normal category that the blog or pages use. Add this code :

function department_init() {
  register_taxonomy('department',array('staff'), array(

    'hierarchical' => true,
    'labels' => array(
    'name' => _x( 'Department', 'taxonomy general name' ),
    'singular_name' => _x( 'Department', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Departments' ),
    'all_items' => __( 'All Departments' ),
    'parent_item' => __( 'Parent Department' ),
    'parent_item_colon' => __( 'Parent Department:' ),
    'edit_item' => __( 'Edit Department' ),
    'update_item' => __( 'Update Department' ),
    'add_new_item' => __( 'Add New Department' ),
    'new_item_name' => __( 'New Department Name' ),
    'menu_name' => __( 'Department' ),
  ),
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'department' ),
  ));
}
add_action( 'init', 'department_init' );

See our guide to custom taxonomies if you would like more info about them.

Creating the Icons

Because we are creating a new menu item within the WordPress admin area, we need to create a new icon for this staff section which matches the rest of the UI. A great resource I found the other day which makes this process easier provides you with an icon template in .PSD format along with the code to use this in your plugin. Download the template and you can create your icons at the various sizes required ( do this in the boxes provided) and then hide the background layer and choose “save for web” and it will save out all the icon sizes you need. Place these in a folder called “images” within your plugin folder.

Add Icon Code

Now we need to add some code to display the icons, add the following to your plugin file :

add_action( 'admin_head', 'custom_post_type_icon' );

function custom_post_type_icon() {
    ?>
    <style>
        /* Admin Menu - 16px */
        #menu-posts-staff .wp-menu-image {
            background: url(<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/Staff-Plugin/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
        }
		#menu-posts-staff:hover .wp-menu-image, #menu-posts-staff.wp-has-current-submenu .wp-menu-image {
            background-position: 6px -26px !important;
        }
        /* Post Screen - 32px */
        .icon32-posts-staff {
        	background: url(<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/Staff-Plugin/images/icon-adminpage32.png) no-repeat left top !important;
        }
        @media
        only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (   min--moz-device-pixel-ratio: 1.5),
        only screen and (     -o-min-device-pixel-ratio: 3/2),
        only screen and (        min-device-pixel-ratio: 1.5) {
        	
        	/* Admin Menu - 16px @2x */
        	#menu-posts-staff .wp-menu-image {
        		background-image: url('<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/Staff-Plugin/images/icon-adminmenu16-sprite@2x.png') !important;
        		-webkit-background-size: 16px 48px;
        		-moz-background-size: 16px 48px;
        		background-size: 16px 48px;
        	}
        	/* Post Screen - 32px @2x */
        	.icon32-posts-staff {
        		background-image: url('<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/Staff-Plugin/images/icon-adminpage32@2x.png') !important;
        		-webkit-background-size: 32px 32px;
        		-moz-background-size: 32px 32px;
        		background-size: 32px 32px;
        	}         
        }
    </style>
<?php } 
?>

Now you can save your plugin file and upload the folder to your “wp-content/plugins” folder.

Displaying Your Staff Pages and Staff Archives

You will need two pages added to your theme folder to display this new custom post type, take page.php from your theme folder and save it as “single-staff.php” and take category.php and save it as “archive-staff.php” and upload these new files to your theme directory. Add the following to “single-staff.php” to display the staff photo and which department they are in :

<h1><?php the_title(); ?></h1>
<p><?php the_post_thumbnail( ); ?></p>
<p><?php echo get_the_term_list( $post->ID, 'department', 'Department: ', ', ', '' ); ?></p>
<?php the_content(); ?>

You can leave “archive-staff.php” as it is, or also add these into that as well.

How to Add Staff and Departments

Upload an activate the plugin and you will see it adds a new menu called “staff” :

Visit the “Department” link to add all your departments – this works the same as categories currently do. Visit “Add New” to add a new staff member – you can enter a name, description and use the “Featured Image” link to upload their photo :

And finally the “Staff” link lists all your staff members that have been added and lets you edit or delete them. Visiting yoursiteurl.com/staff will list all the staff using the archive-staff.php template and clicking through will show you the individual staff pages :

Conclusion and Plugin Download

There is an example of putting the WordPress custom post types and taxonomies to use for a business website. Following through this tutorial you should be able to see other uses such as for customer testimonials, a portfolio or anything else related to your business.

The following file contains the plugin, images and theme template files (remember to move these to your theme folder).

Download the Plugin »


Post Tags

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

15 Comments

  1. You’ve written a good quality article, thank you! I learned a lot from your article. Truly you have shown me the benefits!
    http://www.hivisits.com 

  2. Anonymous

    Very nice tutorial, loved the icon part. As for theme’s functions.php or plugin, A child theme can also solve the updates problem so if a theme gets updated the child theme’s function.php remains the same. However many people are using child themes on different wordpress frameworks so for those users creating a plugin would be the best option. 

  3. sammy

    Hi there,
    I am new to wordpress but your tutorial was brilliant. One quick question, I am hosting wordpress internal as an intranet using wamp/apache. when adding a staff memeber details I can preview the post fine, but when I use the permalink that the preview post gives to link to the page it displays a message “not found, sorry but you are looking for something that isnt here”, I am creating a list of employees and trying to get their named linked to their pages, any ideas?

  4. Easy to follow tutorial. Nice touch with the icon. But why not create a custom taxonomy for the User object instead, this way you could connect actual users to it.

  5. hi buddy.. awesome tutorial.. 1 thing i wants to know, if i want to display all staff members in about us page… how can i do that ..? plz do reply me

  6. Fantastic been looking for something like this for ages …great work …just one thing is ther a widget for a featured staff member i can put on my home page and it picks a random member of staff shows there picture and write-up

  7. How would you add additional meta to this post type. For example, I’d like a box that I could enter the staff phone number, email address and so on. Would this work with this type of plugin to hard code it in?

  8. Thank you for every other informative site. The
    place else could I am getting that type of
    information written in such a perfect manner? I’ve
    a mission that I’m just now running on, and I have been on the
    glance out for such info.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors