You may not think that this is a theme development topic, but for me it’s one of the easiest ways to quickly – and memorably – brand your custom themes.
So in this installation of our theme development series I will focus on the login screen. With just a few tweeks to your theme files, you can get a fully customized experience that translates from theme to theme.
I will do this by creating a login stylesheet that is called from our theme or child theme. You’re going to have to get your hands dirty with a little bit of PHP and CSS, but it’s well worth it. You only have to create this once and implementing this on the rest of your themes is a breeze.
Recommended Reading
Before starting this tutorial you should ideally be comfortable with writing functions, and using WordPress’ filters and hooks, in order to gain the desired results.
These skills and more are covered in the Couch to WP Pro Beginner Series, but more specifically you can find the techniques in the following:
Step 1: Create a Function and Action
First off we have to tell WordPress we have a new function to implement. Actions tie into various hooks within the WordPress framework. The specific hook we want to use is the login_head. This will allow us to implement any code we want into the header of the wp-login page.
Knowing this little bit of information will get the more advanced users excited because you can see the potential here for dramatically altering the login process. But let’s stay focused. For now we just want to brand it.
In your theme, open up the functions.php file – if it’s a child theme you may have to create one. Drop the below code and update the file:
function wppro_custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/assets/css/login.css" />';
}
add_action('login_head', 'wppro_custom_login_css');
Let’s step back and look at what we did.
First, we created a function called custom_login_css. Next, we have our actual functionality, which in this case is echoing the stylesheet call.
Last, we hook our function into the login_head hook with our action.
Step 2: Create the Stylesheet
In step one we used the function to inject the link to the stylesheet into the head of our login page. Now we can start styling the page all we want.
Quick tip: here’s where Chrome’s “Inspect Element” can come in so handy. Just right-click on any element of the login screen and select “Inspect Element” to see what class it has so you can tweak it in your own stylesheet.
Remember that we referenced login.css in our function, so create login.css in assets/css of the theme’s directory.
Step 3: Adding a Background Image to the WordPress Login
We’re going to change the background of the login page to the same color as the header on any given page:
body.login {
background: #444444;
}
You’re more than welcome to use images if you’d like, but we’re going to be keeping it as image free as possible.
Step 4: Use Your Logo for the Login Screen
Typically my clients want their logo instead of mine on the login screen – okay, they ALWAYS want theirs instead. But I go ahead and put mine in until they say something.
.login h1 a {
background-image: url('../img/logo.png');
}
I recommend a PNG or GIF file with a transparent background, but you can style it however you like, of course. I use the dimensions of 274×63 for my background images.
Here’s what I’ve got so far:
Image may be NSFW.
Clik here to view.
Step 5: Changing the Login Logo Link
You may not want the logo in your login form to link to WordPress.org anymore, so here’s the fast and simple way to change the link. You’re going to run into problems if you try to do this in CSS, but WordPress gives us a hook just for this issue.
In your theme’s functions.php file, add the following code:
function wppro_login_logo_url( $url ) {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'wppro_login_logo_url' );
This simple trick uses the site’s home page as the URL for the logo link, but you can put anything you want into this.
Step 6: Styling the Login Form Colors
Now I want to change the white background of the form. Using the RGBA format, we can get some pretty cool effects:
.login form {
background: rgba(255, 255, 255, .5);
}
Step 7: Changing the Login Form Buttons
The buttons are a major pain to work with, but I’ll make it VERY easy on you:
.wp-core-ui .button-primary{
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc!important;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border-radius: 0;
background-image: none;
}
.wp-core-ui .button-primary:hover{
background-color: #0044cc!important;
background-image: none;
}
You can make the colors to be whatever you prefer, but here we’ve stuck with the FlatStrap colors.
Step 8: Changing the Login Form “Lost Your Password” Links
Last but not least is our little buttons at the bottom of the form. I want to show you a quick tip for completely hiding the “back to blog” element, which is what I often do. With the logo linking back to the site, I just don’t like having this below the form any more. Plus, it’s one more small thing to make this look less “WordPressy”:
.login #backtoblog {
display: none;
}
To change the “Lost your password” link:
.login form label, .login p#backtoblog a, .login p#nav a {
color: #ffffff!important;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}
Note the !important rule you have to use if you want to change the color of the lost your password link. It won’t work without it.
When it’s all said and done, here’s my final product:
Image may be NSFW.
Clik here to view.
Now you can take this to whatever extreme you’d prefer. It’s all a matter of taste. Now you can make the form a completely different size, position elements differently, and use different fonts.
Here’s the complete login.css file:
body.login {
background: #444444;
}
.login h1 a {
background-image: url('logo.png');
}
.login form {
background: rgba(255, 255, 255, .5);
border-radius: 0;
}
.login form label, .login p#backtoblog a, .login p#nav a {
color: #ffffff!important;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}
.wp-core-ui .button-primary{
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc!important;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border-radius: 0;
background-image: none;
}
.wp-core-ui .button-primary:hover{
background-color: #0044cc!important;
background-image: none;
}
The post Part 1: Customizing the User Login Experience in WordPress appeared first on YinPress.