How to Customize Your WordPress Login Screen and Password Protect Your WordPress Blog

One of many personal / business projects I have been working on is creating a business network for small business owners and self-employed individuals such as myself that works similar to BNI. I want this network to have an online presence, a members only secured area that requires password entry, and a home web page for anyone to view and learn about the network before requesting membership and access to the members only area. Initially I started with a Ning network account but wanted more control over what got displayed and how without too much hacking and also without hacking to pay for upgrades when otherwise Ning is free. Plus Ning has annoying adsense ads on the right (which I got rid of. ask me how). Well, I thought, WordPress is very extensible, I’m sure I can create my business network with WordPress by password protecting the WordPress blog installation and customizing the WordPress login screen.

I’m based in Oakland, California so I bought the domain name oaklandbusinessnetwork.com and created a one page information website for the network so prospective members have a place to go to learn a bit more about the network and me before they join. The website also points to the Ning network web address which I will use for recruiting. In the top right corner is a link to “Members login”. In the drectory /members I installed WordPress. I found and installed Angsuman’s Authenticated WordPress Plugin. It password protects your entire blog so that even on entry you’re taken to the typical blue WordPress login screen (see pic at left). Fabulous!

But, wait. I wanted more. Though I don’t care that people know the members area is basically a password protected WordPress blog, ’cause I’d tell anyone who listens how fabulous WordPress is, the login screen messed with the branding. Plus, I never had the opportunity or need to change the look of the login screen until now. So, I created a custom login screen by changing just two images in the WordPress installation, changing a colors in the admin CSS stylesheet and changing text in the login file and you can to.

What you’ll need to create a custom login screen for you WordPress blog:

• Image one, top and main image, is located here in your WordPress installation: /wp-admin/images/login-bkg-tile.gif
• Image two, bottom image, is located here: /wp-admin/images/login-bkg-bottom.gif
• The location of the login file is: /wp-login.php
• The location of the admin stylesheet: /wp-admin/wp-admin.css
• Photoshop or other image editor
• Dreamweaver or other FTP access and web editing software

What to do to create a custom login screen for your WordPress blog:

1. You don’t necessarily need the bottom image unless you want the round corners. Opening up the top image in Photoshop will show you the blue login image with the WordPress logo only. Its about 420px by 700px (see image on the left). Of course the form info (username, password and login button) is separate. Just take a screenshot of the login screen with the username, password and login button already on it (see image above) and design your own login screen around it so that your new design does not interfere with the form that will be placed on top of it once you upload the new image again on your server. If you do use the bottom image, I’d suggest that you create a new file with the exact dimensions of both the bottom and top images together. Place the bottom image inside this new file, at the bottom of course. And place the top image also in the new file. Then, place the login screenshot with the form on top, again so you can design around the username, password and login form elements. Now you can design around the form and within the given dimensions. You’ll just have to slice or crop the top and bottom images when your done. Save the top and bottom images with the same names as the original files and upload them back onto your server.

2. Now, you’ll probably also want to change the style of the text and text box that appears over the username when you log out or when an error is displayed. See image below. Go to the wp-admin.css file and look for:

#login #login_error {
background: #0e3350;
border: 1px solid #2571ab;
color: #ebcd4e;
font-size: 11px;
font-weight: bold;
padding: .6em;
width: 310px;
margin: 0 50px;
text-align: center;
}

Replace the colors (see bolded number and letter combinations above) with those that match your new login image colors. You can fin the colors by using the color picker in your Photoshop software or go to: HTML color codes chart to choose the right colors. After you’ve change colors (and maybe the border thickness from 1px to 2px or more, for example), save the file and upload it back on to your server in the directory it belongs.

3. Now, if you want to change the message that appears in the error text box on logout, go to the wp-login.php file and do a search for the line “Successfully logged you out”. It should be on or near line 343. Unless you know PHP, don’t use an apostrophe. No contractions like “you’re” or “don’t”. And don’t use quotes either. It messes with syntax. After you’ve change the text, save the file and upload it back on to your server in the directory it belongs.

Here are the finish products of my Oakland Business Network members login screen customizations:

Now you know how I created a more customized WordPress login screen and password protected the WordPress blog installation for my business network and you can do the same for your WordPress network or community blog.