Display Slider Title Before Slide Container

Would you like your slider to display the slider title before the slider? This is very easy to do with just a few steps! We’ll walk you through how to display the slider title above the slider.

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

Creating the Plugin
Activate the Plugin
The CSS (optional)
FAQs
- Can I only do this for a few sliders instead of all?

Creating the Plugin

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

[php]<?php
/**
* Plugin Name: Soliloquy – Display Slider Title Before the Slider Container
* Plugin URI: https://soliloquywp.com
* Description: Plugin that sets the image title before the slider container
* Author: Soliloquy Team
* Author URI: https://soliloquywp.com
* Version: 1.0
* Domain Path: languages
*/

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-heading">’ . get_the_title( $sol_id ) . ‘</h2>’;

}[/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-display-title-before-container.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.

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 Slider Title Before the Slider Container plugin.

The CSS (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:

[css]h2.soliloquy-heading {
padding: 2em 2em 1em;
text-align: center;
}[/css]

And that’s it! You’re slider title will now appear above your slider.

Would you like to display the image title before the image caption with Soliloquy? Take a look at our article on How to Display the Slide Title Before Caption.

FAQs

Can I only do this for a few sliders instead of all?

A: Of course! If you only want to target a select few sliders, just alter the plugin code above with this instead:

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 ‘<h2 class="soliloquy-title">’ . get_the_title( $sol_id ) . ‘</h2>’;