We have been looking at changing the body background on a theme based on hour, day, month, or season, in this example we will find out how to change the background in the evening.

We are using a Twenty Ten child theme to do this, so what do we need, we are using two horizontal repeat .png images 1087 wide * 1120 high, one for day and one for the night, if we whanted a different set of images, for any of the other methods we would change the quantities, names and code values to suit.

The Images

We have created two sample images just using Serif DrawPlus X4, and editing one of the sample templates, these images are quite simple, but will be great for testing, we will find these images in the child theme download as well.

Download the theme: [download id="71"]

style.css

In our stylesheet we need to add a class for each image, we have .day and .night, if we wanted seasonal images then we would have, .winter, .spring, .summer and .fall.

In each class we add the name of the image to use from our theme or child themes /images/ folder, see we are using day.png and night.png.

/* Our daytime Image top and center repeat horizontal */
.day
{
   background-image: url('images/day.png');
   background-repeat: repeat-x;
   background-attachment: fixed;
   background-position: top center;
}

/* Our Nightime Image top and center repeat horizontal */
.night
{
   background-image: url('images/night.png');
   background-repeat: repeat-x;
   background-attachment: fixed;
   background-position: top center;
}

If we had only added these styles our header and content area would hide our nice images, so we need to make some parts of our themes background transparent.

/* Menu, Main Content area and Sidebars backgrounds */
#wrapper,
#access,
#primary,
#secondary{
   background: transparent;
}

/* Lets change the stick post format */
.home .sticky{
   background: transparent;
   border: solid 1px #555;
}

/* The menu Text Color */
#access a {
   color: #333;
}

/* Hide the header image */
#branding img {
   display: none;
}

/* And this is that black bar at the foot of the theme */
#colophon {
   border: none;
}

functions.php

What we will do now is add a new function in the functions.php file, this will tell WordPress to load a different body background image based on the time of day, this will use the local time.

add_filter('body_class','day_body_class');
function day_body_class($classes = '') {
  /* pages Day and Night are for testing */
  if( is_page('Day') ) {
    $classes[] = 'day';
    return $classes;
  }
  elseif( is_page('Night')) {
    $classes[] = 'night';
    return $classes;
  }else{
    /* Get the Hour and 18hrs (6:00pm) to 07hrs (7:00am) is Night */
    $h = date('H');
    if( $h > 18  || $h < 07 ) {
      $classes[] = 'night';
      return $classes;
    }
    $classes[] = 'day';
    return $classes;
  }
}

Our Theme

We have added a little extra code so we can test our theme, we can create a page called ‘Day’ and One Called ‘Night’ test our theme and delete the pages.

This is what we will see from 7:00am see the code $h < 07, that could be changed to whatever we wanted, our example will start from 07:00 or 7:00am.

The night background is triggered by $h > 18 which is greater than 18:00hrs or 6:00pm, so this will not change until 19:00 or 7:00pm

Seasonal Code

If we wanted seasonal images instead we would add four images, and then adjust the above code, in the style.css stylesheet we would need to add four classes.

.winter
{
  background-image: url('images/winter.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}
.spring
{
  background-image: url('images/spring.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}
.summer
{
  background-image: url('images/summer.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}
.fall
{
  background-image: url('images/fall.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}

And in the functions.php we would need to select which hemisphere we want our seasons to be based on, this would be looking at the most website traffic, or target market countries.

add_filter('body_class','seasonal_body_class');
function seasonal_body_class($classes = '') {
   // Change to southern if appropriate
   $hemisphere = 'northern';
   $m = date('m');
   /*** southern hemisphere seasons ***/
   $southern=array(
     'summer' => array(12, 1, 2),
     'fall' => array(3, 4, 5),
     'winter' => array(6, 7, 8),
     'spring' => array(9, 10, 11)
   );

   /*** northern hemisphere seasons ***/
   $northern=array(
     'summer' => array(6, 7, 8),
     'fall' => array(9, 10, 11),
     'winter' => array(12, 1, 2),
     'spring' => array(3, 4, 5)
   );

   /*** To random test remove the remarks for a random month ***/
   // $m = mt_rand( 1, 12 );

   /*** loop over the hemisphere ***/
   foreach($$hemisphere as $key=>$val) {
     if(in_array($m, $val)) {
       $classes[] = $key;
       return $classes;
     }
   }
   //No month selected from array
   $classes[] = '';
   return $classes;
}

See the line // $m = mt_rand( 1, 12 ); for testing we just remove the remarks // then just refresh the browser to see random different seasons, we could use this code for a random background effect, pretty cool!

We hope this post and the download will help you and add to your develpment toolkit.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration is now open: New Member Registration

Membership is now open: Existing Member Login

Visit the: Forum and Feedback

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.