What does the script do?
- Uses .getMonth() method to call months (from 0 to 11)
- Uses switch statement to switch to current month’s stylesheet (uses server’s time)
- Adds the stylesheet’s line (i.e. <link rel=”stylesheet” type=”text/css” media=”all” href=”http://the-path/to-your/stylesheets/folder/january.css” />) to the website’s <header> section
- In case month hasn’t been detected (odd!) script will use default WP stylesheet
This is really it.
- Download the css-by-month.js script (Right-click > Save link as…)
- Open the script and edit the path for each stylesheet (the href=”http://the-path/to-your/stylesheets/folder/january.css” part).
- Upload the script to your theme’s js folder (preferably)
- Comment out the current stylesheet line the header.php file of your WP theme. Here is the line before commenting it out
<link id="stylesheet-rotate" rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
and this is how does it look after commenting it out
<!--<link id="stylesheet-rotate" rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />-->
- Save the changes and refresh the website. If your stylesheet for the current month is different from default one, you must see the changes instantly.
Feel free to share your suggestions and solutions! 😉