Staff Grid in Genesis with clickable featured images opening Excerpts in a lightbox popup

This article is based on my post titled Staff CPT Grid in Genesis.

Below are the primary differences:

1. Usage of Column Classes for the grid, thanks to code from Bill Erickson.
2. Clicking on Staff Member's photo will display that member's bio (Staff CPT entry excerpt) in a lightbox via FooBox (commercial plugin).

We are going to:

  1. Register 'Staff' CPT using Types.
  2. Create 'Staff Position' custom taxonomy attached to 'Staff' CPT using Types.
  3. Use PHP template files for Staff CPT archive page and single Staff Member entry page.
  4. Use FooBox for lightbox.
  5. Write necessary CSS to take care of responsive styling.

Staff CPT Archive page:

staff-cpt-archive-genesis

When a staff member's photo is clicked, that CPT entry's Post Excerpt will be shown in a lighbox:

staff-member-bio-lightbox-popup

Staff single entry:

single-staff-genesis

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-genesis

Step 4

Add the following in child theme's functions.php:

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

Already a member? Log in below or here.