WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  2. 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!

        • 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;

Leave a Reply