How to Customize WordPress Login Page Without Plugin

Plugin helps you add features to your login page, but it’s also possible to customize WordPress login page without plugin.

This will keep your WordPress from bloated or malicious code and having more control over your website.

WordPress logo on login page can be very boring, especially if you always see it every day. You could just use a plugin to replace it, but it would be more interesting if you change it yourself manually, of course with a bit of hacking on your WordPress code.

Don’t worry young padawan, it’s super easy!

 

Change the Login Logo in WordPress

In this simple step-by-step tutorial, I will guide you to change the WordPress logo on your login page. Enjoy!

 

1. Put your custom logo image to your /your-wp-theme/img folder.

2. Use the login_enqueue_scripts hook to insert CSS into the head of the login page so WordPress can loads your custom logo. Put this code into your /your-wp-theme/functions.php :

 

// Custom logo login page 

function my_login_logo() { ?> 
  <style type="text/css"> 
    body.login div#login h1 a { 
    background-image: url(<?php echo get_stylesheet_directory_uri(); ?>//cdn-image.tongkolspace.com/@tonjoo%2Fimg%2Fyour-custom-logo.png); 
    background-size: 200px auto; 
    background-position: center; 
    width: 300px; 
    height: 70px; 
    padding-bottom: 110px; 
  } 
  </style> 

<?php } 
  add_action( 'login_enqueue_scripts', 'my_login_logo' );

 

3. Change “your-custom-logo.png” with your image file. You can also adjust size, width, height value to fit your need.

4. Open your login page, and press ctrl+shift+R, and see your shiny logo… 🙂

 

 

Add reCaptcha As Additional Security Measure

Besides the logo, you can also add a reCaptcha as an additional security layer to your WordPress.

Just like other security measures like 6 WordPress security plugins and 5 tips to make WordPress secure, this will help the malicious hacker away.

Follow this step-by-step tutorial to implement a reCaptcha to your WordPress login page.

1. Get reCaptcha API keys
   – go to the reCaptcha website (https://www.google.com/recaptcha) > sign in with your Google account.
   – register new site by providing label and domain
   – note down the site key and secret key generated by reCaptcha
2. Access your WordPress theme’s directory and locate the functions.php file > open the functions.php file in a code editor
3. Add the following script

function add_recaptcha_to_login_form() {
$site_key = 'YOUR_SITE_KEY';
wp_register_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js');
wp_enqueue_script('google-recaptcha');
echo '<div class="g-recaptcha" data-sitekey="' . $site_key . '"></div>';
}add_action('login_form', 'add_recaptcha_to_login_form');function verify_recaptcha($user, $password) {
// Add the code for reCaptcha response validation here
// This function should validate the reCaptcha response during the authentication process
// It should check the response and return the appropriate result or error message
}
add_action('login_form', 'add_recaptcha_to_login_form');
add_filter('authenticate', 'verify_recaptcha', 10, 2)

Make sure to replace ‘YOUR_SITE_KEY‘ with your actual reCaptcha site key obtained from the reCaptcha website.

With this code snippet, the reCaptcha widget will be added to the login form, and the verify_recaptcha() function will handle the validation of the reCaptcha response during the authentication process. This combination provides both the display of the reCaptcha widget and the necessary security validation.

Now that you had added a recaptcha to your login page, it will protect your WordPress against brute force attacks.

Other Elements of WordPress Login Page that You Can Change

Besides the login logo and adding a reCaptcha to your login page, there are many other elements that you can add or modify.

A login page is an important component as it serves as the gateway for administrators and users to access the site’s backend.

There are plugins that can help you to modify the login page, but you can keep your website to be lean and load faster without bloated plugins.

Here are some other options that you can change

• Customize the login page background
  You can edit your theme’s style.css file to change the background color or add a background image into the login page.
• Change the form appearance
  Not only the background image, the form’s color, fonts, and size can also be modified by targeting relevant CSS selectors in your theme’s style.css file
• Implement a custom login error message
  Add a code snippet to functions.php or your theme’s custom functionality file to display personalized error messages on the login page.
• Redirect users after login
  Modify the login behavior by redirecting users to a specific page or a custom URL upon successful login.
• Customize the login URL
  Change your wp-admin login address to a unique and less predictable address manually
• Utilize custom login page templates
  Create a custom login page template by duplicating and modifying the default login.php file in your theme’s directory

Remember to create a child theme before making any modifications to your theme files. Child themes help to avoid losing changes during theme updates.

A child theme is a theme that inherits the functionality and styling of its parent theme. when you want to customize your WordPress theme, child themes will give you these benefits:

• Preserve Modifications
• Separation of Concerns
• Easy Rollback

By customizing your WordPress login page without relying on plugins, you can have greater control over your website’s branding, user experience, and security.

End Note

Now that you had reached this part of the article, you can perform those steps. Learning how to customize a wordPress login page without a plugin can be a daunting task at first.

But with time and practice, you can also modify other things without relying on plugins. This will keep your WordPress lean and fast to load.

With time and practice, you’ll gain confidence in customizing other things as well. Making your website tailored to your desire.

Talking about customizing a WordPress website, you might want to help from a WordPress developer company like Tonjoo. Especially when it’s about a big project that you can’t tackle it by yourself.

Good luck and happy customizing!

Updated on May 23, 2023 by Hanif Mufid