This members-only tutorial provides the steps to display entries of a team_member custom post type as a grid of featured image and title which when clicked opens a lightbox having the title, value of job title custom field, featured image, entry content and other custom fields like email and Linkedin links.

Team archive page

Clicking on a team profile shows member info incl. custom fields in a lightbox

Step 1

Let us register a custom image size for the team member images.

Install and activate Code Snippets plugin.

Add a new snippet titled say, Custom image sizes.

Code:

add_image_size( 'team-image', 280, 280, true );

Save changes and activate.

Step 2

Let us register the new CPT.

Install and activate Custom Post Type UI.

Go to CPT UI > Add/Edit Post Types and create the team_member post type.

Set Has Archive to True.

Enter team as the CPT archive slug.

Step 3

Install and activate Advanced Custom Fields.

Create your desired custom fields for the team_member post type using ACF (free or pro).

Here's the export file of the above fields from my test site.

Step 4

Go to Team Members > Add New and add your team members.

Step 5

Load Lity, a lightweight, accessible and responsive lightbox on the CPT archive.

Install and activate My Custom Functionality plugin.

Edit the plugin's file, plugin.php and add the following inside custom_enqueue_files():

if ( is_post_type_archive( 'team_member' ) ) {
	wp_enqueue_style( 'lity', plugin_dir_url( __FILE__ ) . 'assets/css/lity.min.css' );

	wp_enqueue_script( 'lity', plugin_dir_url( __FILE__ ) . 'assets/js/lity.min.js', '', '3.0.0', true );
}

Screenshot

Step 6

Create a new Oxygen Template for the CPT archive.

Go to Oxygen > Templates > Add New Template.

Click Edit with Oxygen.

Add a Section.

Add a Heading and change the text to say, "Our Team".

Add an Easy Posts component.

Templates > Template PHP:

Replace the entire existing code with:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: