Slider In Essence Pro Header Hero – New Version

This tutorial, written for the latest version of Essence Pro, includes the code which enables you to replace the header hero image on the front page with a slider on desktops.

Demo Video

Shows the slider replacing the header hero image on the front page of Essence Pro on desktops and the default header hero background image displaying when the mobile menu displays on smaller screens.

Tested using version 1.5.1 however should work with all older versions of the Essence Pro child theme by StudioPress.

Installation Steps

There’s 3 steps :

1. # Install the Soliloquy slider from the WordPress plugins page and create a new slider named Hero Slider. You must use this name as it generates a slug used in the PHP code used in step 2. Slider configuration settings are included in the download folder.

 


2. # Upload the modified header-functions.php file to your Essence Pro themes lib folder replacing the default file of the same name. Its been modified on line 213 & 217.

 


3. # Copy & paste the CSS from the style.css file and paste it at the end of your Essence Pro themes style sheet and clear all caching types including browser, plugin and server caching.

 

Download Folder

Image Sizes

Image sizes used in the demo video are 1600 by 1000 pixels

Darkened Slider Images

You can use the code in this tutorial to add some darkness to your slider images if using light colored text or bright images.