Custom WordPress Login Page Without a Plugin

Published

It’s really easy to add custom styles to your WordPress login page without needing to install a plugin.

Simply add the following to your functions.php file:
[php]
<?php // Calling your own login css so you can style it function joints_login_css() { wp_enqueue_style( ‘joints_login_css’, get_template_directory_uri() . ‘/login.css’, false ); } // Changing the logo link from wordpress.org to your site function joints_login_url() { return home_url(); } // Changing the alt text on the logo to show your site name function joints_login_title() { return get_option(‘blogname’); } // Calling it only on the login page add_action( ‘login_enqueue_scripts’, ‘joints_login_css’, 10 ); add_filter(‘login_headerurl’, ‘joints_login_url’); add_filter(‘login_headertitle’, ‘joints_login_title’); ?>
[/php]
You’ll also need to create a new stylesheet for your login styles. Here is some basic styling you can use to change the logo of the login page:
[css]
.login h1 a {
background: url(../images/login-logo.png) no-repeat top center;
/* Make sure to update these with the dimensions of your logo */
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}
[/css]
This code comes included with JointsWP and is very similar to the code found in Bones.