Customize Your WordPress Login Page With No Plugins

There is nothing that gives away the fact that your site is built on WordPress or shows a lack of professionalism more than when a user visits the default WordPress login page.

Default WordPress Login Page

In this video tutorial, we are going to take a look at how to customize this login page to make it look like the rest of your site. But instead of adding yet another plugin, we are going to do it with a little snippet of code and a CSS file.

With a new CSS file, you will be able to target the main aspects of the page and make them look however you like.

Is Your Site Optimized?

Get a detailed analysis of your site’s SEO, responsiveness, speed/performance and more.

Don’t worry, we hate spam as much as you do.

Whenever you are done, you will have an awesome login page that reflects your style and branding without bloating your install with more plugins. Some basic knowledge of CSS is helpful but I have included all the code below.

So check out this video below to learn how to do it yourself.

VIDEO: Customize The WordPress Login Page With CSS

There are three main areas we go over in this video. Inserting the code into your functions file, creating the CSS file, and uploading your CSS to your server.

How to customize the default WordPress login page with CSS.

  1. Edit Your Theme’s Functions File

    In order to style the login page, you must insert some code into your theme’s functions.php file. This will tell WordPress to look at your style sheet first and use your CSS to style when loading the page. Additionally, we want to change the link and title of the image above the login box.

  2. Create CSS to target the form elements

    Create a new style sheet and target the elements of the page and login form. Here are some elements to target.

    body.login {} body.login div#login {}
    body.login div#login h1 {}
    body.login div#login h1 a {}
    body.login div#login form#loginform {}
    body.login div#login form#loginform p {}
    body.login div#login form#loginform p label {}
    body.login div#login form#loginform input {}
    body.login div#login form#loginform input#user_login {}
    body.login div#login form#loginform input#user_pass {}
    body.login div#login form#loginform p.forgetmenot {}
    body.login div#login form#loginform p.forgetmenot input#rememberme {}
    body.login div#login form#loginform p.submit {}
    body.login div#login form#loginform p.submit input#wp-submit {}
    body.login div#login p#nav {}
    body.login div#login p#nav a {}
    body.login div#login p#backtoblog {}
    body.login div#login p#backtoblog a {}

    By styling these elements, you can adjust the look of just about every aspect of the page.

    Read more about customizing the login page.

    WordPress Login Page Annotated

  3. Upload your style sheet file

    Once you have created the style sheet file, upload it to your theme’s folder using FTP or through your hosting file manager. You can refresh your login page and see what it looks like. From here, you can tweak the styles and save the CSS file to see the changes.

    Newly styled WordPress Login Page

Theme Functions Code

Use this code to insert into your theme’s functions.php file. You can just add it right at the bottom of the file. Just remember to remove the php opening and closing tags.

CSS File to Style the Login Page

Use this CSS file as a starting point to style your page the way you like it.

Conclusion

Now you should have everything you need to make your WordPress Login Page reflect the design of the rest of your site. Leave a comment below if you have any questions or suggestions.

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkedin
Share on pinterest
Share on Pinterest

Leave a comment

Learn More About WordPress Maintenance & Support from TendWP.

  • Request A Call

Or Call Us: