In this tutorial we shall work on setting up archive of a wedding Custom Post Type with a 2-column grid of thumbnails (if present, otherwise a placeholder image) each linking to the respective single CPT entry.
Below each image is a row of icons which when clicked displays the value of corresponding custom field in a lightbox powered by Magnific Popup. Left and right arrows in the lightbox lets the visitors navigate across the various fields for multiple entries.
The plugin used in this example for creating the CPT and custom fields is Pods.
Step 1
Install and activate Pods.
Create a wedding CPT.
In the 'Advanced Options' you may want to set the Archive page Slug as weddings so that the URL of the CPT archive is http://example.com/weddings rather than http://example.com/wedding.
Also tick the support for Featured image.
Add custom fields.
Step 2
Add your CPT entries. Set featured images and populate the custom fields.
Dimensions of featured images used in this example are 800 x 450.
We are going to code such that if a field is not populated, its icon is not going to appear on the front end.
Step 3
Add the following in child theme's functions.php:
Hi Sridhar,
Just out of curiosity, is Pods an alternative solution to ACF or wouldn’t ACF work here?
Thanks,
Pods is for creating and managing custom post types, taxonomies and fields. ACF is a dedicated plugin for fields. For adding simple custom fields (unlike advanced ones like Repeater and Flexible Content), Pods is sufficient and it’s better to just use a single plugin (Pods) if it is also used for other purposes (like creating the CPT in this example).