Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Display the Slide Title Before Caption

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

An easy way to enhance your slider’s appearance is displaying the slide title before its caption, which you’ve defined in the Edit Metadata lightbox.

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.

Step 1 – PHP Filter

First, add the following snippet to the bottom of your active theme’s functions.php file to output the slide title:

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;
}

Now you can see the title is appearing before the caption, but still needs some style to make it attractive.

Adding the image slide's title before the caption is easy in Soliloquy.

Step 2 – CSS Styling

Next, 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;
}

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!

[i]
[i]