Time-based CSS style switcher in PHP
As I was minding my own business late yesterday afternoon, I saw this tweet from @Mettadore pop up in Twitterrific.
I thought it was an interesting idea and figured the code to accomplish it would be pretty simple, so I cracked open my editor and started coding. Five minutes later, I had a working demo and promised I’d write a blog post with some sample code, so here it is.
The PHP:
<?php // Get the current hour (24-hr clock) $time = date('H'); // check to see if theme is passed in the URL and, if not, // set it based on the current hour if(!isset($_GET['theme'])) { if($time >= '05' and $time < '08') { $css = '/path/to/css/sunrise.css'; } elseif($time >= '08' and $time < '12') { $css = '/path/to/css/morning.css'; } elseif($time >= '12' and $time < '15') { $css = '/path/to/css/noon.css'; } elseif($time >= '15' and $time < '18') { $css = '/path/to/css/afternoon.css'; } elseif($time >= '18' and $time < '21') { $css = '/path/to/css/sunset.css'; } elseif($time >= '21' and $time < '05') { $css = '/path/to/css/night.css'; } else { $css = '/path/to/css/default.css'; } } else { // if the theme is passed in the URL, specify a list of // valid theme names $themes = array('sunrise', 'morning', 'noon', 'afternoon', 'sunset', 'night'); // if the theme is passed in the URL and the theme name // is in the $themes array, set the theme; otherwise, throw an error if($_GET['theme'] and in_array($_GET['theme'], $themes)) { $css = '/path/to/css/' . $_GET['theme'] . '.css'; } else { $error = TRUE; echo 'You have specified an invalid theme.'; } } ?>
How it works
The comments in the code above are pretty self-explanatory, but here’s a quick rundown.
- Get the current hour (in 24-hr format).
- Check to see if the theme name is being passed in the URL (it only would be for debugging and testing purposes). If it’s not passed in the URL, set it based on the current hour.
- If the theme is passed in the URL, make sure the code knows what the valid theme names are.
- If the theme is passed in the URL and the them is in the list of valid names, set the theme to what was passed or throw an error if it’s not a valid theme name.
Be sure to change /path/to/css in the code above to the actual path where your stylesheets live. Also, you likely don’t need the else that sets the theme to a default, it’s just there in case PHP can’t get the time for some reason (which shouldn’t happen).
The HTML
In order for your themes to be included in the page, you have to change the HTML that calls your stylesheet. You’ll want to change it to this:
<link rel="stylesheet" type="text/css" href="<?=$css?>" />Or this if you have PHP’s short tags turned off:
<link rel="stylesheet" type="text/css" href="<?php echo $css; ?>">Conclusion
That’s really all there is to it. The code can be easily modified to have fewer themes (for example, if you only wanted a “day” and “night” theme) or to change the theme based on month or by specific date rather than hour of the day (like for holidays).
Feel free to contact me if you have any questions or run into any trouble.
Enjoy!
