Theming WordPress Login Page

theme-wp-login-header

This is a pretty basic one, often covered on the internet. However today I wanted to record a video more about working out how to solve problems such as these when a Google search doesn’t help. The video discusses the process of locating hooks to make changes to the WordPress core functionality, and making them persistent even after updates.


For all those looking for the code or just want to know a quick way to theme the WP-Login page the code is below.

You’ll need to add the following source to your themes functions.php file.

// filter for altering the login pages WordPress image link url
add_filter('login_headerurl', 'html5_login_headerurl', 10, 1);

function html5_login_headerurl($url) {
    return __('http://morganleek.me');
}

// filter to enqueue addition css stylesheet
// to overwrite WordPress default image
add_action('login_enqueue_scripts', 'html5_login_enqueue_scripts');

function html5_login_enqueue_scripts() {
	// you'll need to change the location below if your style
	// sheet is located elsewhere
    wp_register_style(
    	'html5_admin_css', 
    	get_template_directory_uri() . '/css/admin-style.css', 
    	false, 
    	'1.0.0');
    wp_enqueue_style( 'html5_admin_css' );
}

Finally you’ll need to create and new logo and place it in your themes image folder. In this case my image folder is call ‘img’ and my logo is called ‘new-brand.png’. You’ll also need to create an admin style sheet to place the css in. This style sheet is the one references in the functions file above.

.login h1 a {
	background-image: url('../img/new-brand.png');
}