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.

AgentPress Front Page 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.

Slider Settings

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

5 responses to “Slider Behind Site Header & Home Featured Widget In AgentPress Pro”

  1. Mark Roberts Avatar
    Mark Roberts

    That’s what I thought but when I change to 1920px it’s removing the image and slider on anything over 1600px

    1. Tested and works.

      @media screen and (max-width: 1023px), (min-width: 1920px)

      @media screen and (min-width: 1023px) and (max-width: 1920px)

      Also set the slider settings to 1920px width

      Did you clear caching?

      1. Please send login details to brad@wpsites.net or Facebook messaging http://m.me/wpsites.net

  2. Mark Roberts Avatar
    Mark Roberts

    Is there a way to make the slider work with a larger screen size, 1920px?

    1. Change the width in the following lines of CSS from 1600px to 1920px

      @media screen and (max-width: 1023px), (min-width: 1600px)

      @media screen and (min-width: 1023px) and (max-width: 1600px)

Was This Tutorial Helpful?