Are you looking to produce a custom branded login screen for your clients? In this blog post, we will walk through how to customize in the login screen within your theme.
This is the default Wordpress branded login screen.
**Before making any changes to a live client site, make sure you have a good back up to restore, should things go wonky. It’s not anticipated, as it’s an easy change. If you want to see how the process works before implementing with a live client site, make the changes in a test environment and play with it until you are comfortable.**
1. Change the Login Logo
Most of the changes required can be found in the functions.php. This is a required file for all Wordpress installs, and it works with any theme. We will be adding the code to the end of this file. The changes in this file are specific to your active theme, if you changed the theme in the future, the changes here would need to migrate to the functions.php file in the new theme.
- Create a folder called login in the root directory of your theme. /wp-content/themes/your theme
- Open the functions.php found in your theme with the editor of your choice /wp-content/themes/your theme/functions.php
- For Mac users – Adobe Dreamweaver and SublimeText are a few that come to mind.
- For Windows users – Adodbe Dreamweaver and Notepad++ come to mind.
- These changes can be within the file manager located in the c-panel of your hosting company as well.
- Save your logo file as logo.png in the login folder you just created. The Wordpress default logo size is 80 pixels x 80 pixels. You don’t have to stay within that size, for aesthetic purposes make sure your logo fits the dimensions of the Wordpress login box itself, which is about 325 pixels wide.
- Add the following code to the end of your functions.php file.
function my_loginlogo() {
echo ‘<style type=”text/css”>
h1 a {background-image: url(‘ . get_template_directory_uri() . ‘/login/logo.png) !important; }</style>’;
add_action(‘login_head’, ‘my_loginlogo’);
Make sure to include the “!important” declaration to overwrite the default logo image.
After adding this code, the login screen should appear with your logo.
2. Change the Logo Image URL
The default Wordpress install points to “https://wordpress.org/;” however, you may want to redirect it to a support page, an informational page, or your own homepage.
- To change this link, you want to add the following lines of code to the end of the functions.php file. Replace “yourdomainname” with the domain name of your choice.
function my_loginURL() {return ‘https://www.yourdomainname.com’;} add_filter(‘login_headerurl’, ‘my_loginURL’);
3. Change the title tag (Powered by WordPress), to your company name preference.
You want to add the following add code to the end of the functions.php file.
function my_loginURLtext() {return ‘Your Company Name’;
add_filter(‘login_headertitle’, ‘my_loginURLtext’);
4. Adding a Custom Stylesheet
We have made changes to the login screen to reflect your company’s logo and url. We can take things even further by changing the color of the “Login In” button, and the text (Username, Password, Remember Me, etc.) on the login box.
We can make these changes to the login box by adding a new CSS stylesheet to the active theme. Basic CSS knowledge is involved with this step; you can copy the code from the article and change the colors and text to match your company’s brand.
- In the login folder you created earlier, add a new file called login_styles.css. Open the file with your editor of choice. Add the following snippet of code to the file:
/* Change font family */
body {
font-family: gotham-medium !important}
/* Add a few changes to the color and style of form itself */
.login label {
color: #a8943d;
display: block;
margin-bottom: 1em;
text-transform: uppercase;
}
.login form .input {
font-weight: normal;
}
.wp-core-ui .button-primary {
background: rgba(16, 40, 70, 1);
}
I want to walk you through the changes I made. First, I added the font family to the body tag, to change the general typography (to match the rest of Hook’s website) of the page. Secondly, I changed the colors and styles (again to match Hook’s brand) on the login form, to uppercase for all text except the login button, and changed the color of the “Log In” button.
In order to have these changes take effect, you will need to add the following code snippet to your functions.php file:
function my_logincustomCSSfile() {
wp_enqueue_style(‘login-styles’, get_template_directory_uri() . ‘/login/login_styles.css’);
}
add_action(‘login_enqueue_scripts’, ‘my_logincustomCSSfile’);
We made quite a few changes to the default Wordpress Login box. Here is the result of the changes we made.
5. Redirecting Users after Login
The default Wordpress install redirects user to the WordPress admin after they login. If you have a site with open registration, or a specific page you want clients to be redirected to, going to the Wordpress admin may not be the behavior you want. To redirect users on your site after they login, you want to add the following snippet of code:
function my_loginredrect( $redirect_to, $request, $user ) {
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array(‘administrator’, $user->roles)) {
return admin_url();
} else {
return site_url();
}
} else {
return site_url();
}
}
add_filter(‘login_redirect’, ‘my_loginredrect’, 10, 3);
I want to walk you through the changes I made. First, the function checks the user’s role. If the user logging in is an administrator, they are redirected to the admin page (admin_url()) like normal, otherwise, they are directed to the site’s main homepage (site_url()). As a final safety check, then users are directed to the homepage as well. These two URLs can be changed to direct to any page on your site by hard coding a link.
For secure sites using https: return site_url(‘/pagename/’, ‘https’);
For non-secure sites using http: return site_url(‘/pagename/’, ‘http’);
Conclusion
Implementing the code we have outlined in this article will help customize your Wordpress login box making it more appealing by matching the styles, fonts, and logo to your company’s brand. All of the code is usable in any theme you have installed or plan to use. Remember, if you do change themes, you need to migrate the code to the new theme.