Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Add Link Classes

Would you like to add link classes to your Soliloquy lightbox images? We can walk you through each step on how to do this! Follow the tutorial below to add custom link classes to your Soliloquy lightbox images.

Note: This tutorial is a bit more technical than our other docs, but we’ll walk you through the process step by step. In order to add custom link classes, we’ll need to create and upload a basic WordPress plugin.


To automatically add custom class names to lightbox links and video lightbox links, just add the following code to a new file at wp-content/plugins/soliloquy-add-link-classes.php.

<?php
/**
* Plugin Name: Soliloquy - Add Classes to Links
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Soliloquy Team
* Author URI: http://www.n7studios.co.uk
* Description: Add CSS classes to slide links
*/

/** Add CSS classes to image slide links */
function sol_soliloquy_add_image_classes( $classes, $id, $item, $data, $i ) {
	
	$classes[] = 'my-class';
	return $classes;

}

add_filter( 'soliloquy_get_image_slide_link_classes', 'sol_soliloquy_add_image_classes', 10, 5 );

/** Add CSS classes to video slide links */
function sol_soliloquy_add_video_classes( $classes, $id, $item, $data, $i ) {
	
	$classes[] = 'my-class';
	return $classes;

}

add_filter( 'soliloquy_get_video_slide_link_classes', 'sol_soliloquy_add_video_classes', 10, 5 );

If you’re unsure how to create a plugin file, follow these steps below:

  1. Open a text file and make sure that it is a plain text document. You can use a plain text editor like Notepad or a code editor of your choice.
  2. Next, copy and paste the code shown above into the file and save the file as soliloquy-add-link-classes.php
  3. Once you’ve saved the file you can easily upload this directly to your /plugins directory on your server using FTP or you can right-click on the text document and zip (or compress).
  4. Finally, log in to your WordPress dashboard and go to Plugins » Add New » Upload Plugin and upload the .zip file you just created in the previous step.

Your next step is to activate the plugin you just uploaded. Simply navigate to the Plugins from within your WordPress dashboard and activate the Soliloquy – Add Classes to Links plugin.

Activate the custom plugin to add a specific link class to your lightbox links

You can now inspect your image and see the new class added to the image link.

Now you can see your new link class added to the image

Would you like to see how easy it is to add a custom class to the slider item? Take a look at our article on How to Output Custom Slider Item CSS Classes.

[i]
[i]