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.
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:
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:
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:
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:
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.
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');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');
}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;
}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');
