Soliloquy Documentation
Documentation, Reference Materials, and Tutorials for Soliloquy
Add Custom HTML to Slides
Would you like add custom HTML to slides for Soliloquy? You can easily do this by installing a custom plugin on your site! We’ll walk you through the steps on how to add custom HTML to your slider 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 some custom HTML to your slider items, we’ll need to create and upload a basic WordPress plugin.
Creating the Plugin
To create this custom query filter, just add the following code to a new file at wp-content/plugins/soliloquy-add-custom-html-to-slides.php.
/**
* Plugin Name: Soliloquy – Add Custom HTML to Slides
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Soliloquy Team
* Author URI: https://soliloquywp.com
* Description: Adds custom HTML to your slides
*/
add_filter( ‘soliloquy_output_caption’, ‘tgm_soliloquy_custom_html’, 10, 4 );
function tgm_soliloquy_custom_html( $html, $id, $image, $i ) {
// If the ID doesn’t match the one we want to modify, return the default HTML output. Change 324 to your image ID.
if ( 265 == $id )
return $html;
// Append custom code output of the caption to do whatever.
$html .= ‘<div class="my-custom-class"><p>My custom stuff!</p></div>’;
// Return the modified HTML output.
return $html;
}[/php]
If you’re unsure how to create a plugin file, follow these steps below:
- 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.
- Next, copy and paste the code shown above into the file and save the file as
soliloquy-add-custom-html-to-slides.php - 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).
- 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.
Note: It’s important to make sure you’ve set your slider ID name inside the plugin on line 14. Just replace the 265 with the slider ID of your slider.
Activate the Plugin
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 Custom HTML to Slides plugin.
The CSS (optional)
Finally, if you’d like some simple CSS to get you started, take a look at the CSS below.
[css].my-custom-class {display: block;
margin: 20px 0;
}
.my-custom-class p{
font-size: 20px;
}[/css]
That’s it! You’ve successfully added custom HTML to your slides.
Would you like to customize Soliloquy further? Have a look at our tutorial on How to filter a Featured Content slider with custom queries.