Sridhar Katakam

Genesis and WordPress Tutorials

Soliloquy Image Grid in WordPress

by 5 Comments

One of the reasons why I prefer Soliloquy over other slider plugins is the abundant number of hooks and filters which provide complete control of the HTML output.

This tutorial provides the steps to loop through the image slides (client logos, in this example) of a Soliloquy slider and display them in a grid using CSS Grid.

Backend:

Frontend:

(Note: The logos of respective companies have only been used for demonstration purposes. They are not my/our clients. Want that privilege? Get in touch ;)

The order in which images appear can easily be changed by drag and drop.

Images will be linking to their corresponding URLs (if the URLs have been entered in the Metadata).

While the tutorial has been tested in Genesis, it should work with a few adjustments in any WordPress theme

Step 1

Install and activate Soliloquy (free lite version or the commercial version).

Create a slider named say, Client Logos and select/upload your desired logo images.

Arrange the images in the order that would like them to appear on the frontend. We are only going to fetch the image data from this slider in our code, but not any settings. Hence 'Config' and 'Misc' tabs (available in the commercial edition) need not be configured.

Step 2

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.

  • Hi Sridhar, I am using Soliloquy paid version. How can I display a caption under each of the images?

    I added a Caption to each image in the Slider setup and corresponding CSS, but it is not displaying:

    Assessment

    Thank you for this tutorial!

    Reply
    • >