Despite the consumer-focused nature of the WordPress content management software, an increasing number of larger organizations and even businesses are adopting WordPress to manage their site’s content — especially corporate blogs and customer outreach programs that take advantage of social media and interaction humanize a company’s brand.

These larger organizations aren’t content to let their backend user interface be branded using WordPress logos and design cues; instead, they prefer to customize the software and ensure that all of their employees know that they’re working within the company’s structure and purview.

It might sound complicated, but customizing the WordPress interface is actually pretty easy, especially when customizing the initial login screen that brings users to the traditional Dashboard homepage.

Because WordPress is styled using CSS, and can be customized with PHP functions, it’s straight forward and even encouraged to give this crucial part of the interface its own look and feel.

Step 1: defining a custom function that points to a custom stylesheet

The first step in generating a customized login page for a WordPress installation is to define a custom function that directs the page to look for a new stylesheet instead of the one that is used by default when WordPress is installed. This is actually pretty easy and can be done on a theme-by-theme basis. This means that a WordPress login page can be unique customized to match the look and feel of every theme a user develops.

To define this new function, open an FTP client and navigate to the following server path:

/public_html/wp-content/themes/SELECTED-THEME/functions.php

Remember that, since this is on a theme-by-theme basis, the current theme selected in the Dashboard is the one that we will have to modify in order to see the results immediately reflected using a web browser. Once you have located this theme’s functions.php file, right click that file and download it to your computer. Open this file in a plain text editor.

Optionally if your current WordPress theme has no functions.php file in its main folder (and this is the case with a good number of custom and self-made themes), open a text editor and create a new plan text file. Save it as functions.php and ensure that no “rtf” or “txt” extension was appended to end. This file will then be uploaded to the server and WordPress will immediately recognize it and put its custom code to use on the login screen.

The function that will be placed into this file is used to redirect the page’s header file from the WordPress-defined Dashboard stylesheet to one that is created by the user. It looks like this:

function custom_login() {
echo '< link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/branded-login-screen.css" / >';
}

Remember that a functions.php file must open with <?php and be closed with a final ?> tag. Paste this code between those tags, save the file, and then upload it to the server.

Step 2: creating the branded login page’s stylesheet information

The previous function placed a stylesheet meta tag into the login screen’s “head” section, but that stylesheet has yet to be created or filled with unique material that will change the appearance of the login screen itself. Rectify this by opening a plain text editing application; create a new file called branded-login-directory.css and save that file. Upload it to the server, but keep it open on the desktop as well.

Remember that this file must be placed within the current selected theme’s home folder, the same place that the functions.php file previously edited is located. Putting this file anywhere else will result in no changes being made to the appearance of the login screen.

There are several pieces of information that will be modified using CSS code. These will be pasted into the new stylesheet that was just created, and users can customize their specifics according to their own taste and branding requirements.

Step 3: changing the page background colors and properties

The first step in the process is also the most broad. Users must customize the background color from the traditional WordPress login screen’s light gray to the color of their choice. This is done by assigning style attributes to the page’s “HTML” tag, and it looks like this:

/* Branded Login Background Colors */

html {
background: #000 url('http://your-domain.com/path-to-url/image.gif');
margin: auto;

The first line of code simply describes what the CSS code is doing and it’s a great way to keep track of the changes being made. There’s nothing wrong with annotating a CSS file; during an experimental design process like this one, it will speed things along and make them far easier to manage.

In the code above, a background color of black was defined using the #000 code. Next to that code is a url() construction, which allows the user to define a custom background image for the page. If no background image is preferred, this can be deleted and the page will default to a solid back background color. The use of the “margin:auto” tag centers all content within a page based on a browser’s width. This is why the login box is centered horizontally on every WordPress installation.

Step 4: removing and replacing the WordPress logo

For branding purposes, perhaps the single most important modification is removing the existing WordPress logo and replacing it with the company’s branding mark. This clearly identifies which company controls the content within, and it helps to create a consistent use and administration appearance for those users who publish content to the site and interact with the company’s readers. This is done using the following CSS code in the custom stylesheet:

/* Brand Logo in Place of WordPress Logo */

h1 a {
background:url('http://your-domain.com/path-to-url/logo.gif') no-repeat;
width: 400px;
height: 100px;
margin-left: 0 0 0 10px;
padding-bottom: 0;
}

Using this code keeps the same padding and margins that accompany the standard WordPress logo. However, the code redefines the “h1″ tag in favor of the branding company and allows them to place whatever image they prefer in place of the standard logo. The use of width and height tags within this class allows for a custom logo size that can be either bigger or smaller than the standard WordPress logo.

Step 5: customizing the top bar on the login page

Every WordPress installation comes with a black bar at the top of the login and Dashboard pages that contains useful information, standard links, and other content based on where a user finds themselves in the administration interface. While black is a universally neutral and compatible color, it might be in the best interest of some businesses to customize the bar’s color as well as the appearance of link text and other information contained within it. The CSS code in this step of the process allows any color to be defined as the WordPress bar’s background color, and it enables changing the color of text and links in that top bar.

/* Branded Top Bar Background Color */

body.login {
border-top-color: red;
}

/* Branded Top Bar Lost Password Link */

.login #nav a, .login #nav a:hover {
color: #fff!important;
}

