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.
Install and activate Pods.
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.
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.
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.