Customize the WordPress Login Page: Logo, Background and Messages

This article is a localized edition of the Japanese original. Read the Japanese original

By default, the WordPress login page (wp-login.php) shows the WordPress logo. On a company site or a site you built for a client, you may want your own logo and colors instead. The login page has dedicated hooks, so you can change it without editing core files.

The hook names and behavior in this article were checked against the WordPress source (wp-login.php) as of November 2026.

Where to put the code

Use one of these locations:

• Your child theme's functions.php: switching themes removes the customization too. A good fit when the design should follow the theme.
• A PHP file in wp-content/mu-plugins/: survives theme changes. Start the file with <?php and save it; it loads automatically.

If you write directly in the parent theme's functions.php, a theme update will wipe it out.

Change the logo and its link

The logo is the background image of #login h1 a (84px wide and high by default). Print CSS from the login_enqueue_scripts action to override the background image and size.

Change the logo's link destination with the login_headerurl filter and its link text (what screen readers announce) with the login_headertext filter. By default the link goes to wordpress.org and the text is "Powered by WordPress".

<?php
// Replace the login logo with an image from the child theme.
add_action( 'login_enqueue_scripts', function () {
	$logo_url = get_stylesheet_directory_uri() . '/images/login-logo.png';
	?>
	<style>
		#login h1 a {
			background-image: url('<?php echo esc_url( $logo_url ); ?>');
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			width: 240px;
			height: 80px;
		}
	</style>
	<?php
} );

// Point the logo link to the site's front page.
add_filter( 'login_headerurl', function () {
	return home_url( '/' );
} );

// Use the site name as the logo link text.
add_filter( 'login_headertext', function () {
	return get_bloginfo( 'name' );
} );

Put the image at images/login-logo.png in your child theme. Adjust width and height to match the image's aspect ratio.

The older login_headertitle filter (the logo's title attribute) was deprecated in WordPress 5.2. For accessibility, change the link text with login_headertext rather than a title attribute.

Change the background and form design

When the CSS grows, a separate file is easier to maintain. Create css/login.css in your child theme and load it with wp_enqueue_style() on login_enqueue_scripts. Declaring WordPress's built-in login style as a dependency makes your file load after the default CSS, so overrides are simpler.

<?php
add_action( 'login_enqueue_scripts', function () {
	$path = get_stylesheet_directory() . '/css/login.css';
	wp_enqueue_style(
		'my-login',
		get_stylesheet_directory_uri() . '/css/login.css',
		array( 'login' ),
		file_exists( $path ) ? (string) filemtime( $path ) : null
	);
} );

An example css/login.css:

body.login {
	background-color: #1a1a2e;
}

#login {
	width: 360px;
}

.login form {
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
	padding: 32px;
}

.login label {
	color: #1d2327;
	font-weight: 600;
}

.login #nav a,
.login #backtoblog a {
	color: #ffffff;
}

#wp-submit {
	background: #0073aa;
	border-color: #0073aa;
	border-radius: 4px;
}

#wp-submit:hover {
	background: #005a87;
	border-color: #005a87;
}

With a dark background, the lost-password link (#nav) and the back-to-site link (#backtoblog) below the form become hard to read, so their color is changed as well.

Show a notice above the form

The login_message filter shows text above the login form. Wrap it in a p with the message class to match the look of WordPress's own notices.

<?php
add_filter( 'login_message', function ( $message ) {
	// Show it only on the normal login screen, not on password reset and similar screens.
	$action = isset( $_REQUEST['action'] ) ? sanitize_key( $_REQUEST['action'] ) : 'login';
	if ( 'login' !== $action ) {
		return $message;
	}

	$notice = '<p class="message">If you cannot log in, please contact the site administrator.</p>';
	return $notice . $message;
} );

login_message is also used on other wp-login.php screens, such as password reset. The example checks action so the notice appears only on the normal login screen.

Add text to the footer

login_footer is an action, not a filter. It runs after the login form box and the language switcher, just before </body>.

<?php
add_action( 'login_footer', function () {
	echo '<p style="text-align:center;color:#ffffff;">&copy; '
		. esc_html( wp_date( 'Y' ) . ' ' . get_bloginfo( 'name' ) )
		. '</p>';
} );

The year comes from wp_date(), which follows the site's timezone setting.

Hide the language switcher

If the site has more than one language installed, a language switcher appears at the bottom of the login page (WordPress 5.9 and later). If you don't need it, remove it with the login_display_language_dropdown filter.

<?php
add_filter( 'login_display_language_dropdown', '__return_false' );

Load JavaScript

To use JavaScript on the login page, load it on login_enqueue_scripts as well.

<?php
add_action( 'login_enqueue_scripts', function () {
	$path = get_stylesheet_directory() . '/js/login.js';
	if ( ! file_exists( $path ) ) {
		return;
	}
	wp_enqueue_script(
		'my-login',
		get_stylesheet_directory_uri() . '/js/login.js',
		array(),
		(string) filemtime( $path ),
		true
	);
} );

Hooks used in this article

Using a plugin instead

If you'd rather not write code, there are plugins for the login page. The main ones on wordpress.org are (as of November 2026):

• LoginPress (slug loginpress)
• Custom Login Page Customizer (slug login-customizer)
• Custom Login (slug custom-login)

Each lets you set the logo, background and colors in the admin screen. Using a plugin together with the code in this article can cause CSS conflicts and unexpected results, so choose one approach.

Things to watch for

• Changing how the login page looks does not make it more secure. To stop unauthorized logins, limit login attempts and use two-factor authentication (How to limit login attempts in WordPress, How to set up two-factor authentication in WordPress).
• WordPress updates can change the login page's HTML structure or class names. Check the page after updating.
• Very large logo or background images slow down the login page.

Summary

• Change the look by loading CSS on login_enqueue_scripts.
• Change the logo link and its text with login_headerurl and login_headertext.
• Add a notice with login_message (above the form) and footer output with login_footer (an action).
• Put the code in your child theme's functions.php or in mu-plugins, never in the parent theme.

Questions about WordPress? The publisher of this site is based in Japan and replies in Japanese. Contact (Japanese)