How To Customize Your WordPress Login Page
Need to customize the WordPress login screen? This tutorial shows you how to change the WordPress login image and how to customize your WordPress login page.
***
If you’re customizing your WordPress site, you may want to look at creating a custom login page. This way, you can brand the site with your own logo image, instead of using the default WordPress login image, add a custom background, change the style and look, and more!
For example, you may want to change the default image on your login page to display your business logo and promote your own brand.
Having a custom login form is especially useful if you plan to allow other users to access your site such as multiple authors, registering users, members, etc.
While there are thousands of WordPress themes to choose from, many use the same default WordPress login page (yourdomain.com/wp-login.php) …
Instead of greeting your site’s registered users with the plain login page shown above, you can add virtually any design to this page, including making the following customizations:
- Add custom backgrounds
- Replace the WordPress logo with a custom logo
- Customize the appearance of the Login Form
- Customize the login page typography with different fonts
- Add effects (e.g. ‘fade-in”)
- Change the Logo link to a custom URL
Here are just some examples of custom login pages and login forms on WordPress sites ..
(Source: Flickr)
View a range of custom login forms created for WordPress users below:
In this tutorial you are going to learn how to change your WordPress login image to create a custom branded look to your site.
How To Change Your WordPress Login Screen Image
By default, your WordPress site’s login page displays the WordPress logo image as shown in the example below …
Depending on what you plan to use your site for, you may want to change the default WordPress Login screen image to your own custom login design.
There are a number of methods you can use to replace the default login image. Let’s go through these:
Replace The WordPress Login Image On Your Server
Warning: This method works but it’s not recommended.
Some people recommend changing the default login image on your WordPress site by replacing the WordPress logo image on the server with your own custom image.
This method basically involves creating a new image with the same dimensions, format (.png) and filename as the default WordPress login image, and then replacing it in your server via FTP ( located in the ‘/public_html/wp-admin/images’ folder) …
This method works but is not recommended, because it involves changing content in the WordPress core installation files, which means that when WordPress upgrades to a new version, old files may get overwritten by newer ones, and you could lose any custom changes you have made.
The only reason for using this method, therefore, is for testing purposes, i.e. to see how a new login image will look – use a test site for this!).
Add Code To Your Theme’s functions.php File
This method involves adding some code to your WordPress Theme’s functions.php file …
As one of the goals of these tutorials is to teach you how to use WordPress without turning you into a web developer, we will skip this method here.
Tip: You can find more information about customizing WordPress code by searching online, or by visiting WordPress-related sites aimed at helping web developers.
For non-technical WordPress users, there are better alternatives to using either of the above methods.
Customize Your WordPress Login By Configuring WordPress Theme Options
Depending on the WordPress theme you are using, you may have a number of customizable theme options …
Check to see if your theme provides configurable options, and if so, whether or not one of these options is the ability to add your own site login image …
If your theme has a built-in feature that allows you to add a custom login image, then use this feature …
To learn more about configuring WordPress Theme settings, see the tutorial below:
Customize Your WordPress Login Page Using Plugins
If your WordPress Theme does not provide configurable options, then your best option is to use plugins.
Here are some great plugins you can use to customize your WordPress login screen …
LoginPress
(LoginPress)
LoginPress is a free and fully customizable WordPress login page plugin that creates impressive custom login pages for your site quickly with no coding required.
To install this plugin, go to Plugins > Add New and search for “custom login page” …
(Plugins > Add New)
Locate the LoginPress plugin and click ‘Install Now’ …
(Install LoginPress)
After installing the plugin, click ‘Activate’ …
(Activate LoginPress)
Once the plugin has been installed and activated, you will see a new ‘LoginPress’ section on your main menu.
Click on the menu to begin configuring the plugin …
(LoginPress welcome screen)
Configure the plugin settings and click ‘Save Changes’ when done …
(LoginPress settings screen)
To configure the plugin, go to the Theme Customizer section and click on LoginPress …
(Theme Customizer – LoginPress)
LoginPress lets you customize every aspect of your WordPress login page …
(Customize every aspect of your login form with LoginPress)
You can customize your login page in minutes (even seconds) with LoginPress. Choose different themes, add your logo, change the background, customize login and forget forms, buttons, error messages, welcome messages, the form footer, change fonts, and more …
(Customize your login page in minutes with LoginPress)
Watch the video below to see the plugin in action …
(LoginPress – Customizing the WordPress Login Page)
There is also a premium version of the plugin with additional features and addons for extra functionality.
To learn more about this plugin, go here: LoginPress
Other Screen Login Page Plugins
There are other plugins you can use to customize your WordPress login page. here are some more you can check out:
Custom Login
(Custom Login)
Plugin URL
http://wordpress.org/plugins/custom-login
Plugin Installation
To find custom login form plugins, go to Plugins > Add New …
Select the Install Plugins > Search tab, then type in “custom-login” into the search field and click on the Search Plugins button …
This will bring up a number of suitable custom login plugins that you can choose from.
For this tutorial, we will install and configure one of these plugins, and then provide a list of other options further below.
Locate the Custom Login plugin in the search results area and click Install Now …
Plugin Configuration
Install and activate the Custom Login plugin …
To configure the plugin, go to Settings > Custom Login …
This brings up the plugin’s settings screen …
The Custom Login plugin lets you customize your entire login page. You can add a custom background image or background color, add a logo image, customize the login box, and even use your own stylesheets.
Once you have configured all of the settings, activate the plugin and save …
To view your new custom login page, log out of WordPress and go to your wp-login.php page …
Experiment with different plugin settings until you are happy with your new custom login form.
YITH Custom Login
(YITH Custom Login)
Plugin URL
http://wordpress.org/plugins/yith-custom-login
Plugin Description
YITH Custom Login plugin lets you change the default style of your WordPress login page.
Customization options include changing the background, logo, typography, form and colors …
(YITH Custom Login. Source: plugin site)
Branded Login Screen
(Branded Login Screen)
Plugin URL
http://wordpress.org/plugins/branded-login-screen
Plugin Description
The Branded Login Screen plugin let you use a hi-res, full screen, fully responsive background image on your WordPress login page.
Other plugin features include:
- Use your own header image instead of the WordPress logo
- Position your login form on a different part of your page
- Responsive login form works on smaller screens
- Scrolling of form if outside of viewport
- Background image sizes with window resize
- Repeating background images supported
- Removes all WordPress branding from your login page
One of the great features of this plugin is that it allows you to position the login box in a different location than the default center position …
(Branded Login Screen. Source: plugin site)
Note: The FREE version of the plugin requires editing some files to customize. The PRO version of this plugin lets you customize your login screen more easily and offers a number of additional enhancements.
WP Custom Login
(WP Custom Login)
Plugin URL
http://wordpress.org/plugins/wp-custom-login
Plugin Description
WP Custom Login lets you add a custom header and footer to your site’s login page …
(Customize your login page header and footer section. Source: plugin site)
Social Login
(Social Login)
Plugin URL
http://wordpress.org/plugins/oa-social-login
Plugin Description
Although the Social Login plugin doesn’t change the look of your default login screen, it adds a social aspect to it, by letting your visitors comment, login and register with 20+ Social Networks like Facebook, Twitter, Google, YouTube, LinkedIn, PayPal, LiveJournal, Hyves, Yahoo! and more …
Sexy Login
(Sexy Login)
Plugin URL
http://wordpress.org/plugins/sexy-login
Plugin Description
Sexy Login is a WordPress plugin that lets you entirely change the look of your WordPress login page. It supports a number of advanced features, including:
- AJAX Login Form.
- AJAX Register Form.
- AJAX Lost Password Form.
- Error handling without refreshing your screen.
- Optional ReCaptcha verification for login and register forms.
- Control forgotten password requests.
- Compatible with Internet Explorer, Safari, Chrome, Firefox, Opera.
- Work with forced SSL logins.
- Fallback mechanism, still work on javascript-disabled browsers.
- Specific option to show link to profile page and dashboard.
- Customizable redirect URL after log in or log out.
- Option to show or hide an avatar and change its size.
- Responsive design.
- Supports multi-language capabilities.
This plugin also has a “fallback mechanism” that ensures your login page will remain accessible to all users, including those with JavaScript disabled browsers …
(Sexy Login WordPress plugin. Source: plugin site)
Congratulations! Now you know how to change your WordPress login image and how to customize your WordPress login page.
***
"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie