Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Output Custom Slider Item CSS Classes

Important: This doc assumes you’re comfortable creating and/or editing PHP files in your WordPress installation and is intended for advanced users.

You can add a custom CSS class to all of your Soliloquy slides following this guide.

Step 1 – Create Plugin File

The first step is to create a new php file in the wp-content/plugins/ directory of your WordPress installation. The easiest way to do this is using your favorite FTP program or through your web hosting account’s file editor (if they provide one).

Once you’ve navigated to the wp-content/plugins/ directory, create a new file with the name soliloquy-output-custom-slider-item-classes.php

Step 2 – Edit the New Plugin File

Next, you’ll want to copy and paste the following code into the soliloquy-output-custom-slider-item-classes.php plugin file you’ve created:

<?php
/**
* Plugin Name: Soliloquy - Output Custom Slider Item Classes
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Tim Carr
* Author URI: http://www.n7studios.co.uk
* Description: Add custom classes to Soliloquy Slider <li> elements
*/

/**
* Exclude the Soliloquy CPT from search results
*
* @param array $classes CSS Classes
* @param array $item Slider Item
* @param int $i Slider Index
* @param array $data Slider Data
* @return array CSS Classes
*/
function sol_soliloquy_output_custom_slider_item_classes( $classes, $item, $i, $data ) {
	
	$classes[] = 'my-custom-class'; // Change this to the CSS class you want to add to your slides
	
	return $classes;
	
}
add_filter( 'soliloquy_output_item_classes', 'sol_soliloquy_output_custom_slider_item_classes', 10, 4 );

Step 3 – Activate the New Plugin

The last step is to navigate to the WordPress Admin > Plugins screen, locate the plugin named Soliloquy – Output Custom Slider Item Classes and activate the plugin.

That’s it! You’ve successfully added a custom CSS class to all of your slides!

[i]
[i]