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:

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

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

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