Can I use “is_page_template” to create different background images?

  • I’m helping my mom put up a blog/website for her garden club.
    https://www.newarkohiogardenclub.org
    There are 3 background images they would like available for different pages of the website portion to be added later as it develops. I am trying to create 3 page templates so that they can choose any of the backgrounds from the admin add a page panel.

    I found this thread and used the code as a basis to try and incorporate the is_page_template tags.
    https://www.ads-software.com/support/topic/329144?replies=22

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php if (is_page_template (‘page_maroon.php’) ):
    // page 1 ?>
    <style type=”text/css”>
    body {background-color:#000;background-image:url(/images/bg_maroon.jpg);background-repeat:no-repeat;}
    </style>
    <?php elseif (is_page_template (‘page_green.php’) ):
    // page 2?>
    <style type=”text/css”>
    body {background-color:#000;background-image:url(/images/bg_green.jpg);background-repeat:no-repeat;}
    </style>
    <?php endif; // end the if, no images for other other categories ?>

    I tried adding the code to the header.php and the page.php, but neither worked. I get an error message that refers me to a line # that doesn’t exist in my file. I do not have a lot of CSS experience, so I’m not sure if the code is the problem or if I put it in the wrong place, etc.
    All help appreciated. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

  • The position in your header would be important because in order to override the styles in your default stylesheet, the above code must come after the call to style.css

    Thread Starter jhearing

    (@jhearing)

    I am still getting error messages–is this correct?

    Here is the code (header.php) from line 1 up to the style.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”https://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
    <head profile=”https://gmpg.org/xfn/11″&gt;
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
    <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
    <title>
    <?php wp_title(‘«’, true, ‘right’); ?>
    <?php bloginfo(‘name’); ?>
    </title>
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    <link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/css/MenuMatic.css” type=”text/css” media=”screen” />
    <!–[if lte IE 6]>
    <link rel=”stylesheet” type=”text/css” href=”ie6.css” />
    <![endif]–>
    <!–PNGFIX JS–>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/iepngfix_tilebg.js”></script>

    This is the code from the style through my wrapper.

    <style type=”text/css”>
    img, div { behavior: url(<?php bloginfo(‘template_directory’); ?>/iepngfix.htc) }
    </style>
    <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php if (is_page_template (‘page_maroon.php’) ):
    // page 1 ?>
    <style type=”text/css”>
    body {background-color:#000;background-image:url(/images/bg_maroon.jpg);background-repeat:no-repeat;}
    </style>
    <?php elseif (is_page_template (‘page_green.php’) ):
    // page 2?>
    <style type=”text/css”>
    body {background-color:#000;background-image:url(/images/bg_green.jpg);background-repeat:no-repeat;}
    </style>
    <?php endif; // end the if, no images for other other categories ?>
    <?php wp_head(); ?>
    </head>
    <body class=”bodyBg2435″>
    <div id=”wrapper”><!– main wrapper –>

    Thread Starter jhearing

    (@jhearing)

    Found a solution that worked for me — hope it might help someone else.
    I found this blog on creating custom templates:
    https://wptheming.com/2010/03/custom-page-templates-thematic/

    I then followed a thread called “Dynamic body classes” to this blog article: https://wptheming.com/2009/12/dynamic-body-classes-wordpress-styling/

    I followed the “Not Using Thematic?” section in this article and downloaded the theme, then copied the theme’s funtion.php file into mine. (follow the directions in the article)

    I created the templates I desired, one for each background image I wished to use.

    <?php
    /*
    Template Name: Full Page
    */
    ?>

    Then I added these lines to my stylesheet for each of my template names and changed the photo references:

    }

    .page-template-page_maroon-php {
    margin: 0px;
    padding: 0px;
    background: url(images/bg_maroon.jpg) center no-repeat #c7869e;
    font: normal 12px Arial, Helvetica, sans-serif;
    color: #c7869e;
    }

    Lastly, I entered this text (after head tag) into my header.php file to call in each template and background:

    <body class=”<?php thematic_body_class() ?>”>
    <?php if (is_page_template(‘page_maroon.php’)){
    echo “”;}
    elseif (is_page_template(‘page_green.php’)){
    echo “”;}
    elseif (is_page_template(‘page_gray.php’)){
    echo “”;}
    elseif (is_page_template(‘page_black.php’)){
    echo “”;}
    else{
    echo “body”;
    }?>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Can I use “is_page_template” to create different background images?’ is closed to new replies.