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.

triangular shape yellowish icon

Frequently Asked Questions (FAQs)

These FAQs answer the most common questions about our WordPress custom login page plugin.

three shapes icon

Is LoginPress WPML Compatible?

LoginPress is fully supported with multilingual. LoginPress is also compatible with WPML Plugin, which means you can easily translate your login page with WPML plugin according to the given translation options in the WPML plugin.

Is LoginPress translation ready?

Yes, LoginPress has full translation and localization support via the LoginPress textdomain. All .mo and .po translation files should go into the languages folder in the base of the plugin.

Is coding skills needed to use LoginPress?

No, It is very easy to setup. Just plug and play. Have fun!

How to Install or Use LoginPress Pro?

Step-by-step instructions on How to Upgrade from existing Free version to Pro
1. You have installed and set up the Free version already.
2. Upload the Pro version.
3. Pro features will be enabled automatically.
4. You don’t need to set up Free version options again.
5. Setup Pro features like Google fonts, Google reCaptcha, Choose themes, etc.

Where is my license key?

License key is the Order ID which looks like in this format.
WHI150807-1234-12345
You can find it in the email Sales Receipt.

three shapes icon

If you Still have Questions?

Get In Touch