Here is the quick tutorial of how to switch between different stylesheets in WordPress every month using JavaScript. Actually, you should be able to use this script on any website, but I was looking for solution for WordPress and couldn’t find the one that suits my needs, so I came to this simple approach. It’s just one of multiple possible solutions and I’m not saying it’s the most elegant way to do this, but at least it does the job and I hope you will find it useful.

What does the script do?

1. Uses .getMonth() method to call months (from 0 to 11)
2. Uses switch statement to switch to current month’s stylesheet (uses server’s time)
3. 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
4. In case month hasn’t been detected (odd!) script will use default WP stylesheet

This is really it.

Installation

1. Download the css-by-month.js script (Right-click > Save link as…)
2. Open the script and edit the path for each stylesheet (the href=”http://the-path/to-your/stylesheets/folder/january.css” part).
3. Upload the script to your theme’s js folder (preferably)
4. 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' ); ?>" />-->
5. Bellow that line add following line that will call our external JavaScript file css-by-month.js
   <script src="http://the-path/to-your/javascripts/folder/css-by-month.js"></script>
6. 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! 😉