custom background image for every WordPress page?

1 Views

i am trying to have different header background images depending on which inner page is accessed. Right now i have the same picture for all inner pages and need the php code changed so its conditional. Like if im on contact page, 1.jpg to be set as header img. If on services page, 2.jpg to be set as header img etc, you get the idea.
Here is the php code ive found in this wp theme im trying to improve for a friend: 

        <div class="bgtop">
      <?php 
        //display featured image if one exists
        $featimage = get_bloginfo('stylesheet_directory') . "/images/pageheader.png";

        if ((has_post_thumbnail( $post->ID ))&&(!is_single()&&(!is_category())) ){

          $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); 
          $featimage = $image[0];
             } 

      ?>


      <div class="pageheader" style="background: url(<?php echo $featimage; ?> ); background-position: center top;">
          <div class="centermenu">
         <div class="pagelogo">
              <!--<a href="<?php bloginfo('home'); ?>">
                  <img src="<?php bloginfo('stylesheet_directory'); ?>/images/indexlogo.png" alt="logo" />
                </a>-->
    </div>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Well.. It’s more of a structure thing. How are you determining which page they are on? Does the user click a link? Use the information available to the server to decide what content to serve. If you’re using one script to serve all your pages, then you’ll need to pass it a parameter when the user clicks a link. You can do this by making your links take parameters.

    Markup like so:

    <a href='default.php?page=home'> Navigate To Home </a>
<a href='default.php?page=blog'> Navigate To Blog </a>

    php like so:

    if($_POST['page'] == "home")
    echo $homeheader;
elseif($_POST['page'] == "blog")
    echo $blogheader;

    But, usually you just make multiple php pages that include some common elements (called templating). That helps keep things cleaner than making one php script that serves up your whole site.

  2. If you’re wanting the manage this in the back-end of WordPress: You can use the Advanced Custom Fields Plugin for WordPress (http://wordpress.org/plugins/advanced-custom-fields/). Through it, you can add a field on every page an even every post that allows you to enter in a background image.

    Then, in your header.php template file, add the shortcode somewhere in your body tag:

    <body background="(<?php the_field('background_image')" ?>)">

    Depending on what page you’re on, it will show that background image.

    If You’d like the process automated: You can create a folder called “bg” and have an image with the same name as your page. For example, for about.php you can have about.jpg.

    Then write a script that takes the page name, and then sets the background image to that name. You would place this in the header.php file in your template Something like:

     $page = end(explode("/",$_SERVER['REQUEST_URI']));
 $image = str_replace("php","jpg",$page);

    Then use:
    <body background="bg/<?php print $image ?>">

    This is assuming that you are keeping your image files in http://www.yoursite.com/bg/ But you can also use shortcodes to keep these images within your theme with <?php echo get_template_directory_uri(); ?>