Στο wordpress 2.7 βλέπουμε πως το login screen έχει αλλάξει. Τι γίνεται όμως όταν θέλουμε να έχουμε το δικό μας login screen, customized έτσι ώστε να βελτιώνει την εικόνα της σελίδας μας αλλά και να ταιριάζει με το υπόλοιπο design;

Αυτό που έχουμε να κάνουμε είναι να δημιουργήσουμε ένα πολύ μικρό κομμάτι κώδικα. Πρώτα από όλα, πρέπει να κάνουμε χρήση php κώδικα στο fuctions.php αρχείο μας. Εάν δεν έχετε αυτό το αρχείο, δημιουργήστε το μέσα στο template folder σας.

// custom login for theme
// folder themes/theme_name/
function fb_custom_login() {
echo ‘<link rel=”stylesheet” type=”text/css” href=”‘ . get_bloginfo(‘template_directory’) . ‘/custom-login.css” />’; }
add_action(‘login_head’, ‘fb_custom_login’);

Ο παραπάνω κώδικας θα μας βοηθήσει να καλέσουμε το CSS αρχείο που θέλουμε για να παραμετροποιήσει το design από το login screen.

Μετά, δημιουργούμε ένα αρχείο με το όνομα custom-login.css μέσα στον φάκελο των Template μας.

Το css αρχείο μας θα έχει τον παρακάτω κώδικα:

html {
background-color: #fff;
}
#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}
#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}
#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}

Οι αλλαγές σας μπορούνε να γίνουνε εδώ μέσα. Τα ονόματα των CSS κλάσεων είναι από ότι βλέπετε πολύ αναλυτικά οπότε και οι αλλαγές δεν θα ήταν τόσο δύσκολες.

Μπορείτε να δείτε μερικές φωτογραφίες από Inspired templates εδώ:

http://www.flickr.com/groups/bm-custom-login/

Article Code από WP Engineer: http://wpengineer.com/create-your-own-wordpress-login-design/