Customize the logo of your WordPress login page : second method

Want to customize the logo of WordPress admin login page? This is possible by inserting a few lines of code in the <span style="background: #E9EEF3;">functions.php</span> file of your theme. Finally, a website that is more professional and close to your brand.

 

The topic is named “second method” ; because previously we described another similar method, which does not require the use of CSS file.  Therefore, this method can be exploited to create a login page absolutely looking like your theme.

The WordPress default logo is present on your login page when accessed through the classic URL.

That is not very professional, you can replace it with one of your choice by interfering with your theme.

In fact, updates of WordPress will have no impact on your new logo; you will actually replace the default image file.

Log in first in your WordPress admin, open the Appearance menu and then click Editor.

On the right side of your screen, open the <span style="background: #E9EEF3;">functions.php</span> file.

Note: You can edit each file in your theme using a PHP editor for Mac OS X as Coda, Notepad + + for Windows or even Dreamweaver. The big advantage is being able to quickly undo the changes and enjoy editing features and uploaded via FTP.

 

Editing the file functions.php

At the beginning or end of file, insert the following lines of code:

Php / / custom logochildtheme_custom_login function () {echo '&lt;link rel="stylesheet" type="text/css" href="'. get_bloginfo('stylesheet_directory').'/login.css" /&gt;';}add_action ('login_head', 'childtheme_custom_login');?&gt;&nbsp;

 

Do not leave lines blank if you place it at the end of file.

The third line of code adds a custom style sheet loading the login page of WordPress. For example, we noted the URL of the stylesheet contained by default in any theme.

So we must either:

• Add CSS needed for the login page;
• Or create a new CSS style sheet that contains just the styles unique to the login page;

 

We will hold the second solution for optimal results – although, personally, we have adopted the first solution.

 

Create a style sheet

Using a text editor, create a new file named login . css.

Save it in <span style="background: #E9EEF3;">/ wp-content/theme/Your_Theme/</span> in your WordPress site.

Then add the following lines of code:

# Login h1 a {background-image: url ("http://YOURSITE.com/wp-content/themes/YOUR_THEME/images/your-logo.png")! Important;}

A file must exist, whose name must match the one you see in the code – in this case, logo-perso.png.

Of course, feel free to change this URL if your logo is not located in the theme folder.

To save your custom logo to your server, use an FTP client like FileZilla or Cyberduck.

 

Edit and see the outcome

 

If you have not encountered any trouble, here is the result of a custom login page with custom logo:

 

 

Choose an image of 320 by 80 pixels (maximum).

Among the very common mistakes, you may get a blank page.  Just make sure that there is no white line is present at end of file <span style="background: #E9EEF3;">functions.php</span>.

Unlike many tutorials on the subject, you should not get problems redirect to the WordPress admin page located at wp-admin.

Very important from a marketing perspective, customization of the logo is only a first step in creating your brand. Using your stylesheet, you can change all of this page and go further into what is commonly called branding.

 

Note: If you edit the CSS to set the background, login box style etc, you will get a totally different looking (and matching with your website’s theme) login page.