WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Select stylesheet by date (11 posts)

  1. fluvius
    Member
    Posted 6 years ago #

    I'm currently gauging the possibility of designing a website using WordPress for a garden which opens to the public.

    I have an idea to graphically skin the site according to the season (Spring, Summer, Autumn, Winter).
    Each season's graphics will be held in separate stylesheets.
    Rather than having to manually change the stylesheet as the seasons change I'd like to automatically check the date as the site is loaded and select the stylesheet accordingly, following the meteorological season dates:
    Spring begins 1st March
    Summer begins 1st June
    Autumn begins 1st September
    Winter begins 1st December

    Is there a way to do this - by using Javascript perhaps?

    Thanks in advance for any help.

    Tony.

  2. Kafkaesqui

    Posted 6 years ago #

    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" />
  3. moshu
    Member
    Posted 6 years ago #

    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 :)

  4. Kafkaesqui

    Posted 6 years ago #

    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().

  5. Kafkaesqui

    Posted 6 years ago #

    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" />
  6. Kafkaesqui

    Posted 6 years ago #

    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).

  7. Kafkaesqui

    Posted 6 years ago #

    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.

  8. Kafkaesqui

    Posted 6 years ago #

    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...

  9. Kafkaesqui

    Posted 6 years ago #

    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...

  10. 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>
  11. kReEsTaL
    Member
    Posted 5 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic