How to Style Wordpress Admin Login Page?
Whether you’re customizing a client site or your own, styling the Wordpress admin login page can be a great way to give an old site an update, or make it easier to recognize. In this guide we’ll be discussing how to style the wordpress admin login page using custom css.
Step 1: Enable Custom CSS in your theme
Before you can add any custom style to the WordPress admin login page, you’ll need to enable custom CSS in your theme. To do this, open your theme’s functions.php file. If you’re working in the WordPress dashboard, go to Appearance > Editor.
Once you’ve opened your functions.php file or the editor, find and paste the following snippet:
function my_custom_login_styles() {
wp_enqueue_style( ‘custom-login’, get_template_directory_uri() . ‘/custom-login.css’, false, null );
}
add_action( ‘login_enqueue_scripts’, ‘my_custom_login_styles’ );
This code ensures that your custom CSS is correctly loaded and displayed on the login page.
Step 2: Add Your Custom CSS
Once you’ve enabled custom styling for your WordPress login page, the next step is to create a custom stylesheet for the login page.
In the same Editor window, create a new file called “custom-login.css”. This will be where you add all the custom CSS for your login page.
When styling the WordPress login page, you can modify everything from the background color and images to font styles and sizes. Here’s an example of some custom CSS you can use:
/* Change the Background Color */
body.login { background-color: #303030; }
/* Change the Logo */
.login form {
padding: 0 0 0 110px;
}
.login #login h1 a {
background-image: url(https://example.com/images/logo.png);
width: 100px;
height: 100px;
background-size: 100px;
}
/* Change the Button Color */
.login #loginform .button-primary {
background: #22313f;
border-color: #22313f;
box-shadow: 0 1px 0 #22313f;
}
/* Change the Label Color */
.login label {
color: #fff;
}
/* Change Password Text */
.login label[for=”user_pass”] {
text-transform: uppercase;
font-size: 0.8em;
}
All of these changes can be applied to your custom-login.css file, and once you’ve added them, you can save the file and view the changes on your login page.
Step 3: Preview and Publish Your Changes
Once you’ve completed coding and saved the file, you’ll want to preview your changes. The easiest way to do this is to use the Chrome Developer Tools. Simply open up your login page, open the DevTools, and inspect the changes you’ve made.
If everything looks good, you can now publish your changes on the live site. To do this, go back to the WordPress dashboard and open up your Editor window. Re-open custom-login.css and click “Update File” to save and publish your changes.
Conclusion
Styling your WordPress admin login page is a great way to give an old site an update, or make it easier to recognize. In this guide we discussed the steps needed to style your wordpress admin login page using custom css. We talked about how to enable custom styling, how to add custom css, and how to preview and publish your changes. If you followed this guide, you should now have a stylish, custom-made login page!
Need a website for your business?
We offer affordable WordPress website design services that helps you create a powerful online presence. Our team of experienced designers has extensive knowledge of WordPress and can create a custom wordpress website design with elementor pro that perfectly reflects your brand and message. We will work closely with you to understand your needs and goals, and provide recommendations for design and functionality based on our expertise.
In addition to design, we can also provide optimization services for search engines, responsive design for mobile devices, and integration with social media platforms. Our goal is to create a website that not only looks great, but also delivers results for your business or organization. Let us help you take your online presence to the next level with our professional WordPress website design services.
