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 1Install and activate Soliloquy (free lite version or the commercial version). Create a slider named say,
Client Logosand 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 2Add 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.