Customizing Your WordPress Login Page without Plugin

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!.

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(); ?>/img/your-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… 🙂