Copied front page template for another page, background images missing…

[thisisarp]

I'm trying the Infinity Pro theme and want to use the front page layout for a sales page (basically a landing page with the same widget areas). I made a copy of the template and can select/use it now. All is good except the background images.

Is there a function to add the css automatically to pages using the Sales template? I can of course just use CSS but I'm looking for a solution that won't require editing every time I change an image.

[Brad Dalton]

If the template is a copy of the front page then it will include the classes in the templates HTML which render the same CSS.

I assume you want to use different background images to what's used on the front page. Is that what your issue is?

---

Tutorials for StudioPress Themes & WooCommerce.

[thisisarp]

That's correct. But the CSS for the background images is outputted in the source code of the home page only.

<style id='infinity-pro-inline-css' type='text/css'>
.front-page-1 { background-image: url(//blah/pic.jpg); }.front-page-3 { background-image: url(//blah/pic.jpg); }.front-page-5 { background-image: url(//blah/pic.jpg); }.front-page-7 { background-image: url(//blah/pic.jpg); }

The inline-css is output on all pages but the portion with the background images is *only* on the front page.

I'm sure there's a function where I could copy that & also output it to pages that uses the Sales template (ie a copy of the Homepage template) but I haven't found it yet. Or at least do so based on the page ID involved.

[Brad Dalton]

To use different image backgrounds on pages using the template, you have several options.

1. You can add more customize settings ( Use the existing PHP code as a guide )
2. You can use custom fields if wanting to use unique images on different pages using the template
3. You can use custom CSS to add the unique images

---

Tutorials for StudioPress Themes & WooCommerce.

[thisisarp]

Thanks - I know those are my options. I haven't found the current php code yet - that's more the assistance I'm looking for.

[Brad Dalton]

Understand. There's a fair amount of work involved in doing that, it's not a simple copy and paste job or a small modification of existing code.

The process involves replicating all the code for the front page template using unique i.d's including:

1. The front-page.php file
2. The PHP code for adding the customizer section in the lib > customize.php
3. The PHP code in the output.php file
4. The PHP code for the widgets in functions.php

---

Tutorials for StudioPress Themes & WooCommerce.

[thisisarp]

All I'm trying to do is output the css for the bg images that appears on the home page. I found the relevant code in output.php:

foreach ( $settings as $section => $value ) {

		$background = $value['image'] ? sprintf( 'background-image: url(%s);', $value['image'] ) : '';

		if ( is_front_page() ) {
			$css .= ( ! empty( $section ) && ! empty( $background ) ) ? sprintf( '.front-page-%s { %s }', $section, $background ) : '';
		}

	}

I tried a couple of variants on it, taking out what seemed to be irrelevant. This one, to get it to output based on page ID, broke the site:

function infinity_css_sales() {
	$handle  = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
	$opts = apply_filters( 'infinity_images', array( '1', '3', '5', '7' ) );
	$settings = array();
	foreach( $opts as $opt ) {
		$settings[$opt]['image'] = preg_replace( '/^https?:/', '', get_option( $opt .'-infinity-image', sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $opt ) ) );
	}
	$css = '';
	foreach ( $settings as $section => $value ) {

		$background = $value['image'] ? sprintf( 'background-image: url(%s);', $value['image'] ) : '';

		if ( is_single( '632' )  )   ) {
			$css .= ( ! empty( $section ) && ! empty( $background ) ) ? sprintf( '.front-page-%s { %s }', $section, $background ) : '';
		}

	}
	if ( $css ) {
		wp_add_inline_style( $handle, $css );
	}
}

This one, trying to output based on the page template (which would be ideal) didn't break the site but didn't work either (my new template's filename is sales-page.php and is located in the root theme folder):

function infinity_css_sales() {
	$handle  = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
	$opts = apply_filters( 'infinity_images', array( '1', '3', '5', '7' ) );
	$settings = array();
	foreach( $opts as $opt ) {
		$settings[$opt]['image'] = preg_replace( '/^https?:/', '', get_option( $opt .'-infinity-image', sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $opt ) ) );
	}
	$css = '';
	foreach ( $settings as $section => $value ) {

		$background = $value['image'] ? sprintf( 'background-image: url(%s);', $value['image'] ) : '';

		if ( is_page_template( 'sales-page.php' )   ) {
			$css .= ( ! empty( $section ) && ! empty( $background ) ) ? sprintf( '.front-page-%s { %s }', $section, $background ) : '';
		}

	}
	if ( $css ) {
		wp_add_inline_style( $handle, $css );
	}
}

I know I'm close but am clearly missing something. I know enough php to get in trouble 😉

[Brad Dalton]

You can either remove the conditional tag

if ( is_front_page() ) { 
}

Or

Add the conditional to include the template

if ( is_front_page() || is_page_template()) { 
}

Make sure you get the is_page_template() conditional right. Not sure what your template file name is.

---

Tutorials for StudioPress Themes & WooCommerce.

[thisisarp]

This one, trying to output based on the page template (which would be ideal) didn't break the site but didn't work either (my new template's filename is sales-page.php and is located in the root theme folder):

I gave it a shot but no dice.

[Brad Dalton]

I tested this solution and it works for me. See video demo

You need to get the conditional right for your page template.

---

Tutorials for StudioPress Themes & WooCommerce.

[MikeFromTracer]

Thanks

[Author]

Posts