This tutorial includes 2 templates which display a grid of images. The images are added via custom fields and can be displayed in a 2, 3, 4 or 6 column responsive grid.
The template named five.php uses CSS for columns enabling you to display a 5 column grid.
The 2 templates are coded differently however they both enable you to update/add to the grid simply by using the same custom field name with unique HTML for each image and image link in the value field.
Demo Video
Shows both templates and how to add more fields which display linked images using HTML. Also shows the responsiveness of the columns in the grid on smaller screens and the image hover overlay effect.
3 Columns
Shows unlimited custom fields in a 3 column grid with text overlay displayed on hover:
4 Columns
Shows unlimited fields in a 4 column grid with text overlay displayed on hover :
5 Columns
Shows unlimited fields in a 5 column grid. Text overlay will display on hover :
6 Columns
Shows unlimited fields in a 6 column grid. Text overlay will display on hover :
Icon Overlay
You can also replace the overlay image title with a icon. Swap out the HTML with the following and replace the dashicon with any other. You’ll also need to make sure your theme loads dashicons from functions.php.
Template Installation
There’s 4 steps you need to follow after downloading the templates folder below for logged in members :
Step 1 : From the download folder, upload the 2 files named four.php & five.php to your child themes root directory.
Step 2 : Create a new page and choose either template from the Templates drop down menu in the Page Attributes meta box.
Step 3 : From the download folder, copy the CSS from the style.css file to the end of your child themes style.css file. Clear caching.
Was This Tutorial Helpful?