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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
//* Add new image size for Staff members
add_image_size( 'staff', 300, 400, true );
 
//* Show Staff Type custom taxonomy terms and tags in Staff archive pages
add_filter( 'genesis_post_meta', 'custom_portfolio_post_meta' );
function custom_portfolio_post_meta( $post_meta ) {
 
if ( is_post_type_archive( 'staff' ) || is_singular( 'staff' ) || is_tax('staff-position') )
$post_meta = '[post_terms taxonomy="staff-position" before="Position: "]<br/>[post_tags before="Tagged With: "]';
 
return $post_meta;
 
}
 
/**
* Template Redirect
* Use archive-staff.php for staff-position taxonomy archive.
*/
add_filter( 'template_include', 'sk_template_redirect' );
function sk_template_redirect( $template ) {
 
if ( is_tax( 'staff-position' ) )
$template = get_query_template( 'archive-staff' );
return $template;
 
}
view raw functions.php hosted with ❤ by GitHub

Step 5

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
<?php
/**
* This file adds the custom staff post type archive template.
*
*/
 
//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
 
//* Remove the breadcrumb navigation
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
 
//* Remove post title
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
 
//* Remove the post info function
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
 
//* Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
 
//* Remove the post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
 
//* Add staff-grid-archive body class
add_filter( 'body_class', 'sk_add_staff_body_class' );
function sk_add_staff_body_class( $classes ) {
 
$classes[] = 'staff-grid-archive';
return $classes;
 
}
 
/**
* Display as Columns
*
*/
function be_portfolio_post_class( $classes ) {
$columns = 4;
 
$column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
$classes[] = $column_classes[$columns];
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
$classes[] = 'first';
 
return $classes;
}
add_filter( 'post_class', 'be_portfolio_post_class' );
 
add_action ('genesis_before_loop', 'sk_staff_grid_title');
function sk_staff_grid_title() {
 
echo '<h1 itemprop="headline" class="staff-section-title">Staff Members</h1>';
 
}
 
//* Featured image, post title and meta
add_action( 'genesis_entry_header', 'sk_staff_grid' );
function sk_staff_grid() {
 
if ( $image = genesis_get_image( 'format=url&size=staff' ) ) {
printf( '<div class="staff-featured-image"><a href="%s" target="foobox" data-width="650px" data-height="230px" rel="bookmark"><img src="%s" alt="%s" /></a></div>', thefooboxcontent(), $image, the_title_attribute( 'echo=0' ) );
 
echo '<div class="title-meta">';
genesis_do_post_title();
genesis_post_meta();
echo '</div>';
}
 
}
 
//* Construct the link for each featured image. Ex.: #staff-member1 for latest Staff post, #staff-member2 for the post before that and so on..
function thefooboxcontent() {
 
// return '#staff-member' . get_the_ID();
global $wp_query;
return '#staff-member' . ($wp_query->current_post + 1);
}
 
//* Remove the post meta function
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
 
add_action ( 'genesis_after_entry', 'display_foobox_content' );
function display_foobox_content() {
 
// echo '<div id="staff-member' . get_the_ID() . '" style="display: none;"><div class="lightbox-content">'; genesis_do_post_title();
global $wp_query;
echo '<div id="staff-member' . ($wp_query->current_post + 1) . '" style="display: none;"><div class="lightbox-content">'; genesis_do_post_title();
echo '<p>'. get_the_excerpt() . '</p></div></div>';
 
}
 
//* Modify the Excerpt read more link
add_filter('excerpt_more', 'new_excerpt_more');
function new_excerpt_more($more) {
 
return '... <a class="more-link" href="' . get_permalink() . '">Read More</a>';
 
}
 
//* Customize the previous page link
add_filter ( 'genesis_prev_link_text' , 'sp_previous_page_link' );
function sp_previous_page_link ( $text ) {
return g_ent( '&laquo; ' ) . __( 'Previous Page', CHILD_DOMAIN );
}
 
//* Customize the next page link
add_filter ( 'genesis_next_link_text' , 'sp_next_page_link' );
function sp_next_page_link ( $text ) {
return __( 'Next Page', CHILD_DOMAIN ) . g_ent( ' &raquo; ' );
}
 
genesis();
view raw archive-staff.php hosted with ❤ by GitHub

Step 6

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<?php
/**
* This file adds the custom staff post type single post template.
*
*/
 
//* Force full width content layout
// add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
 
//* Remove the breadcrumb navigation
// remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
 
//* Remove the post info function
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
 
//* Remove the author box on single posts
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );
 
//* Remove the post meta function
// remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
 
