Supercharge your SEO! Subscribe to our newsletter for the latest SEO tactics & best practices

How Can I Change the Login Screen Styles on WordPress

By Guest Author
Updated June 30, 2018
No Comments
Guest Author

We have previously accepted high-quality guest articles from select experts. We are not currently accepting guest articles at this time.

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.

  1. Create a folder called login in the root directory of your theme. /wp-content/themes/your theme
  2. 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.
  1. 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.
  2. 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>’;

Hook better leads with hard-working digital marketing

We help small businesses get more traffic and leads with Professional Visibility™ through web design & SEO

Free Marketing PlanGet a Free Demo
Ready to hook better leads and save time with hard-working digital marketing? Start the Conversation

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 “;” however, you may want to redirect it to a support page, an informational page, or your own homepage.

  1. 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 ‘’;} 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.

  1. 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’);


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.


Watch this quick video to see how savvy businesses save time and hook better leads:



Related Posts

Guest Author

We have previously accepted high-quality guest articles from select experts. We are not currently accepting guest articles at this time.

Download my E-book "WordPress Development for Noobs" for free right now:

  • This field is for validation purposes and should be left unchanged.
Only the best of web design & marketing
Notify of
Inline Feedbacks
View all comments

Want to hook better leads with hard-working digital marketing?

Get a free consultation now

Most businesses worry about bringing in enough leads

We build beautiful websites and aggressively integrate them with Google search to hook better leads, so you can focus on what you love to do most - serving your customers