In this project I created a WordPress gallery from Custom Post Type’s featured images using Isotope filter combined with lightGallery.
With Isotope You can filter items like portfolio, gallery images or any kind of HTML elements.
lightGallery displays images in Lightbox in a very fancy way with captions and paginations. During WordPress development, I strive to use as few plugins as possible. So I implemented these features directly in my child theme. I prefer Genesis Framework, but it can be used in any WordPress Theme.
Step #1 – Create a Custom Post Type
Create a Custom Post Type called Gallery and upload some images from Pixabay.
Step #2 – Upload Images
You can upload your own images, but if You want to use that pictures that I used, click here to download the demo file.
Every post has a featured image we’re going to sort them by category and display the title dynamically in the gallery.
Step #3 – Build the filter
To Loop through the categories and echo out as buttons create a file named templates/filter.php and paste the following code in it:
Step #4 – Echo out the CPT’s category slug as class
Add this to functions.php
Step #5 – Echo out the featured image source url
Using the standard the_post_thumbnail() function isn’t going to work in this case. So I created a function to use in the loop.
Add this to functions.php
Step #6 – Display the gallery images
We use The Loop to display the featured images as posts of Gallery CPT.
Create a file named templates/gallery.php in your child-theme.
Step #7 – Create a shortcode
User this shortcode to display filter and the gallery:
[isotope-gallery]
Step #8 – SCSS for Isotope Gallery
Step #9 – Initialize Gallery
Create a new file in your child-theme/isotope/js/gallery-init.js
Step #10 – Enqueue scripts
If you have any problem with the implementation CONTACT me.
Leave a Reply