//* Add the featured image
add_action( 'genesis_entry_content', 'sk_show_featured_image', 9 );
function sk_show_featured_image() {
 
if ( $image = genesis_get_image( 'format=url&size=staff' ) ) {
printf( '<div class="staff-featured-image-sigle"><img src="%s" alt="%s" class="alignleft" /></div>', $image, the_title_attribute( 'echo=0' ) );
 
}
 
}
 
//* Previous and Next Post navigation
add_action('genesis_after_entry', 'sk_custom_post_nav');
function sk_custom_post_nav() {
 
echo '<div class="prev-next-post-links">';
previous_post_link('<div class="previous-post-link">&laquo; %link</div>', '<strong>%title</strong>' );
next_post_link('<div class="next-post-link">%link &raquo;</div>', '<strong>%title</strong>' );
echo '</div>';
 
}
 
genesis();
view raw single-staff.php hosted with ❤ by GitHub

Step 7

Add the following in child theme’s style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
/* Staff Grid
--------------------- */
 
.staff-section-title {
font-size: 30px;
font-weight: bold;
margin-bottom: 30px;
}
 
.staff-grid-archive .content .entry-header,
.staff-profile {
position: relative;
}
 
.staff-featured-image img {
vertical-align: top;
/*width: 100%;*/
}
 
.title-meta {
background: rgba(0, 0, 0, 0.5);
padding: 15px;
position: absolute;
bottom: 0;
left: 0;
}
 
.staff-grid-archive .content .entry-title,
.staff-profile .entry-title {
margin-bottom: 4px;
line-height: 1;
}
 
.staff-grid-archive .content .entry-title a,
.staff-profile .entry-title a {
color: #fff;
}
 
.staff-grid-archive .content p.entry-meta,
.staff-profile p.entry-meta {
color: #bbb;
text-transform: none;
font-size: 13px;
margin-bottom: 0;
}
 
.staff-grid-archive .content p.entry-meta a,
.staff-profile p.entry-meta a {
color: #fff;
}
 
.archive-pagination {
clear: both;
}
 
.lightbox-content {
padding: 20px;
line-height: 1.4;
}
 
.previous-post-link {
float: left;
}
 
.next-post-link {
float: right;
}
 
.featured-content .one-half,
.featured-content .one-third,
.featured-content .one-fourth,
.featured-content .one-fifth,
.featured-content .one-sixth {
width: 100%;
float: none;
margin: 0;
}
 
@media only screen and (max-width: 1023px) {
 
.staff-grid-archive .content .entry-title,
.staff-profile .entry-title {
font-size: 25px;
}
 
.title-meta {
padding: 10px;
}
 
}
 
@media only screen and (max-width: 860px) {
 
.staff-grid-archive .content .entry {
width: 45%;
margin-right: 40px;
}
 
.staff-grid-archive .content .entry:nth-of-type(2n) {
margin-right: 0;
clear: none;
}
 
.title-meta {
position: static;
background: transparent;
}
 
.staff-grid-archive .content .entry-title a, .staff-profile .entry-title a,
.staff-grid-archive .content p.entry-meta a, .staff-profile p.entry-meta a {
color: #333;
}
 
.staff-grid-archive .entry {
margin-bottom: 30px;
}
 
}
 
@media only screen and (max-width: 532px) {
 
.staff-grid-archive .content .entry {
width: 100%;
margin-right: 0;
}
 
}
view raw style.css hosted with ❤ by GitHub

Step 8

Install and activate FooBox. Go to Settings > FooBox > Advanced and tick “Scripts In Footer’.

That’s it!

Credit: Photos used in the demo site/screenshots are courtesy of gettyimages.

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 369 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    Excellent post, Sridhar! Thank you! I’ve been scouring the Internet and used several staff member plugins but nothing comes close to the caliber and professionalism that this look will achieve. I’m going to incorporate this today into Centric Pro and Winning Agent.

  2. Samedi says

    Nice one Sridhar!! Just one quick query…is it possible to include the featured image in the lightbox popup?

  3. says

    Sridhar, I’m writing a plugin based on this excellent tutorial to basically make this functionality available by clicking “install.” I wondered how you’d like to be credited?

    All your ideas, though I’ll probably implement the lightboxes differently to avoid needing the commercial plugin (I believe thick box is included within WordPress already).

  4. emily says

    really love this tut, thanks so much! in fact, i like it so much i’d like to use only the lightbox for my staff post content. does anyone know how i can disable the link of the staff member’s name (the one that sends you to the post page)?

    thanks for any advice
    emily

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>