Background-image on other pages

[Eduardo]

I'm currently working on the Agency Pro theme.

How do I remove the background image from all pages except the front-page.php?

I've covered it using a lot of margin and padding on the content but it's still there. I'd like to remove it.

http://staging.trytobosa.org

[Marcy]

You would find the section - //* Enqueue Backstretch script and prepare images for loading - in functions.php
and change it by adding the "if ( is_front_page() )", with the included brackets, like:

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {

if ( is_front_page() ) {
	//* Load scripts only if custom background is being used
	if ( ! get_background_image() )
		return;

	wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

	wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_background_image() ) ) );
	}
}

---

Marcy | Amethyst Website Design | Twitter

[Eduardo]

Thanks for responding Marcy. My code has something a tiny bit different.
Here's the original code:

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {

	$image = get_option( 'agency-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );

	//* Load scripts only if custom backstretch image is being used
	if ( ! empty( $image ) ) {

		wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
		wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

		wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );
	}
}

Here's what I added trying to try and follow your directions:

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {

	$image = get_option( 'agency-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );

if ( is_front_page() ) {
		//* Load scripts only if custom backstretch image is being used
		if ( ! empty( $image ) ) {

			wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
			wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

			wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );

		}
	}
}

Unfortunately, the background image is still loading on other pages.

[Brad Dalton]

Another option is to take the code from your functions file and paste it into your front-page.php file so its only loads in that template.

---

Tutorials for StudioPress Themes.

[Eduardo]

Thanks Braddalton. I cut and pasted the code into front-page.php, but unfortunately, it's still loading on my other pages. Hmm.

[Brad Dalton]

Did you delete it from your functions file?

---

Tutorials for StudioPress Themes.

[naczel]

Thanks for responding Marcy. My code has something a tiny bit different.

[dev]

Braddalton, et. al.:

Could you do this by giving all your pages and posts a class like "internal-page-post" and use this class in CSS like:

.internal-page-post { background: white !important;}

There might be more classes to add to the above selector, but would it work? Or is code the only/best way to do this?

Most of you folks (especially braddalton) are better at CSS than I will ever be!

[Marcy]

Yes, you can add the is_front_page() conditional to functions.php, OR you can cut and paste the original, unedited function from functions.php into front_page.php.

Also be sure to clear the server cache, and also your browser cache.

---

Marcy | Amethyst Website Design | Twitter

[Brad Dalton]

@dev Yes, don't see why not. I'm sure there are many different methods to achieve the same result. Thanks for your support.

---

Tutorials for StudioPress Themes.

[Eduardo]

@braddalton, I did indeed delete the code from the functions.php file. Is this a problem?

[Eduardo]

@Marcy, I'm currently doing my work in local environment. How do I clear the server cache in this situation?

[Marcy]

OK. I l added the theme to local to test again, and this is what I did.

1. I looked at the code again, and a better way of writing it in functions.php is to combine the if statements. I don't think it was needed, but that's what I tested for you.

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {

	$image = get_option( 'agency-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );
	
	//* Load scripts only if custom backstretch image is being used
	if ( ! empty( $image ) && is_front_page() ) {

		wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
		wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

		wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );
	
	}
}

2. Go to Appearance > Customize and then Background Image. Delete and save any image that you have there.
Now check the outside (not the view in the customizer). Reload home page. Is there an image on the home page? Is there no image on other pages?
If image is not just on home page, do Step 3.

3. Go to Appearance > Customize. This time, click Backstretch image. Remove any image that is there and Save. Then you can add a different image and Save (it doesn't matter what it is.). Then remove that image and add the other one back. Save and all should be good.

---

Marcy | Amethyst Website Design | Twitter

[Eduardo]

Thank you, Marcy. This worked great!

[Marcy]

You're welcome, Eduardo! Glad it worked for you.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts