Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Display Slider Title Before Slide Container

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

Sometimes it’s useful to display the title of your slider when embedding it in a post or page. It’s simple to add this function for all sliders, or just a select few.

All Sliders

To display the slider title above all sliders on your site, add the following code to your active theme’s functions.php file:

add_filter( 'soliloquy_output_start', 'ekf_titled_soliloquy', 10, 2 );
function ekf_titled_soliloquy($output, $data) {
	
       if( empty( $data['id'] ) ){
             return;
       }

       $sol_id = $data['id'];
       return '<h2 class="soliloquy-title">' . get_the_title( $sol_id ) . '</h2>';
	
}

Individual Sliders

To display the slider title above a few specific sliders on your site, add the following code to your active theme’s functions.php file. Be sure to update the IDs in this example to list your specific slider IDs:

add_filter( 'soliloquy_output_start', 'ekf_titled_soliloquy', 10, 2 );
function ekf_titled_soliloquy($output, $data) {
	
       // ID's of specific sliders to show title of
       $slidersToShowTitles = array(
              17,
              18	
       );
	
       // Check if we need to display title of this slider
       if( empty( $data['id'] ) || !in_array( $data['id'], $slidersToShowTitles ) ){
              return;
       }
	
       $sol_id = $data['id'];
       return '&lt;h2 class="soliloquy-title"&gt;' . get_the_title( $sol_id ) . '&lt;/h2&gt;';
	
}

Now your slider will appear below its own title.

You can now show the title of your slider with a simple snippet of code.


Styling the Slider Title (optional)

The title is wrapped in a h2 tag with the class soliloquy-title so you can easily style it with CSS. Let’s go ahead and add a little style to this title by adding the following CSS to the active theme’s style.css file, or to individual slides using the CSS Addon:

h2.soliloquy-title {
       padding: 2em 2em 1em;
       text-align: center;
}

Now our title appears with some added space, and centered.

Styling the slider title is easy with CSS.

[i]
[i]