Animate Wordpress Parent Theme With AnimateCSS

2018-01-28

In this tutorial we will learn how to animate a Wordpress parent (or master) theme, we will use AnimateCSS (because I’m currently too lazy to make my own animations) but theoretically this method will work with other libraries.

This tutorial makes some assumptions that you understand a tiny bit of JS/CSS/HTML as well as Wordpress and general basic computer use.

Now, please remember that we will be building the animations directly into our parent theme, some users might not want this functionallity so it may not be advisable for a distributed theme but never the less this tutorial will hopefully provide a fun way of learning how Wordpress differs from the typical HTML/CSS/JS development process.

We won’t be learning how to do this with a child-theme (which actually might be preferable), nor will we learn how to allow the user to choose whether they want the animation to work or not via the Wordpress admin area/s. If you’re not wanting to code their are plugins which will essentially allow us to do what we’re going to do without using code (or at least not a lot of code) but I like (love cough cough) code so I’ll be using code. To learn more about AnimateCSS you’re welcome to checkout a post I produced regarding it: https://bh0.github.io/2018/01/08/How-To-Use-AnimateCSS/ - In this tutorial we won’t be using JQuery but filling in the gaps so that JQuery can be used is fairly simple.

Lets get started. The files we are going to be focusing on are AnimateCSS’s file which we are yet to add, as well as functions.php. You might be tempted just to put AnimateCSS in your header.php file but this is not “the Wordpress way”.

First we need a Javascript script which will help us toggle the animations much easier allowing us to easily trigger the animations upon events - the code for this comes directly from my other AnimteCSS blog post (which is linked above). We then need to enqueue our script in functions.php to ensure it loads at the approrpiate time. We also need to enqueue our AnimateCSS file (or whatever other tool we are using). As well as JQuery if you so wish to do so. I will be using Wordpress’s 2017 theme but this should work with just about any correctly built parent theme. And lastly, we obviously have to associate an element with an animation.

Setup

animate.js // you’re welcome to put this code in another file so long as it exists within the page your animation will occur on.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
                    // ID     | animation 
function animate(elementString, animation) {
		// get the element passed as a parameter
		var element = document.getElementById(elementString); 
		// add animated + our desired animation which was passed as the second parameter
		element.className += " animated "+animation;
		// wait for 1000 *time-unit*
		var wait = setTimeout(function() {
			// then remove the className thus stopping the animation
			element.className -= " animated "+animation;
		}, 1000);
	}
	

You can put this code in whatever Javascript file you like so long as the script is enqueued within functions.php. To enqueue it we simply do: I recommend you ensure its in a file which is enqeued before any other scripts which might rely on it.

1
2
3
4
5
6
7
8
9

 
function enqueueScripts() { // the name of this function may vary accross themes 
	wp_enqueue_script('main_js', get_template_directory_uri() .'/js/main.js', null, true);
 
	// or: 	wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/animate.js' ), array( 'jquery' ), '1.0', true );
 
} 
add_action( 'wp_enqueue_scripts', 'enqueueScripts' );
 

You would do something similar if you are using JQuery (as Wordpress has JQuery within its core - note that you can also include JQuery as a dependancy of your script). This ensures Wordpress can find your script files and that they are loaded at the appropriate time.

Including AnimateCSS

To load AnimateCSS we will first download the Aniamte CSS file and place it within our theme - it can go within the theme’s root folder or a CSS folder - you might even decide to copy the code directly into style.css but I won’t. We will then have to enqueue this similar to above and how we enqueue our style.css file. There are actually two ways I consider appropriate that you can do this - either using the CSS import rule or similar to what you done with the style.css file within functions.php. Also, feel free to use the minified version - the process is the same.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 
/* Inside functions.php */ 
function enqueueScripts() { // can be a different function if you wish 
wp_register_style(
    'animate-css', // handle name
    get_template_directory_uri() . '/css/animate.css', // the URI of the stylesheet
    array( 'any-dependancies-if-so' ), // optional: array of dependancies 
    '1.0', 'screen', // CSS media type
); 
wp_enqueue_style(
    'animate-css',
    get_template_directory_uri() . '/css/animate.css',
    array( 'dependancies' ),
    1.0, 'screen' 
); 
} 
add_action( 'wp_enqueue_scripts', 'enqueueScripts' );
 // if not already done so 
/* Or if you prefer, inside any CSS (or SASS) file - meaning you won't need to do the other code: */ 
@import 'animate.css'; 

We then simply choose an element we wish to animate, tell the approrpiate Javascript to work its magic and we should see what I assume will be a beatiful animation as the user browses the web-page.

Using our above function this can be done by first, giving the element we wish to be animated an appropriate ID:

1
2

 
<h1 id="animateH1"><?php echo (some PHP) this element should be animated ?></h1> 

Then by using our “animate” function whenever the event which is intended to trigger the animation occurs (can be a mouse-over, a timed event etcetera):

1
2
3
4

 
function anEventToTriggerTheAnimation() { 
	animate('animateH1', 'bounce infinite'); // bounce - the animation you want + if you want it to last forever 
} 

I want to keep going

You might want to build functionallity into your theme which allows the user to choose if the animation will occur. And you might even be brave enough to make it so that the user can choose their own animation/s (from a pre-determined set of options). And perhaps they can adjust the behavior (speed etcetera) of the animation.