WP SITES

Log in

Display Agency Pro Background Image Only On Front Page

—

by

Brad Dalton

Marc from the StudioPress Community Forums asked this question recently:

Does any one have a technique or advice on how best to have the background image display on only the home page and a solid background on all other pages/posts?

agency pro

The home page is actually the posts page determined by your Reading Settings and can be your blog page so i think Marc actually means the front page.

There’s different ways you can do this however the easiest is to simply copy and paste the PHP code from your child themes functions file into your front-page.php template file.

Here’s the code that needs moving:

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

<pre><code>//* 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' =&gt; get_background_image() ) );
</code></pre>

}

That’s all you need to do to make sure the image you add under Appearance > Background, is displayed on the front page of your site only.

2nd Method

An easier way to control your background image is simply to add a conditional tag to the existing code for the front page:

if ( ! is_front_page() || ! get_background_image() )
        return;

Changing Background Color – Exclude Front Page

Simply use the Background Color tool on the same page:

background color

Change Background Color – Front Page Only

Simply add this code near the end of your child themes style.css file before the Media Queries:

.home {
    background-color: red;
}

But Its Not Working

Note: If you’re using a static page as your front page, you will need to leave the code in your functions file and add a conditional tag for the page(s) you want the background image to display on. Another solution is to install the WP Backstretch plugin which enables you to conditionally display background images on specific pages.

This solution only works when you use the default WordPress Reading Settings and will not work if you select a static page as your front page.

reading settings

Related Templates & Code

Comments

5 responses to “Display Agency Pro Background Image Only On Front Page”

  1. David Smith Avatar
    David Smith

    It didn’t work for me

    I added the following:
    [code]
    //* Enqueue Backstretch script and prepare images for loading
    add_action( ‘wp_enqueue_scripts’, ‘agency_enqueue_backstretch_scripts’ );
    function agency_enqueue_backstretch_scripts() {

    //* 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’ => get_background_image() ) );

    }
    [/code]

    1. Brad Dalton Avatar
      Brad Dalton

      Support provided for members only.

  2. Kim Avatar
    Kim

    I tried this, but it made my blog page the home page. It didn’t seem to work.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Kim

      The title of this post clearly states this solution only works on the front page.

      Worked perfectly when i tested it and also worked without any problems on client sites.

      Please be aware that code in your front-page.php file only works on your front page and will not work when you select another page (Like a static page) as your front page.

      To clarify, the code in your front-page.php file only works when you use the default Reading Settings. If you change these settings and select your Front page displays a Static Page, then clearly, the code in your front-page file will not work.

      I have updated this post to include other solutions for displaying a background image conditionally, which i had originally linked to as other options when i first published this post.

      Thanks for your comment and i hope you get it sorted out.

    2. Brad Dalton Avatar
      Brad Dalton

      Here’s the updated post which includes a solution that you need http://wpsites.net/web-design/resize-background-images/#Only_Display_Background_Image_On_Specific_Pages

      You may need to change the conditional tag to suit your own preferences

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.