A Complete Guide to Customizing Admin Login Page in WordPress

A Complete Guide to Customizing Admin Login Page in WordPress

WordPress has made publishing on the internet easy. And the best part is its highly customizable. You can change literally anything without even having to code. When it comes to customizing admin login pages, you can make modifications pretty quickly. In this guide, learn how to customize the admin pages in a few steps. By the end of this article, you’d have a bespoke login page for your admins.

wp2.png


Step-by-Step process

Before you begin, it’s recommended that you take a backup. That’s because you’ll be editing some important files. Once done, here are the steps you need to follow:

Add a CSS File

To customize the login page, you must create a new CSS file. Then tell the WordPress system to use this file for the admin login page. So in your current theme folder, you have to create a folder with the name ‘admin-login’. Inside of it, create a text file and rename it as ‘admin-custom-css.css’. This is the new CSS file that you needed to add.

Now, you have to allow WordPress to access this file. For this purpose, open the theme’s function.php file. You can access it from the admin dashboard in the Appearance menu. Once you’ve located it, open it and add the following lines of code:

Code:
function my_custom_admin() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/admin-custom-css.css" />';
}
add_action('login_head', 'my_custom_admin');
Add Your own Logo and Background

To make the login page customized, you may want to change the default logo and background. This is good for branding purposes. To change the logo, you need to add the below lines to the newly-created CSS file:

Code:
.login h1 a {
background-image: url('login-logo.png');
}
Ensure that the login-logo.png file is located inside the admin-login folder.

For changing the background, you have to add the following codes:

Code:
body.login {
background-image: url('admin-bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Here, also make sure you have the admin-bg.jpg file inside the admin-login folder.

Change the WordPress logo Link

You’ll notice that when you click on the logo, it redirects to WordPress.org website. You can redirect it to your own website by adding the following codes in the theme’s function.php file:

Code:
// Use your own logo link
function wpc_url_login(){
return "http://www.mywebsite.com/"; // }
add_filter('login_headerurl', 'wpc_url_login');
So that’s it. You have a customized login page for admins now. Hire a dedicated graphic designer to make the best design. If you face any errors, restore the website and try again. Or, contact the hosting provider for more assistance.
Author
kumkumsharma
Views
511
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from kumkumsharma

Top