Tis The Season! … Get your site ready for the Holidays
In this article we will go over the steps to add a falling snow effect to your wordrpess website.
Step 01: Download the JS and assets
Step 02: Copy the files to your child themes directory and update let_it_snow.js
See this article on creating a child theme if you don’t already have one.
After placing the holidays folder into your child theme folder open the file named let_it_snow.js. Change the line displayed below with your url and theme folder.
createSnow('http://***yoururl.com***/wp-content/themes/***yourchildthemefolder***/holidays/christmas/assets/', 60);
Step 03: Choose which pages to add the effect
In order to enqueue the scripts in the next steps we will need the post id from the pages we want to have snow on. There are a couple ways to do this. I find the easiest way is to right click on the page you want and inspect the source. locate the body tag and look at the classes to locate the class”page-id-xxxx”. This is the number you will use for adding the scripts.
Step 04: Enqueue the styles and scripts
Locate the functions.php and add the code below. Remember to change the page id in the if statement.
function xmas_scripts_styles() {
if( is_page(***yourpageid***))
{
wp_enqueue_script( 'load_snow', get_stylesheet_directory_uri() . '/holidays/christmas/js/jsized.snow.min.js', array( 'jquery' ), null, false );
wp_enqueue_script( 'make_snow', get_stylesheet_directory_uri() . '/holidays/christmas/js/let_it_snow.js', array( 'jquery' ), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'xmas_scripts_styles', 100);
Step 05: Let the Snowfall
Go to your page and enjoy the winter wonderland
