Slider Behind Site Header & Home Featured Widget In AgentPress Pro

This solution replaces the background image which that displays behind the site header and home featured widget area with a slider.

The code in this tutorial produces a similar result to this tutorial, however it uses a slider plugin rather than jQuery added to your theme files.

In this case, we only replace the image with the slider between specific screen widths which are are 1023px and 1600px.

When the screen width is greater than 1600px, the default background image is displayed.

Demo Video #

Shows the slider images displaying in replace of the background image behind the home featured widget area in the AgentPress Pro child theme by StudioPress.

Installation – Support Included #

There’s 3 steps :

Step 1 – Install the Responsive WordPress Slider – Soliloquy Lite and create a new slider named Slider using the following configuration settings. The slider slug, needs to be named slider as it matches the slug in the PHP code added in step 2.

Step 2 – Upload the front-page.php file replacing the default front page template in the AgentPress Pro themes root directory.

The modified front-page.php file contains the following code already added to the file between lines 28 – 38 :

Related Tutorials

• AgentPress Pro – Front Page Slider Background