Back to: Home
Previous Post: HOW TO CREATE YOUR OWN TWITTER WIDGET
Next Post: CREATE YOUR OWN POPULAR POSTS PAGE

CUSTOM WORDPRESS LOGIN SCREEN

By admin | March 28, 2009
Topics: Blogging | No Comments »

login1

The WordPress admin login tender is rattling cushy to customize. With the cipher below, you crapper add your possess CSS to the login page and attain it countenance still you like. Check discover the newborn Pro Blog Design login to wager it in action.

Best of all, your customizations are every finished in your thought files, so the changes module meet when you raise WordPress.

This is the prototypal in a program of WordPress Hacks posts. The cipher is every finished by Milo, and then cursive up into a journal locate by me. There module be a newborn grapple liberated every Thursday!

1 - Edit Functions.php

Your thought haw or haw not hit a functions.php enter in it already. If it does, adhesive the cipher beneath into the lowermost of it. If not, meet create a grapheme enter in Notepad and save it with that name.

And advert not to yield whatever space before or after the <?php and ?> tags as you do this!

<?php
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}
add_action('login_head', 'custom_login');
?>

2 - Edit Your Theme Files

login-folder We module requirement a locate to accumulation your newborn CSS styles and whatever images you strength use. Seeing that they aren't conception of the important site, let's create a newborn folder for them.

Create a folder in your theme's folder and call it "custom-login".

And exclusive that folder create a newborn stylesheet titled "custom-login.css".

3 - Add New CSS Rules

The custom-login.css enter module be unexploded apiece instance your login tender is loaded. That effectuation that whatever rules you add here module be practical to the login page.

If you add newborn images, you crapper accumulation them in your custom-login folder.

However, if you poverty to re-use images from your theme, meet ingest CSS rules same the mass to ingest the ikon from your theme's images folder (That way, your application won't requirement to download the images again as it module already hit them cached).

1	html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

A Simple Template Example

The mass is the stylesheet I've utilised to create my newborn login form. It is very, rattling simple, but it does the gimmick nicely. I've commented it, so wager liberated to alter it and ingest it on your possess site.

/* Custom Login Styles */
 
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}	/* Page background. Can't ingest the embody attach for this! */
h1 a {	/* Title ikon (The "WordPress Logo"). Remember to update the peak and breadth your image's dimensions */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}
 
body.login {border-top-color:#dff4fc;}	/* Top forbid scenery colouration */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}	/* Link personalty in crowning forbid */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;}	/* Rollover unification personalty in crowning forbid */

More Advanced Customizations

Of course, you crapper do a aggregation more than that. If you analyse discover the screenshot beneath of a locate Milo created for Intellivative, you crapper wager that she's modified the organisation of the login form itself, meet using a whatever more CSS rules.

You haw encounter it multipurpose to analyse discover the default WordPress login stylesheet as well. You module encounter it in /wp-admin/css/login.css and whatever of the colours module be ordered finished /wp-admin/css/colors-fresh.css (Unless you denaturized the colouration plot in your admin panel, in which housing it is colors-classic.css).

If you update your login form, permit us undergo in the comments and I'll amass the course here!

Update: Andi Saleh has created a great login page with this technique.

Update 2: Andrea from WPMU Tutorials has overturned this into a plugin for every your WPMU users discover there!

milo WordPress Hacks Series: The cipher in these posts was cursive all by Milo, a web specializer from Oxford, Britain. Check discover her website for liberated WordPress themes and her blog, or study her on Twitter!