CreatiFace.com

Customize WordPress Login Page without a Plugin

If you create a WordPress-based website for a client, then often times you might want to change the WordPress default login page to match the overall design of your website. Actually, there are several plugins that can provide the functionality, such as Theme My Login. But, in this post we are going to try customizing the login page without any plugin.

Insert custom CSS

First, we would like to insert a custom CSS in the WordPress login page using the following function. Include this function in your functions.php.

function custom_login_css() {
	echo 'css" href="' . get_bloginfo('stylesheet_directory') . '/login.css" />';
}
add_action('login_head', 'custom_login_css');

Now you can add any styles to your new stylesheet — in this case, login.css — to overwrite the existing styles on the login page.

.login {
	background-image: url('images/background.png') !important;
  	background-repeat: repeat;
}
h1 a {
	background-image:url('images/logo.png') !important;
	display: inline-block;
	height: 95px !important;
}

Additionally you can also change the logo URL which by default is pointing to wordpress.org using the following function. This function will change the default URL to your site.

function custom_login_url() {
	echo home_url('');
}
add_filter('login_headerurl', 'custom_login_url');

And, you can also change the default title attribute within the link with your own site name:

function custom_login_title() {
	echo get_option('blogname');
}
add_filter('login_headertitle', 'custom_login_title');

That’s all the code we need, I hope you enjoy this tip and find it quite useful.

Source:

For more information about the functions you can read the following resources:

8 Responses to “Customize WordPress Login Page without a Plugin”

  1. carloanz

    That was a helpful tip. Would help in reducing time while dealing with wordpress

    Reply
  2. macjhon

    Yes Your tips save  time on wordpress.

    Reply
  3. Aaron

    Will this get over written with a wordpress update?

    Reply
    • Thoriq Firdaus

      No, it will not, as we don’t change anything in the WordPress Core. it’s just done through the theme, so it will change when you change the theme as well.

      Reply
  4. Eric

    Great article and blog you have here Thoriq Firdaus.

    Do you do any freelance/web design work? If so. I would like to talk to you about it.

    Let me know.

    Best,

    Eric

    Reply
    • Thoriq Firdaus

      Hi, Eric.
      Thank you for your appreciation.
      If you want to contact me further you can use the form available at the contact page.
      cheers

      Reply

Leave a Reply

We welcome for every constructive commment and respond. However, all comments will be moderated prior to publishing and rel=nofollow is in use. So, please do not use spammy ketword name

(required)

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">