LoginPress & Vanta.js – How to use it as a background?

Vanta.js is a JS library that is used to add animated website backgrounds by adding a few lines of code.

How to add Vanta animation to the Login Page of WordPress?

To add it in LoginPress or Login Customizer is very easy.

  1. Go to the Vanta.JS site. [ https://www.vantajs.com/ ]
  2. Select the effect you want to add. ( We are using Globe animation )
  3. On the right sidebar, you will see a box that has 3 script tags.

    Vanta Script

  4. Click on the first script link and copy the URL to replace the Vanta CDN URL”. (see code below after the 8th point)
  5. Click on the second link script link and copy the URL to replace the Vanta-effect CDN URL”. (see code below after the 8th point)
  6. Create a new file in assets/js/ with the name “vanta-script.js” and copy the 3rd script of the box in this file.
    (Change the selector "#Your-Element-Selector" in this JS file with "body.login")

    Vanta Globe

    Here is the structure of files you need in your child theme to implement it properly.
    |_ assets
       |_ js
         |_ vanta-script.js

  7. After placing the file/s accordingly into exact positions.
  8. Add the following piece of code to your child theme’s functions.php file and save it.

add_action( 'login_head', 'prefix_vanta_login_header' );

/**
 * Custom login header to add the custom scripts for the login page.
 *
 * @return void
 */
function prefix_vanta_login_header() {

	// Replace the VANTA CDN URL. This is the URL for the Vanta library.
	wp_enqueue_script( 'vanta', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js', array(), '1.0.0', true );

	// Replace the Vanta-effect CDN URL. This is the URL for the Vanta-effect library.
	wp_enqueue_script( 'vanta-globe', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.globe.min.js', array(), '1.0.0', true );

	// This script will add the vanta initialization to your page.
	wp_register_script( 'prefix-animated-vanta', get_template_directory_uri() . '/assets/js/vanta-script.js', array(  'vanta', 'vanta-globe' ), '1.0.0', true );
	wp_enqueue_script( 'prefix-animated-vanta' );
}

Go to your login page and voila! There you have an animated background.

Leave a comment

Your email address will not be published.