You could perform a little PHP in your template which decides what stylesheet to load. Here’s an example:
<?php
$the_month = date('n'); // numeric month
if( ($the_month > 2) && ($the_month < 6) ) {
$season_css = 'spring';
} elseif( ($the_month > 5) && ($the_month < 9) ) {
$season_css = 'summer';
} elseif( ($the_month > 8) && ($the_month < 12) ) {
$season_css = 'autumn';
} else {
$season_css = 'winter';
}
?>
Then change the <link> tag defining your stylesheet to:
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/<?php echo $season_css; ?>.css" />
A calendrical stylesheet scheme (january.css, march.css, etc.) would be even easier, as you’d only need to modify the link tag:
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/<?php echo strtolower(date('F')); ?>.css" />
Is it similarly simple* to have the stylesheet changed by hours? i.e. for nitgh and for day? Or, for morning, afternoon, evening…? (you got the idea)
________________
*simple for those that know code š
moshu: Yep. Yep. And yep.
One merely needs to know what to collect (time of day), and how to collect it (with the PHP date() function). And in the case of your latter two questions, how to test against those values, which is often just basic math. Starting point would be to learn about the various ‘time’ format characters for use with date().
Simplest first. :)
One can create a stylesheet for each hour of the day. Here it is in 24 hour format (helps to know 00.css (ZEROZERO.css) will be your midnight hour):
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/<?php echo date('H'); ?>.css" />
And now, am/pm format (1am.css, 10pm.css):
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/<?php echo date('ga'); ?>.css" />
Let’s not forget ‘by day’ (i.e. tuesday.css), since someone will ask!
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/<?php echo strtolower(date('l')); ?>.css" />
Note how here and above for calendrical stylesheets named after the months, I’ve wrapped date() in the PHP function strtolower(). I did this is to keep everything lowercase (which is just good file naming policy).
Now for the math!
For day/night we’re talking about what can be personally variable time periods. For example, you may consider midnight to be the start of morning. Or perhaps the time you wake up. I don’t know (and really I don’t care). But it’s important to keep in mind when looking at *my* interpretation of these time periods.
Easiest solution would be to alternate between style-am.css and style-pm.css stylesheets:
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/style-<?php echo date('a'); ?>.css" />
Simple! A slightly more complicated way of doing it, that is bringing in the fuzzy version of day/night, would be to test on the time:
<?php
$the_time = date('G'); // 0-23 hour
if( ($the_time > 5) && ($the_time < 18) ) {
$my_css = 'day';
} else {
$my_css = 'night';
}
?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/<?php echo $my_css; ?>.css" />
This will choose ‘day’ from 6am-5(:59)pm, and ‘night’ otherwise. You can modify the hours tested on in the if statement to better fit your needs.
Let me sidebar for a moment for a note on date().
Keep in mind the information generated by date() is based on the server (computer) it’s running on; not your own local time/date. So if you’re in Cleveland, OH and your site is hosted in Thailand…
Morning/afternoon/evening/latenight (or whatever formulation you want to go with) works in a similar way to day/night. We just need to extend the if statement:
<?php
$the_time = date('G'); // 0-23 hour
if( ($the_time > 4 ) && ($the_time < 12 ) ) {
$my_css = 'morning';
} elseif( ($the_time > 11 ) && ($the_time < 18 ) ) {
$my_css = 'afternoon';
} elseif( ($the_time > 17 ) && ($the_time < 23 ) ) {
$my_css = 'evening';
} else {
$my_css = 'latenight';
}
?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/<?php echo $my_css; ?>.css" />
As discussed above, your numbers may vary…
From the code in this thread I worked out a way for a few links to update each month (one stays the current month, the other is month plus 1), but it there a way to do this with less code? Specifically, is there a simpler way to increment the months by 1? It seems by my reading that mktime is the best function to use, though it requires the full time to calculate the month.
This is what I have now, which gives me the full month as the link and the short month as the URL with the php extension:
<a href="<?php echo strtolower(date('M')); ?>.php" /><?php echo (date('F')); ?></a>
<a href="<?php echo strtolower(date('M', mktime(date('H'), date('i'), date('s'), date('m')+1 , date('d'), date('Y')))); ?>.php" /><?php echo (date('F', mktime(date('H'), date('i'), date('s'), date('m')+1 , date('d'), date('Y')))); ?></a>
Kafkaesqui, thank you so much for your input about this!
Do you know if it is possible to associate this time switching to a category/page/etc switching?
For example: if time is between 8 and 20 AND category “Music” is displayed, music-day.css would be used.
If time is between 20 and 8 AND the same category is displayed, music-night.css would be used.
Would you have any idea about how to make this dream possible?
That would help me A LOT. I’ve been haunting forums and WP codex since yesterday with no luck.
Thank you so much in advance for your reply – or anyone’s.
