• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Copied front page template for another page, background images missing…

This topic is: not resolved

Tagged: background images, front page, Infinity Pro, page template

  • This topic has 10 replies, 3 voices, and was last updated 5 years ago by MikeFromTracer.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 24, 2016 at 6:32 pm #196573
    thisisarp
    Member

    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.

    November 25, 2016 at 2:12 am #196578
    Brad Dalton
    Participant

    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?


    Get Help – Book Consultation.

    November 25, 2016 at 9:48 am #196622
    thisisarp
    Member

    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.

    November 26, 2016 at 3:26 am #196647
    Brad Dalton
    Participant

    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


    Get Help – Book Consultation.

    November 26, 2016 at 10:05 am #196660
    thisisarp
    Member

    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.

    November 27, 2016 at 4:23 am #196691
    Brad Dalton
    Participant

    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


    Get Help – Book Consultation.

    November 27, 2016 at 10:58 am #196696
    thisisarp
    Member

    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 😉

    November 27, 2016 at 11:19 am #196697
    Brad Dalton
    Participant

    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.


    Get Help – Book Consultation.

    November 28, 2016 at 9:28 am #196724
    thisisarp
    Member

    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.

    November 29, 2016 at 3:29 am #196760
    Brad Dalton
    Participant

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

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


    Get Help – Book Consultation.

    January 11, 2018 at 4:58 pm #215311
    MikeFromTracer
    Member

    Thanks

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble