Customize WordPress login

wordpress-loginChanging the look of the login page is probably one of the things we first need to do when setting up a new WordPress website. In this tutorial we will present some simple ways to customize WordPress login page logo and form. There are some cool plugins to use too!


By default, every WordPress login page includes WordPress logo right above the login form and a pre-defined form style.
There are plenty of reasons for us to change the login page:

  • creating a professional branded website;
  • reinforcing current website branding;
  • or just because we want to give it a more personal touch.

WordPress offers us hooks (functions) that allow us to hook into WordPress and call specific functions during page cycle. Hooks are used to manipulate the behavior of the platform without touching the source code. There are 2 types of hooks in WordPress: Filter and Action.

  • Filters are used to modify the content generated by WordPress tags.
  • Actions are used to perform actions when certain events occur in WordPress on page cycle during which we can add our own functionalities.

Changing the login screen requires using 3 specific hooks:

  1. login_head to add our CSS to the head of the login page.
  2. login_headerurl to change the URL of the login logo.
  3. login_headertitle to change the title of the logo link.

Changing the logo

Option #1
Replace the logo using file functions.php

To change the WordPress logo (on the login screen) we need to use the login_head filter and link it to a function that injects some CSS code to replace the default trademark logo by your own image.
Add the following PHP code anywhere in your functions.php file.

The H1 style that formats the WordPress logo is set to 320×80 and the logo image is 80×80 pixels, yet it’s likely your logo is of a different size so you’ll need to override the background size and height of the “h1 a” tag to the dimensions of your logo.

By adding !important we can override any existing style.

To make this work, an image must exist in folder wp-content/themes/THEMENAME/images/my_logo_image.png.

Option #2
Replace the logo changing wp-admin.min.css using FTP cPanel

For this alternative method let’s start by logging into WordPress site’s admin panel.

1. In WP Admin, go to Media > Add New.

2. Upload the new logo and copy its direct link.

3. Log into your website’s cPanel and navigate to the File Manager.

4. Open the file manager and navigate to the folder wp-admin/cs

5. Open CSS file wp-admin.min.css.

6. Locate style class .login h1 a

7. Set the background image to your new logo, by pasting the copied URL:

login


Customizing the Login Form

This is the default structure of the login screen:
login_form

Before starting customizing the login form, it’s very important that we fully understand the structure of the login screen, namely ID’s and classes used in this page. As an example, targeting #login would allow setting a custom background to the entire page.

Understanding this structure and how HTML elements are nested or stacked is important before you can add your own CSS rules.
The above image will help you understand this structure in detail.

All the following code should be placed in the themes function.php.

#1 Change logo title and hyperlink

In the first place, let´s edit some properties related to the logo:

  • Edit the title, on mouse over.
  • Edit logo hyperlink.

For this we need to use the login_headertitle and login_headerurl filters to return, blog name for the title and root website URL for the hyperlink.

#2 Add a background color or image

Changing the background color or even adding a background image to the login page can also be a great way to customize the login window. The CSS below can be added to our existing new_login_logo function above the .login h1 a class.

#3 Change the login form colors

The default WordPress login form has a white background and grey text but we want our form to have custom colors on text. This can be done by adding the following CSS:

#4 Change the login button style

The following styles can be used to change the blue gradient, border and hover styles of the login button. The light blue highlight on the button can also be targeted using inset box-style and -webkit-box-shadow. In the example below, the login button is changed to an orange using the following CSS.

#5 Hide the forgot password and back links

If you don’t use the forgotten password or back to homepage links at the bottom of the login page, you might hide them. This is possible using the following CSS code:

Our function will look like this:


Useful plugins

To finalize, we leave you with a list of some great plugins, which can be very useful when customizing the login screen:

By | 2014-04-22T13:34:18+00:00 April 22nd, 2014|Articles|3 Comments

About the Author:

Programing is not a job but a lifestyle...

3 Comments

  1. maillot de foot 2014 May 22, 2014 at 3:53 am - Reply

    maillot de foot 2014

    I couldn’t resist commenting, Many thanks a whole lot for sharing!

  2. Emry July 31, 2014 at 9:22 pm - Reply

    Hello there,
    I am looking for a long time a way to get the connection and registration on the wp-login.php page, just like the login page of Twitter, Badoo… Have you any idea how to do that? A plugin?
    Thank you.

    • Carlos Silva August 1, 2014 at 10:16 am - Reply

      You have two ways for doing this:
      1. manually (in your WP installation following the steps described in this article)
      2. via plugins

      In the end of the article, there is a list of some of the most used plugins for the purpose.
      In your case, like your intention is to have something similar to Twitter or even Badoo login, try the Branded Login Screen plugin.

      I think that is very close option for that you intend to do. But you must have some knowledge in PHP to be able to put the page with your preferences.

      Hope this helps

Leave A Comment

Captcha * Time limit is exhausted. Please reload CAPTCHA.