Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Display the Slide Title Before Caption

Would you like your slider to display the image title before the caption? We can definitely help you with that! We’ll walk you through how to show you image title before your caption and give you some styling tips as well!

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 show the slide title before the caption, we’ll need to create and upload a basic WordPress plugin.


Creating the Plugin

To set the image title before your captions, just add the following code to a new file at wp-content/plugins/soliloquy-display-title-before-caption.php.

<?php 
 /**
 * Plugin Name: Soliloquy - Display Slide Title Before
 * Plugin URI:  https://soliloquywp.com
 * Description: Plugin that sets the image title before the caption
 * Author:      Soliloquy Team
 * Author URI:  https://soliloquywp.com
 * Version:     1.0
 * Domain Path: languages
 */

add_filter( 'soliloquy_output_caption', 'sol_soliloquy_title_before_caption', 10, 5 );
function sol_soliloquy_title_before_caption( $caption, $id, $slide, $data, $i ) {
     
    // Check if current slide has a title specified
    if ( isset( $slide['title'] ) && !empty( $slide['title'] ) ) {
        $caption = '<h4 class="title">' . $slide['title'] . '</h4>'; 
                $caption .= '<div class="caption">' . $slide['caption'] . '</div>'; 
        } 
        return $caption;
}

We’re going to tell Soliloquy to output the title in a h4 tag just before the caption text, and add some CSS to style it.

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-display-title-before-caption.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.

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 – Display Slide Title Before plugin.

Activate the custom plugin to display the title before the caption

The CSS (optional)

Finally, we’ll use CSS to style the slide title. Use the following CSS to get started and customize to fit your specific needs.

Add the following CSS to your active theme’s style.css file:

.soliloquy-caption h4.title {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
        font-style: normal;
	line-height: 1.5em;
	margin-bottom: 5px;
}

.soliloquy-caption span.caption {
        text-align: center;
}

With the CSS above, we can now show the title before the caption

Styling the titled caption in Soliloquy requires only a few lines of CSS.

That’s it, you now have a beautifully styled slider with a titled caption!

Would you like to check out some of our other styling tutorials? Have a look at our complete list of Styling documentation.