Make It SNOW!

by Nov 30, 2017Development, jQuery0 comments

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

Download

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

Divi Forms and HubSpot Meetings

Divi Forms and HubSpot Meetings

The Mission In this article we will be using JQuery to accomplish the following: Prevent Divi Form Submission Maintain Validation Grab Field Values Create a Pop-Over to HubSpot Meeting Page Autofill Meeting Fields and AutoSubmit Step 01: Make sure you have...

Cool Logo Easter Egg

Cool Logo Easter Egg

In this article we will go over the steps to add a company branding package to your logo. This is perfect for partners and affiliates to quickly download and updated logo and branding guide.This will take you through a wordpress installation.