Are you looking for a quick and easy way to customize your WordPress login page or create an entirely new login page for your WordPress website?
Having a custom branded WordPress login page that matches your website branding can give your website’s dashboard a much better look for contributing authors, maintainers, editors, etc. This way the entry point of your website’s backend does not stick out and blends in smoothly with the overall website design.
In this article, I’ll show you how to customize every part of the WordPress login page easily and in a fully code-less way.
Making a Custom WordPress Login Page With Ultimate Dashboard Pro
In this tutorial, we’ll be using the Ultimate Dashboard Pro plugin to set up our custom WordPress login page.
Install and Activate the Ultimate Dashboard Pro Plugin
Before we begin customizing the login page, the first thing you need to do is install and activate the Ultimate Dashboard Pro plugin. If you need help setting up the plugin, you can check out this installation guide.
Creating a Custom Login Page
Once you’ve installed and activated the plugin, we can directly jump into customizing the login page. To begin customizing the WordPress login page, go to Ultimate Dash… > Login Customizer.
This will open the WordPress native customizer, and towards the left, you’ll see the following customization options.
- Templates: The templates option features three pre-designed layouts of the most used custom login page designs. You can select the one you like with a click.
- Logo: The default login page has the WordPress logo above the form. You can change this to your own brand’s logo by selecting the image from the media library and adjusting its height and title to match the design consistency of your brand.
- Background: You can use this option to add a custom image that will work as the login screen’s background.
- Login Form: This option lets you choose the layout for the form, i.e., left, default, right. You can adjust the form & box width as well as the padding.
- Input Fields: The input fields can be customized to fit the brand style as well. You can customize the height, color, borders, and padding for all form fields.
- Labels: This option lets you change the label text color.
- Log In Button: For the login button, you get to customize the height, padding, radius, text & background color.
- Footer Links: With this opion, you can customize the link colors in the footer, such as ‘Lost your password?’ and ‘Back to XYZdomain.com’.
- Custom CSS: Last but not least, you can add custom CSS to tweak things even further and make them look exactly like you want them to.
With these options, you can tweak your landing page the way you want.
For my landing page, I’ve made the following changes in every menu option.
- Template: Set the template to the right-side layout template.
- Logo: Added a custom logo and changed the logo title.
- Background: Added a custom background image with the position as ‘center center’, size as ‘to cover’, and background-repeat as ‘no-repeat’.
- Login Form: Set the layout to the Right and changed the box width and top and bottom padding to 25px.
- Input Fields: For the input fields, I left most of the options to default and changed the border and focus border color.
- Log In Button: Changed the background color and padding to match the brand style.
Once you’ve made all the changes, you just need to click on the publish button, and your custom branded login page will be live.
Here’s what the custom login page looks like:
Over To You!
It took me barely 10 minutes to install the plugin, set up a custom login page, and publish it. If you are looking for a solution, I’d highly recommend giving your WordPress login page a fresh look with the Ultimate Dashboard Pro plugin.
Let me know your thoughts on Ultimate Dashboard and tell us which functionality you’d like to see in the next update? Sounds off in the comments section below!