/* Branded Top Bar Link Color and Styling */

.login p#backtoblog a:link, .login p#backtoblog a:visited {
color:#fff;
font-weight: bold;
}

.login p#backtoblog a:hover, .login p#backtoblog a:active {
color:#fff;
text-decoration:underline;
}

The above CSS code changes the top bar’s background color to red and ensures that all links and texts printed on that bar are done so in white (#fff). This ensures maximum contrast and makes readability easy, even without the standard black background. It’s a great way to take customization of the WordPress login screen to the next level with a relatively minor change to the site’s appearance.

Step 6: customizing the last pieces of the WordPress login page

There are two pieces of the standard WordPress login page which are typically overlooked by the average user when branding the appearance of this critical website within the WordPress installation. Those two things are the actual login button itself and the returned message text when a password is invalid or the installation is offline for things like upgrading and maintenance issues. Typically, the message text is printed in pink while the login button is displayed in a gray, rounded fashion. Both things can be changed using our custom stylehseet.

First and foremost, the message text must be changed so that it matches the new site’s color scheme. This is done by including a new class in the stylesheet known as “.message.” It looks like this when it has been fully customized:

/* Error Message Text for Custom WordPress Login Page */

.message {
margin-bottom: 0px;
color: #000;
border: 1px solid black;
background-color: #fff;
padding: 10px;
}

This code defines the error message text as being in a thick white box, surrounded by a solid black border, featuring plain black text. It is perhaps the least inspiring way to present this information but, as always, designers are encouraged to put their stamp of creativity on this error message and make it more inviting to the end user.

Next, it’s time to style the login button. The standard styling of this button is compatible with a wide range of color choices, but many companies will still prefer to alter its appearance to blend in with their overall site structure and design. This button is customized just like any other form element, and the final version of this login button will look something like the example shown below:

/* Login Button */
#wp-submit {
background: #fff;
border: #000;
}

Truly a boring login button, the example above merely creates a standard form button with a white background and black text. No border, no margins, no padding. This, like the rest of the CSS stylesheet, is a blank canvas which is designed to be inviting to motivated and inspired designers. Almost anything can be done with this CSS class, including using a background image instead of a background color, and forcing the button’s text to be removed so that only the image can be seen.

Step 7: uploading the stylesheet and testing the results

Designing a customized WordPress login page is easy in theory but, when push comes to shove, using CSS to define a page full of custom elements is never an easy task. It requires a good deal of experimentation with colors, pixels, alignments, and all manner of customizations that typical XHTML and CSS files require. For this reason, it’s important to periodically upload the stylesheet and then navigate to the login page to judge its appearance.

The first several times, it’s likely to appear quite distorted, jumbled, or just plain ugly. That’s fine. Simply return to the customized stylesheet and add new information which will help change the appearance of the site.

Optionally, the advanced web designer might choose to view the actual source of the login page to get a feel for all of the elements that are used to compose its appearance. While this tutorial will help designers radically change the appearance of their WordPress login page, it is by no means a comprehensive list of every microscopic and structural element that composes the site.

Do you use custom login pages on your WordPress installs?

Vladislav Davidzon is the principal of a US-based online marketing consultancy, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world. For more details visit Vladislav Davidzon & Associates.

A Ginormous Bundle: 1,500 Vector Icons – only $27!

Source