Changing the WordPress Login Page

by Nikolaenko Maxim · Published October 2, 2012 · Updated August 27, 2020

Content hide

1 At the first stage, we change the logo of the login page.

3 Changing the link on the login page logo

Most often, developers leave the login page like this, What was it like after installation?. But you must admit that any client will be impressed by the unusual design of the entrance to the WordPress control panel., especially if the corporate colors of the organization are used in the design.

This task came before me when the client asked me to make a closed corporate website on which they would sit, as he said, no less 200 human.

After digging in runet and baynet, I found a good tutorial on changing the WordPress login page and immediately decided to try it.

At the first stage, we change the logo of the login page.

Paste the code into your file function.php.

function fb_custom_login_logo() {
	$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('url') . '/favicon.ico) no-repeat 30px center !important; } </style>';
	echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );

function fb_custom_login_logo() {

$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('url') . '/favicon.ico) no-repeat 30px center !important; } </style>';

echo $style;

}

add_action( 'login_head', 'fb_custom_login_logo' );

Now we have adjusted the logo, but the name, which we see on hover, still not what we need.

Code to change text in title

For the script to work, paste the code into your file function.php

function fb_login_headertitle() {
	return esc_attr( get_bloginfo( 'name', 'display' ) );
}
add_filter( 'login_headertitle', 'fb_login_headertitle' );

function fb_login_headertitle() {

return esc_attr( get_bloginfo( 'name', 'display' ) );

}

add_filter( 'login_headertitle', 'fb_login_headertitle' );

Changing the link on the login page logo

Link to the main page of the site, To do this, paste the code into your file function.php.

function fb_login_headerurl() {
	return esc_url( home_url( '/' ) );
}
add_filter( 'login_headerurl', 'fb_login_headerurl' );

function fb_login_headerurl() {

return esc_url( home_url( '/' ) );

}

add_filter( 'login_headerurl', 'fb_login_headerurl' );

These were the three mandatory steps that are important when creating a beautiful and professional website..

You can also include styles for the design of the login page..

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

// custom login for theme

// folder themes/theme_name/custom-login/

function fb_custom_login() {

echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';

}

add_action('login_head', 'fb_custom_login');

In this way, you can change the theme of the login design simply from the connected css styles.

Online tutoring services. List of courses I teach

Basic web design course;
Site layout;
General course on CMS WordPress and continuation of the course on template development;
Website development in PHP.