BRAHMA TECHNOLAB

Change Your WordPress Login Page Without Plugin

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 = '';
    echo $logo_style;
}
add_action('login_head', 'modify_logo');

Here I use login_head wordpress action for append this css to the login page’ssection. I am 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 'https://about.me/snehalbrahmbhatt';
}
add_filter('login_headerurl', 'custom_login_url');

Here I used 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 intosection:

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() {
    ?><a href="#">Custom Login Link</a><?php
}
add_action('login_footer','custom_link');

LET’S DISCUSS YOUR PROJECT

Leave a Reply

Your email address will not be published. Required fields are marked *