Adding Animate.css to WordPress Login Screen

Hi CodySP,

You need to write a custom function and add your animate.css to the head of wp-login.php.

Note that this function will reside inside Functions.php of your theme, or child theme.

Something like this should get you pointed in the right direction:

function custom_login_css() { ?>
    wp_register_script('animate.css',path/to/animate.css);
    wp_enqueue_script('animate.css');
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_css' );

What this function does, is enqueue your scripts or styles onto the login page in the head section.

For further reading on the topic check out the codex page

I haven’t ever added Animate.css to the login page, but have done so to many of the other admin pages, and many front end pages using this and similar methods.

Evan

Hey Evan,

Thanks for getting back to me so quickly! PHP isn’t my most fluent language, so please be patient with me! I added your function to my functions.php file and I have a few images to show!

A screen of your function as it appears in my WordPress editor

https://cptgaming.net/images/5dc241bb753a70b35e8c.png

An attempt to edit the Login ID in wp-login.php
https://cptgaming.net/images/b4af690c952f0ee5c01b.png

The login screen
https://cptgaming.net/images/dc6e0bc8428490d278de.png

Not quite the desired effects, but it’s better then what I had yesterday!

Hey Cody,

It looks like you forgot the “” around the path to the URL (my mistake, I wrote the function incorrectly). Also, I switched it from wp_register_script to wp_register_style.

Try this:

function custom_login_css() { ?>
    wp_register_style('animate.css','path/to/animate.css');
    wp_enqueue_style('animate.css');
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_css' );

After that, go to your login page and check the resources and confirm that Animate.css is being loaded.

What you did by adding the classes etc, is correct and should give you the desired effect.

Evan

Hey Evan,

for some reason the code in the function is displayed on the login page after the first line (See below)
https://cptgaming.net/images/ef1fd41f8c3e864fbfbb.png

Which I believe is

wp_register_style('animate.css','path/to/animate.css');
    wp_enqueue_style('animate.css');

Right?

Cody

Hey Cody,

I don’t know why I didn’t see this before. It’s quite obvious lol.

This is how it should be:

function custom_login_css() {
    wp_register_style('animate.css','path/to/animate.css');
    wp_enqueue_style('animate.css');
}
add_action( 'login_enqueue_scripts', 'custom_login_css' );

The original function out of the codex was injecting <style></style> tags, so it needed to close out of the ?> php tags before opening the <style></style> tags.

I removed the unecessary PHP tags within the function. Instead of executing the PHP code it was just echoing it onto the page.

It Should now load animate.css contingent on the path being set correctly.

I’ve just tested this function on my localhost installation, and it works correctly.

Evan

Hey Evan,

now that we know the function works, I know that I’m now doing something wrong on my end. Animate.css is being loaded, but the effect won’t appear. I’ve been playing around with the div tag but am coming up short.

https://cptgaming.net/images/45a90eafbb58d9312d0d.png

This screenshot shows the resources on the Wp-login page.

The thing is, it all looks right, but clearly it isn’t! It made me think of this image, which makes me laugh everytime.
https://ninjahumor.com/wp-content/uploads/2013/05/My-code-doesnt-work-I-have-no-idea-why-My-code-works-I-have-no-idea-why.jpg

Back to staring at code strings!
Cody

Haha, so true. I love that image.

One thing I may try doing is adding the Classes via javascript, instead of having them pre-loaded on the elements. I’m not sure that will make much of a different but it’s worth a shot.

If you manually add the class, through the inspector, does the animation work?

I guess it may be easier to test if I have a link to the login page, if your able to provide it (if its not on a local installation).

You can really test if the animate.css is working, by opening up the inspector and manually adding a animation class name onto any element. For example, right click the submit button and just type class="bounce animated" and hit enter, and the element should then animate if all is according to plan.
Evan

At this point, I’ll let you tackle the editor yourself if you so chose! Haha.

You can check out the login page https://gamegrit.com/wp-login.php here

Let me know if you have any questions!

Hey Cody,

I just checked the page and added class="bounce animated" to the submit button via the inspector and it animated as expected.

That leads me to believe that all you need to do is load some javascript into the login page, and run a little jQuery that will append that class to your element on page load.

Are you at all familiar with javascript/jQuery?

Essentially your going to need to create an external JS file, that runs on load which appends the class names that you want to the elements you would like. You’ll need to write the JS file and then enqueue it as we did with animate.css, but change everything to wp_enqueue_script, instead of wp_enqueue_style.

Hey Evan,

I really hate to make this process more difficult on you, but I’ve only worked with Javascript and jQuery plugins a tiny bit in the past. I wouldn’t know how to write or apply it off hand. It’s on my list of To-Do’s though!

Would you mind sending an example my way?

Cody

Hey Cody,

What your going to need to do is load a custom JS file into the page, and write some Javascript to dynamically add the correct class to the elements you need.

For example, inside of a new custom js file, you’d need to do something like this.

jQuery(document).ready(function() {
  jQuery('#wp-submit').addClass('animated bounce');
});

This will add some javascript to your page, that says when the page is loaded add the class animated and bounce to the element with the ID wp-submit.

The tricky part may be in creating the new JS file and then loading it like we did animate.css.

Evan

Hey Evan!

WordPress sure can be a fickle thing, eh? I’ll keep the JS file saved and at the ready while we scratch our heads! I can only think that at this point, It’d be silly to quit now after coming this far. I’d like the time you’ve spent in helping me over the last two days to bare some fruit!

From the sound of things though, we’re almost there! We would need to add another function in order for WordPress to read the JS file, right?

Cody

That’s correct. I’d do a bit of research on loading custom js or css files on the login page.

Hey Evan,

I started looking into Javascript on the login page when I came across a code snippet someone posted when they we’re trying to do the same thing. I’ve made adjustments to the snippet and the JS file is showing up in the inspector.

add_action( 'login_enqueue_scripts', 'custom_login_css' );
add_action( 'login_enqueue_scripts', 'enqueue_my_script' );

function enqueue_my_script( $page ) {
    wp_enqueue_script( 'animate.js', '/wp-content/themes/flavor/js/animate.js', null, null, true );
}

https://cptgaming.net/images/31dca60dd7f95a44eba1.png

The question is, do I need to define it in the wp-login.php file itself and if so, how would the string be assembled?

No, I don’t think so. If your seeing animate.js appear in the console, then you know the file is being loaded correctly.

I would recommend changing your enqueue script to

wp_enqueue_script(
    'animate.js',
    '/wp-content/themes/flavor/js/animate.js',
    array( 'jquery' )
)

That’s going to make sure that jQuery is loaded FIRST and then your script. the array(‘jquery’) is setting a dependency, so your script relies on jquery being loaded.

After that go ahead and add the javascript i provided above to your animate.js file, refresh the login page and check if it works.