Ask your WordPress questions! Pay money and get answers fast! (more info)

Change background image on my site depending on time of day WordPress

  • SOLVED

Hello, I've seen this done before, can anyone help me with the code?

Based on my server time or site time I would like show a different background image at different times of the day.

6am-10am - sunrise.jpg
10am-5pm - day.jpg
5pm-7pm- sunset.jpg
7pm-6am- night.jpg

Can this be done for a background image? Using body class.

Thank you

Answers (3)

2014-02-12

Arnav Joy answers:

write following to functions.php

add_filter('body_class','my_body_classes');
function my_body_classes($classes, $class) {
// add 'my-class' to the $classes array
$classes[] = 'my-class';
// return the $classes array
return $classes;
}



write following before closing head tag in header.php

<?php
$time = date("H");

if( $time >= 06 && $time < 10 )
$img_name = 'sunrise.jpg';
if( $time >= 10 && $time < 17 )
$img_name = 'day.jpg';
if( $time >= 17 && $time < 19 )
$img_name = 'sunset.jpg';
if( $time >= 19 && $time < 6 )
$img_name = 'night.jpg';


?>

<style>
.my-class{background-image:url('http://yoursite.com/images/<?php echo $img_name;?>');}
</style>

make sure you change url of the image correctly


Ross Gosling comments:

Thanks Arnav, this code works without needing the functions.php edit.

2014-02-12

Hariprasad Vijayan answers:

Hello,

Try this method in your javascript

<script type="text/javascript">

var currentTime = new Date()
var hours = currentTime.getHours()

if (hours > 6 && hours <= 10){
document.body.style.backgroundImage="url('sunrise.jpg')";
} else if(hours > 10 && hours <= 17) {
document.body.style.backgroundImage="url('day.jpg')";
} else if(hours > 17 && hours <= 19) {
document.body.style.backgroundImage="url('sunset.jpg')";
} else {
document.body.style.backgroundImage="url('night.jpg')";
}
</script>

2014-02-12

John Cotton answers:


$current_hour = intval( date('H') );
switch( $current_hour ) {
case ( $current_hour >= 6 && $current_hour < 10 ):
$class = "6_10";
break;

case ( $current_hour >= 10 && $current_hour < 17 ):
$class = "10_5";
break;

case ( $current_hour >= 17 && $current_hour < 19 ):
$class = "5_7";
break;

default:
$class = "7_6";
break;
}


That creates a class for you, then just use body_class with the actual background set as a series of classes in your css.