{"id":139717,"date":"2016-12-12T12:00:26","date_gmt":"2016-12-12T18:00:26","guid":{"rendered":"https:\/\/getflywheel.com\/?p=20455"},"modified":"2023-11-13T13:38:11","modified_gmt":"2023-11-13T19:38:11","slug":"custom-wordpress-login-page","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/custom-wordpress-login-page\/","title":{"rendered":"How to Create a Custom WordPress Login Page"},"content":{"rendered":"\n

One could argue that the login page is the most important page of any WordPress site. Without the ability to log in, how else can blog owners publish great content? In addition to content creation, this is also the way into the various WordPress configuration options.<\/p>\n\n\n\n

The default login page is pretty simple and serves it\u2019s purpose very well. It has the necessary fields for the user to enter their WordPress credentials and the page controls access to the administration screens, allowing only registered users to log in.<\/p>\n\n\n\n

As a designer, you\u2019ve probably spent hours and hours creating the perfect website design. It\u2019s important to carry that design through the whole user experience, even if not all users will interact with the login page. This is another opportunity to add that extra detail and will leave a positive impression for those users who regularly log into the site. <\/p>\n\n\n\n

(Plus, it’s considered a WordPress security best practice<\/a> to move the page to a URL that’s a little less obvious!) Although it is not typically part of the WordPress theme setup, it is pretty simple to make customizations to the WordPress login page.<\/p>\n\n\n\n

How to Access the WordPress Login Page<\/h2>\n\n\n\n

You\u2019re probably very familiar with accessing this page, no matter what your site responsibilities happen to include. But just in case it’s been awhile, it\u2019s typically found in the website’s root directory. The login page is typically something like www.mysite.com\/wp-login.php<\/code>. As you can see, this one has not been styled yet.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

In some cases, there may be a WordPress install in its own subdirectory. It would then be something like www.mysite.com\/directory-name\/wp-login.php<\/code>.<\/p>\n\n\n\n

How to Customize the WordPress Login Page<\/h2>\n\n\n\n

In the following steps, CSS will be used for styling purposes. Also, there will be theme-specific code added to the functions.php<\/code> file to make the custom page happen.<\/p>\n\n\n\n

Like most tutorials, you\u2019ll want to try this in your test environment first. If you are looking for a good test environment tool, you\u2019ll want to get familiar with Local<\/a>. You can efficiently test out new things on your site before going live.<\/p>\n\n\n\n

We\u2019ll be making modifications to the functions.php<\/code> file in this tutorial so you can see how the changes work. However, there\u2019s also the option to use these concepts to create a plugin and add any potential modifications there rather than in the functions.php<\/code> file. For this tutorial, the design changes for the login page are very theme-specific, which is why we chose to add them to the theme instead of making a plugin.<\/p>\n\n\n\n

Make a new folder for customizations<\/strong><\/p>\n\n\n\n

Getting organized is key when adding customizations to a theme. You\u2019ll want to create a new folder specifically for these changes. To do that, find your current active theme and create a folder called \u201clogin.\u201d<\/p>\n\n\n\n

\"Login<\/figure>\n\n\n\n

Next, a CSS file is needed to reference the custom login styles. In the new login folder, create a blank CSS file and give it a name that’s easy to remember. In this case, it is login-styles.css<\/code>.<\/p>\n\n\n\n

How will this stylesheet get connected? It will need to be referenced in the theme\u2019s functions.php<\/code> file. Open the functions.php<\/code> file and paste the following snippets in. (Be sure you include your own naming of the CSS file, if you used something different than login-styles.css<\/code>.)<\/p>\n\n\n\n

function custom_login() {\necho '&amp;amp;amp;amp;amp;lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"' . get_bloginfo('stylesheet_directory') . 'login\/login-styles.css\" \/&amp;amp;amp;amp;amp;gt;';\n}\nadd_action('login_head', 'custom_login');<\/code><\/pre>\n\n\n\n
Changing the logo<\/strong><\/p>\n\n\n\n
This is a fairly easy change to make, and it has a lot of impact to the branding improvement. The browser inspector tools are a huge help in determining the structure of the page. In this example, Chrome Developer Tools was used. To change the WordPress logo to your own, you will need to change the CSS styles associated with this heading:<\/p>\n\n\n\n
&amp;amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;a href=\"http:\/\/wordpress.org\/\" title=\"Powered by WordPress\"&amp;amp;amp;amp;amp;gt;Your Site Name&amp;amp;amp;amp;amp;lt;\/a&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;\/h1&amp;amp;amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n
\"Changing<\/figure>\n\n\n\n
We want to make the CSS specific so targeting the div<\/code> with the class of .login<\/code> will allow us to style the heading and link inside that div<\/code>.<\/p>\n\n\n\n
\"Changing<\/figure>\n\n\n\n
To keep things organized, we\u2019ve created a separate images folder. This is optional and you could reference a file in another location if you wanted. Just be sure that the file path is correct for the image you want to use.<\/p>\n\n\n\n
.login h1 a {\n  background-image: url('images\/login-logo.png');\n}<\/code><\/pre>\n\n\n\n
\"Separate<\/figure>\n\n\n\n
We did this using the specified height of 84px in the default style. If you\u2019d like to make it larger or smaller, you can specify that in this CSS stylesheet. There\u2019s the opportunity to specify different margins and padding as well.<\/p>\n\n\n\n
\"Within<\/figure>\n\n\n\n
Why can\u2019t the original logo be swapped out? The reason is that when WordPress updates, it may be wiped out.<\/p>\n\n\n\n
With this simple style, we now can say goodbye to the generic WordPress logo. This logo swap makes it feel much more personal and branded.<\/p>\n\n\n\n
\"The<\/figure>\n\n\n\n
Styling the custom background<\/strong><\/p>\n\n\n\n
The background could be a solid color, pattern, or something image-based. In this example, we\u2019ll add a black and white, abstract, \u201ctechy\u201d photo to the background.<\/p>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
Using browser dev tools, the structure can be studied. When inspecting, you will see that the background styles have been set for the body. Things are pretty general, so making things more specific will ensure you don\u2019t make any global changes that you don\u2019t want. There is a class applied to the body called .login<\/code> which will be of great use (this is what we used for the logo in the above example, as it was part of the selector).<\/p>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
body.login {\n  background-image: url('images\/example-image.jpg');\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  background-position: center;\n}<\/code><\/pre>\n\n\n\n
If the image doesn\u2019t show up, double check that the path to the image is correct.<\/p>\n\n\n\n
\"WordPress<\/figure>\n\n\n\n
Things are starting to take shape here; even with just these minor changes, the login page is looking a lot more branded and more interesting than the default.<\/p>\n\n\n\n
Adjusting the logo link<\/strong><\/p>\n\n\n\n
This certainly isn’t a showstopper, but now that you have your own logo on the login page, it should link to your actual website. Currently, it goes to wordpress.org<\/code>. That\u2019s all fine and good, because wordpress.org<\/code> is a popular and helpful place, but in our opinion, having a browser bookmark for that is more than adequate. It does not have to be part of the login page because it seems more useful to have a quick way to get to the project site.<\/p>\n\n\n\n
To change the link value so the logo links to your WordPress site, use this function (and remember to insert your own website URL):<\/p>\n\n\n\n
function login_logo_url() {\n    return 'https:\/\/www.mysite.com';\n}\nadd_filter('login_headerurl', 'login_logo_url');<\/code><\/pre>\n\n\n\n
If you\u2019re wondering where the filters came from, we had to look at the function reference to find login_headerurl<\/code> and login_headertitle<\/code>.<\/p>\n\n\n\n
So now the link is going to the correct place, but what about the title text? If you hover on the logo, you will see \u201cPowered by WordPress\u201d as a title tag. This is absolutely fine, but this isn\u2019t fully descriptive to where the link is going. This is pretty quick and easy to fix, so it\u2019s worth the extra time. For a more accurate title, add this simple function.<\/p>\n\n\n\n
function login_logo_text() {\n    return 'The Title';\n}\nadd_filter('login_headertitle', 'login_logo_text');<\/code><\/pre>\n\n\n\n
More styling options<\/strong><\/p>\n\n\n\n
Feel free to go CSS crazy and expand on what we\u2019ve done here. You can style every HTML element on the WordPress login page with CSS. The examples above just scratched the surface. The button, links, and form background can all be customized. And don\u2019t forget about typography, as that can be customized, as well.<\/p>\n\n\n\n
\"WordPress<\/figure>\n\n\n\n
If you\u2019ve developed a form style, it would be a seamless experience to carry those styles through to the login page. The same goes for buttons. This makes it a consistent experience and won\u2019t throw users off by having a completely different button than what is used on the actual site. If you\u2019ve created a web style guide, this will be very helpful in determining how to apply consistent design to the login page.<\/p>\n\n\n\n
And if CSS isn\u2019t your thing, there are existing WordPress plugins that will help you create a custom WordPress login page. Here are a few options worth checking out:<\/p>\n\n\n\n