Staff Custom Post Type Grid in Genesis

Luke asked,

@srikat Any suggestions for creating a responsive grid for staff/team member profiles for a "about us" page? CPT?

— Luke McFadden (@peripatew) March 2, 2014

In this article I provide details of setting up a responsive grid view of Staff Members' photos in a grid fashion with their names and position appearing as a transparent overlay.

We are going to:

1. Register 'Staff' CPT using Types.
2. Create 'Staff Position' custom taxonomy attached to 'Staff' CPT using Types.
3. Use template files for Staff CPT archive page and single Staff Member entry page.
4. [optional] Use Views (commercial plugin) to set up a shortcode that displays the Staff Members grid in any WordPress Page/Post.

Staff CPT Archive page:

At 320px width (iPhone Portrait)

Staff Grid on a static Page:

Staff single entry:

Note: The active theme I used in this example is Outreach Pro. But the overall process is the same in any Genesis child theme with minor CSS adjustments where necessary.

Step 1

Install and activate Types.

Add Staff CPT like so:

Ensure that Thumbnail is ticked under 'Display Sections'.

Step 2

Add Staff Position custom taxonomy like so:

Step 3

Go to Staff Members > Add New and create your Staff members entries.

Step 4

Create a file named archive-staff.php in child theme directory having the following code: