Sridhar Katakam

Genesis and WordPress Tutorials

Staff Custom Post Type Grid in Genesis

by 13 Comments

Luke asked,

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:

staff-members

At 320px width (iPhone Portrait)

Staff Grid on a static Page:

staff-grid-on-a-static-page

Staff single entry:

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:

adding-staff-cpt

Ensure that Thumbnail is ticked under 'Display Sections'.

Step 2

Add Staff Position custom taxonomy like so:

adding-staff-position-taxonomy

Step 3

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

adding-staff-member

Step 4

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

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • HI Sridhar,

    Looks like something I’ve been wanting to implement on a site but I’m wondering — how would this work if there were a lot of staff! Would it just show all staff members on one long page or would it be possible to paginate or sort?

    Will give it a try tomorrow.

    Reply

  • Hi Sridhar,

    Once again what an awesome tutorial. Could you please advise how I can change the word “Position” from the staff profile and put the word “Topic” as I am using this approach for guest speakers?

    Thanks in advance.

    Reply

  • Sridhar

    Great tutorial as always. Wondering how I could display some taxonomies and their terms under the featured image in the single-cpt template? e.g Title: General Manager | Phone: 555-1212 | Location: New York

    Thanks!

    Reply

  • If I don’t use Views, how do I choose the custom style when I create the new page for the staff directory? I’ve done the rest of the steps, but I’m new to WordPress, so could use some help. Thanks!

    Reply

  • Awesome tutorial as always! To display in a widget, let’s use the Parallax Pro theme as an example, should I just create a shortcode and add to a text widget?

    Thanks,

    -David G.

    Reply

  • Hello Sridhar,

    Thanks for this tutorial and other Genesis-related articles. I am developing a simple/basic custom post type and taxonomy plugin for a product on my site but I am having a touch time displaying it using a Genesis Child theme. I am currently developing it locally to before I use it on my main site. While it looks straightforward with just an ordinary WordPress theme, outputting in a Genesis Child theme has been challenging.

    Do you have a similar post? I have been searching but no success.

    Reply
    • >