WordPress Login Page

For modifying below all changes you have to write these function and hooks in your active theme’s function.php file.

Create one directory called login into your active theme.

1. Change the logo: Save Your Logo image as logo.png to login directory you created.

function modify_logo() { $logo_style = '<style type="text/css">'; $logo_style .= 'h1 a {background-image: url(' . get_template_directory_uri() . '/login/logo.png) !important;}'; $logo_style .= '</style>'; echo $logo_style; } add_action('login_head', 'modify_logo');

Here we use login_head wordpress action for append this css to the login page’s <head> section. We are changing the background image of H1 tag to our custom logo image and you need to include “!important” to your CSS so default logo image is overwritten by it.

2. Change the logo image URL: Default logo image URL is wordpress.org. If You want to redirect link to your homepage or other useful stuff links you can follow simple steps:

function custom_login_url() { return 'http://www.addwebsolution.com'; } add_filter('login_headerurl', 'custom_login_url');

Here we use login_headerurl wordpress filter to change the url.

3. Add custom css for login page: Create a custom css file with any name and save it login folder created by you in active theme folder. (Here I create css with name “custom_login.css”).

***** custom_login.css ***** /* Change background image and font family */ body { background-image: url(background.png); font-family: Arial,Verdana,sans-serif; } /* Change Width and Height of Logo Image + Add Custom Image File */ .login h1 a { background-image: url(logo.png); width: 213px; height: 97px; background-size: 213px 97px; } /* Add a few changes to the color and style of form itself */ .login label { color: #454545; display: block; margin-bottom: 1em; font-weight: bold; } .login form .input { font-weight: normal; } .login #backtoblog a, .login #nav a { color: #4da28f; } .wp-core-ui .button-primary { background: #4da28f; }

Add below code your current theme function.php file. To add custom css file into <head> section:

function custom_login_css() { wp_enqueue_style('login-styles', get_template_directory_uri() . '/login/custom_login.css'); } add_action('login_enqueue_scripts', 'custom_login_css');

4. Add custom link under login form

function custom_link() { ?><p style="text-align: center; margin-top: 1em;"> <a style="color: #4da28f; text-decoration: none;" href="http://www.addwebsolution.com/blog">If you have any query, visit our blog</a> </p><?php } add_action('login_footer','custom_link');

Here we use login_footer action hook for adding custom link at login footer.



See that’s easy now to incorporate it, feel free to grab such quick steps to solve issues from my blogs. We are dominate WordPress Development Company Always happy to help 🙂 

Frequently Asked Questions

Floating Icon 1Floating Icon 2