Title: Adding Animate.css to WordPress Login Screen Last modified: August 21, 2016 --- # Adding Animate.css to WordPress Login Screen * [CodySP](https://wordpress.org/support/users/codysp/) * (@codysp) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/) * Howdy WordPress fans, * I spent all day yesterday trying to figure this out and get it to work, but alas! I haven’t had any luck. * I’m looking to add a bit of flair to my WordPress login screen by getting the Login box to slide in from the left whenever someone lands on wp-login.php. I’ve tried adding a new function, I’ve uploaded the CSS file into my root folder, theme folder and admin CSS folder and I’ve attempted to edit the Login DIV ID in wp-login.php. No luck thus far! * You can check out the Animate.css github [url=https://github.com/daneden/animate. css]here[/url] and the example site [url=http://daneden.github.io/animate.css/] here[/url] * Thanks, CodySP Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/page/2/?output_format=md) [→](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/page/2/?output_format=md) * [Evan Herman](https://wordpress.org/support/users/eherman24/) * (@eherman24) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742419) * 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'); [http://cptgaming.net/images/5dc241bb753a70b35e8c.png](http://cptgaming.net/images/5dc241bb753a70b35e8c.png) > An attempt to edit the Login ID in wp-login.php > [http://cptgaming.net/images/b4af690c952f0ee5c01b.png](http://cptgaming.net/images/b4af690c952f0ee5c01b.png) > The login screen > [http://cptgaming.net/images/dc6e0bc8428490d278de.png](http://cptgaming.net/images/dc6e0bc8428490d278de.png) * Not quite the desired effects, but it’s better then what I had yesterday! * [Evan Herman](https://wordpress.org/support/users/eherman24/) * (@eherman24) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742443) * 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'); tags, so it needed to close out of the ?> php tags before opening the 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 * Thread Starter [CodySP](https://wordpress.org/support/users/codysp/) * (@codysp) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742494) * 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. * > [http://cptgaming.net/images/45a90eafbb58d9312d0d.png](http://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. [http://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](http://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 * [Evan Herman](https://wordpress.org/support/users/eherman24/) * (@eherman24) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742498) * 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 * Thread Starter [CodySP](https://wordpress.org/support/users/codysp/) * (@codysp) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742499) * At this point, I’ll let you tackle the editor yourself if you so chose! Haha. * You can check out the login page [http://gamegrit.com/wp-login.php](http://gamegrit.com/wp-login.php) here * Let me know if you have any questions! * [Evan Herman](https://wordpress.org/support/users/eherman24/) * (@eherman24) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742501) * 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. * Thread Starter [CodySP](https://wordpress.org/support/users/codysp/) * (@codysp) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742505) * 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 * [Evan Herman](https://wordpress.org/support/users/eherman24/) * (@eherman24) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742583) * 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 * Thread Starter [CodySP](https://wordpress.org/support/users/codysp/) * (@codysp) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742614) * 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 * [Evan Herman](https://wordpress.org/support/users/eherman24/) * (@eherman24) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742615) * That’s correct. I’d do a bit of research on loading custom js or css files on the login page. * Thread Starter [CodySP](https://wordpress.org/support/users/codysp/) * (@codysp) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742622) * 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 ); } ``` * > [http://cptgaming.net/images/31dca60dd7f95a44eba1.png](http://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? * [Evan Herman](https://wordpress.org/support/users/eherman24/) * (@eherman24) * [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/#post-4742623) * 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. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/page/2/?output_format=md) [→](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/page/2/?output_format=md) The topic ‘Adding Animate.css to WordPress Login Screen’ is closed to new replies. ## Tags * [login](https://wordpress.org/support/topic-tag/login/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 16 replies * 2 participants * Last reply from: [CodySP](https://wordpress.org/support/users/codysp/) * Last activity: [12 years ago](https://wordpress.org/support/topic/adding-animatecss-to-wordpress-login-screen/page/2/#post-4742637) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics