In my spare time, I run a Website Coding and Design company. We design and build brands online for folks and I love it.
I run our own server and am trying out the WordPress Multisite route and starting to really enjoy it. One install of WordPress and many virtual websites hosted on it. Pretty easy concept.
With that all said, I needed a way for the login pages to look less like WordPress and more like my company’s. This is actually easier than you would think.
A little CSS magic and editing of your functions.php file, and you are good to go.
So as most of you know, the admins of a WordPress blog, the image below is what we see when we log into our sites to publish and post our excellent content.
Well that is boring and it is obviously labeled for WordPress. You can change it to make it your own, and why wouldn’t you? As a company, or just a hacker with a bit of extra time, you can make it your own!
Below is my company’s login page that is the same for all of our clients. It’s plain and simple and easy on the eyes.
First we need to create a CSS file for the login page. By default I have called it login.css. Below is the code for styling what you see above.
form { background:#f0f0f0; border:1px solid #ccc; } #user_pass,#user_login,#user_email { border:1px solid #ccc; } h1 a { background:url(http://CREATYOUROWN/koderadmin.png) no-repeat; width:350px !important; } #wpwrap #header-logo { width:100px !important; } #backtoblog { background:url(CREATEYOURWON/images/admin-head-bg.png) repeat-x; text-shadow:0 1px 0 #f0f0f0; border-bottom:1px solid #888; } #backtoblog a { color:#444; }
Now on to the coding portion of my little hack for you all. Open up your functions.php file, this is usually located in the root directory of your WordPress theme folder: wp-content/themes/yourthemename/functions.php. At the bottom of the file add the following code:
/* Custom wordpress login style function */add_action( ‘login_head’, ‘my_custom_login_style’, 99 ); function my_custom_login_style() { print ‘<link rel=”stylesheet” type=”text/css” href=”‘; print get_stylesheet_directory_uri(); print ‘/css/login.css” media=”screen” />’ . “\n”; }
It’s that easy to do!
You can also customize the images and footer images once you or your clients are logged in and using the dashboard. I’ll save that for another day!
Hope this helps someone out there!
Andrew Riches says
That’s pretty sweet.
Very few actually see my login page but I’m gonna do it anyway!
Matthew Snider says
Glad I could help out brother. Have fun with it!
Ben says
I did this recently with one of my client’s membership sites but had to use a plugin for it. I always rather use code over a plugin. Thanks for this.
Matthew Snider says
It is always better to code than use a plugin! This is how – glad you can use it Ben!
Ryan says
I love to do this for sites that people other than myself are going to be using – here’s a link to a recent one I did:
http://awesomescreenshot.com/0eee2kdb3
Matthew Snider says
Love that brother! Looks great – digging the design around the logo.
Dustin W. Stout says
What size should the image be?
Eric Dye says
Looks like 350px wide?