Customize your WordPress Login page – customize wp-login.php

[AITpro Admin]

Source:  https://codex.wordpress.org/Customizing_the_Login_Form

The simplest and fastest way to customize your WordPress Login page is to add code to your theme’s functions.php file and add WordPress action hooks and filter hooks that are specifically created for customizing your WordPress login page.

Important Note: You can either use your own custom stylesheet or use inline CSS code in your function. For this example I am using inline CSS code directly and not using a stylesheet. If you choose to do this you will need to add opening and closing php tags around your inline CSS code shown highlighted in yellow.

// function to add a custom logo to replace the WordPress logo on the login page.
function aitpro_login_logo() { <span style="background-color: yellow;">?></span>

<style type="text/css">
body.login div#login h1 a {<br />position: relative; top:0px; left:-35px;<br />background-size: 390px 82px;<br />background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/aitpro-logo.png);<br />padding: 0px 35px 30px 35px;<br />}<br /></style>

<span style="background-color: yellow;"><!--?php }</span><br ?--> add_action( 'login_enqueue_scripts', 'aitpro_login_logo' );</span>

// function to replace the WordPress URL with your site URL
function aitpro_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'aitpro_login_logo_url' );

// function to replace the WordPress site title with your site title
function aitpro_login_logo_url_title() {
return 'AIT-pro.com BulletProof Security Pro';
}
add_filter( 'login_headertitle', 'aitpro_login_logo_url_title' );

// function to add a custom footer message and a custom link with a background color to make it pop
function aitpro_login_footer() {
echo '
<div style="text-align: center; font-size: 16px; font-weight: bold; margin: 15px 0px 0px 0px; padding: 10px 0px 10px 0px; line-height: 30px; background-color: #cccccc; border: solid black 2px;">';
echo "My Custom Footer message with a background color to make it pop".'
';
echo "A new line of text".'
';
echo "A Custom Link: ".'<a title="Click to go to the BulletProof Security Forum" href="https://forum.ait-pro.com/forums/" target="_blank">Link to the BulletProof Security Forum</a>';
echo '</div>
';
}
add_action( 'login_footer', 'aitpro_login_footer' );

Screenshot of customized Login page

Redirect Users/Subscribers to a custom page on successful login instead of the WordPress Dashboard and Redirect Admins to the WP Dashboard

Source:  https://codex.wordpress.org/Plugin_API/Filter_Reference/login_redirect

// Redirect Users/Subscribers to My Custom page - Admins to Dashboard
function my_custom_page_redirect( $redirect_to, $request, $user ){
//is there a user to check?
if( isset( $user->roles ) && is_array( $user->roles ) ) {
//check for admins
if( in_array( "administrator", $user->roles ) ) {
// redirect them to the default place
return $redirect_to;
} else {
return 'https://www.ait-pro.com/my-custom-page/';
}
}
else {
return $redirect_to;
}
}
add_filter("login_redirect", "my_custom_page_redirect", 10, 3);

[J Garner]

Nice,

I paid for a plugin that pretty much does that from a marketplace that shall not be named! That was before you opened my eyes…

Thanks for sharing and it’s really easy to customize… 🙂

[AITpro Admin]

Yep WordPress added lots of nice hooks to hook into.  I plan on playing around with some more.  Having the bottom footer section does not really work that well.  ie folks would notice a top banner right away and do not notice the bottom footer section most of the time.  I imagine just simply messing around with “position” will do the trick.

position: relative; top:0px; left:-35px;

[Daniyal Ali]

If you are still struggling with the code in the wp-login.php file so here is a simple and easy way to customize your WordPress login page is by using the best WordPress login plugin by LoginPress. It helps you to customize your login screen without coding knowledge. You can use predesigned login templates as well.

[Author]

Posts