Appending Markup to Slides in Soliloquy

This is a simple little snippet. On a project I’m working I had a need to include social share buttons with each item in a carousel slider.

Anyone who asks me knows that I’m a big fan of Soliloquy, from Thomas Griffin Media. I’m a fan because it’s a simple solution with some nifty add-ons and does what I need it to without too much fuss.

With the 2.x update Soliloquy added some filters to their plugin, making adding your own markup to your slides easier.

/* Filter to Append HTML to Slides
============================================= */
add_filter( 'soliloquy_output_slide', 'tgm_soliloquy_custom_html', 10, 4 );
function tgm_soliloquy_custom_html( $html, $id, $image, $data ) {
 $slider_id = $data['id']; // Get Slider ID
 $slider_img= $image['src']; // Optional; Getting Image URL from slider object
 if ( '1937' != $slider_id ) return $html;  // If the ID doesn't match the one we want to modify, return the default HTML output. Change 1937 to your slider ID.
 ob_start(); ?>
 // Your Custom Markup to append goes here.

$data[‘id’] grabs the value of the ID slider you wish to target. You don’t need to do anything with this if you plan on appending custom markup to all of your slides.

Since I’m targeting only one slide I’ll be using the conditional statement below.

if ( ‘1937’ = $slider_id ) return $html;

Plugin your own slide ID in place of 1937.

We’re using an output buffer to hold our markup, clean it up/sanitize it and then appending it to each slider object.

Give it a spin on your next project.