• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

AgentPress Pro – Front Page Slider Background

This tutorial provides the code & instructions for replacing the background image on the front page with a slide show. Here’s the demo video:

  • The solution also removes the background image setting from the WordPress customizer.
  • You can add as many images to the slider as you like and upload them to your WordPress Media Library.
  • You can also very easily add the slider behind any widget area or div container.

Here’s the code and installation instructions for logged in members:

Register for full access

Related Tutorials

  • Slider Behind Site Header & Home Featured Widget In AgentPress Pro

AgentPress Pro Theme Slider

Reader Interactions

Comments

  1. Mark Roberts says

    June 9, 2019 at 1:24 pm

    Hello!

    This worked perfect. How do I add text and linking to each slide?

    Thanks, Mark

    Log in to Reply
    • Brad Dalton says

      June 9, 2019 at 5:31 pm

      You can’t add text and a link when using backstretch. You would need to use a slider like Soliloquy which would require a completely different solution like this https://wpsites.net/web-design/slider-behind-site-header-home-featured-widget-in-agentpress-pro/

      Then you will need to add CSS for positioning your captions or use the premium version of the slider which contains a setting to do this.

      Log in to Reply
      • Mark Roberts says

        June 11, 2019 at 11:04 am

        Okay that’s what I thought, just checking.

        Log in to Reply
  2. Diana Brackmann says

    April 5, 2019 at 11:33 am

    Hi
    The images on my homepage scroll through once and remain on the last image in my backstretch-set.js.

    I was wondering if there was an additional field in the object {fade: 750,
    duration: 500} that I could set where it would continually rotate the images? Or would I create some loop?

    Thanks so much!

    Log in to Reply
    • Brad Dalton says

      April 7, 2019 at 9:51 pm

      Try loop:true

      Log in to Reply
  3. Pebblehaven Company says

    October 10, 2018 at 6:00 am

    Using this on a site that has the Agency Pro Theme. How do we make it so the images only rotate on the home page?

    Log in to Reply
    • Brad Dalton says

      October 10, 2018 at 7:43 am

      Where are you loading the jQuery?

      You can add the PHP code to load the jQuery in the front page template of functions file with a conditional tag.

      if ( ! is_front_page() )
          return;
      Log in to Reply
      • Pebblehaven Company says

        October 10, 2018 at 8:04 am

        We are loading the jQuery in the backstretch-set.js file of the Agency Pro themes js folder.

        Log in to Reply
        • Brad Dalton says

          October 10, 2018 at 8:08 am

          No, the PHP code which loads the jQuery will look something like this :

          // Enqueue scripts.
          add_action( 'wp_enqueue_scripts', 'agentpress_front_page_enqueue_scripts' );
          function agentpress_front_page_enqueue_scripts() {
          
          	// Load scripts only if custom background is being used.
          	if ( ! get_option( 'agentpress-home-image' ) )
          		return;
          
          	// Enqueue Backstretch scripts.
          	wp_enqueue_script( 'agentpress-backstretch', get_stylesheet_directory_uri() . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
          	wp_enqueue_script( 'agentpress-backstretch-set', get_stylesheet_directory_uri() .'/js/backstretch-set.js' , array( 'jquery', 'agentpress-backstretch' ), '1.0.0' );
          
          	wp_localize_script( 'agentpress-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_option( 'agentpress-home-image' ) ) ) );
          
          	// Add agentpress-pro-home body class.
          	add_filter( 'body_class', 'agentpress_body_class' );
          
          }

          Which you can modify to this :

          // Enqueue scripts.
          add_action( 'wp_enqueue_scripts', 'front_page_enqueue_scripts' );
          function front_page_enqueue_scripts() {
          		
          	if ( ! is_front_page() )
          		return;	
          
          	// Enqueue Backstretch scripts.
          	wp_enqueue_script( 'agentpress-backstretch', get_stylesheet_directory_uri() . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
          	wp_enqueue_script( 'agentpress-backstretch-set', get_stylesheet_directory_uri() .'/js/backstretch-set.js' , array( 'jquery', 'agentpress-backstretch' ), '1.0.0' );
          
          	wp_localize_script( 'agentpress-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_option( 'agentpress-home-image' ) ) ) );
          
          }

          And use in your functions file. Otherwise, use the above code in your fro nt page template without the conditional tag :

          if ( ! is_front_page() )
              return;
          Log in to Reply
  4. Dessalyn Murray says

    July 28, 2018 at 10:21 am

    My page is blank now, no image. Not sure what i did wrong.

    http://jdstrongtower.woctestsite.com

    Log in to Reply
    • Dessalyn Murray says

      July 28, 2018 at 10:59 am

      Please disregard. I got the fix to work.

      Log in to Reply
      • Brad Dalton says

        July 28, 2018 at 11:14 am

        Don’t forget to swap out the links in the jQuery to your images hosted on your server as the demo image links in the jQuery are hosted on a local installation of WordPress.

        Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags