Grow your CSS skills. Land your dream job.

Last updated on:

Customize Login Page

You know, the one typically at yoursite.com/wp-login.php. These are things you would put in the active theme's functions.php file.

Change the Logo

Is the WordPress logo by default, this changes the file path of that image. Change file path and file name to your own needs.

function custom_login_logo() {
	echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/images/logo-login.gif) 50% 50% no-repeat !important; }</style>';
}
add_action('login_head', 'custom_login_logo');

Change the URL

... of where clicking that logo goes. By default it goes to WordPress.org, this will change it to your own homepage.

function change_wp_login_url() {
	return bloginfo('url');
}
add_filter('login_headerurl', 'change_wp_login_url');

Change the Title

That is, change the title attribute of the image you just replaced. This changes it to the name of your blog in the settings.

function change_wp_login_title() {
	return get_option('blogname');
}
add_filter('login_headertitle', 'change_wp_login_title');

Comments

  1. Permalink to comment#

    Also helpful is replacing the dashboard logo:

    <style type=”text/css”>
      #header-logo { background-image: url(‘.get_bloginfo(‘template_directory’).’/img/dashboardlogo.gif) !important; }
    </style>
    

    Related question: if using a child theme, how to reference THAT directory? template_directory references the parent theme. thanks!

  2. Hm! Very helpful for me. Thanks, I was looking for this easy way to change the login page in my personal blog.

  3. Permalink to comment#

    Umm am a noob at this but do you place it any where like all the way at the bottom of the function.php or dose it have to be in the middle?

  4. Permalink to comment#

    Also can i have an example on where to place it. I think that will help alot. Thanks

  5. I believe it does not matter where you put it whether in the middle or at the end of functions.php. Just make sure at the most end of the code in functions.php file, it got no space at all.

    For example if the final line is …’change_wp_login_title’); Make sure you press delete button after the “;” until no space left.

    Mostly functions.php will not work and giving error functions when this feature is called during page loading. Just my two cents.

  6. If you want to change the CSS of the whole page use:

    function custom_login() { 
      echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login.css" /<'; 
    }
    
  7. amy marie adams

    wordpress has a popular plug-in that works great & simple to use that will do all of the above and more for you

    it is wp total hacks

    http://wordpress.org/extend/plugins/wp-total-hacks/

  8. I prefer doing the “hacks” myself. I like to be in control.

  9. Hassan

    On change_wp_login_url and change_wp_login_title functions, you should return the data instead of echoing it out. Because echo will output it directly to the browser, while returning the data ensures that other plugins can still hook to your output and modify the result.
    When using Filter Hooks you should return the result.

  10. Great tips, really useful. I am using it for my blog. Thanks :)

  11. Permalink to comment#

    Can anyone tell me how to do the same with the ‘login out’ confirmation page?

    Thanks (:

  12. This post was very helpful, however I needed to change my login logo using a custom child theme. I used the get_stylesheet_directory_uri which returns the web address of the directory your child theme (e.g. style.css):

    
    function my_login_head() {
    	echo "
    	<style>
    	body.login #login h1 a {
    		background: url('".get_stylesheet_directory_uri()."/images/your-logo.png') no-repeat scroll center top transparent;
    		height: 70px;
    		width: 285px;
    	}
    	</style>
    	";
    }
    add_action('login_head', 'my_login_head');
    
  13. Permalink to comment#

    great I’ll try this

  14. Anthony
    Permalink to comment#

    As of 3.4 you need to return instead of echo.

    function change_wp_login_url() {
      return get_home_url();
    }
    
  15. Another functional way to customize your WP login page is to use custom CSS file. This can be achieved with following code.

    function custom_login() {
      echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />'; 
    }
    
    add_action('login_head', 'custom_login');
    

    WPCookies

  16. Permalink to comment#

    Hey, there is a small error in the link replacement, you are supposed to use return get_bloginfo( 'url' ); not echo bloginfo('url');

  17. alicia
    Permalink to comment#

    where exactly in the functions.php file are you inserting this code? I keep getting errors.

  18. Permalink to comment#

    Couldn’t get changing the link to work until I followed Alex’s advice:
    return get_bloginfo( 'home_url' );

  19. Did this work is still in accordance with the latest wordpress update (3.9)?
    Because I see you publishing date is 2013
    Please reply
    thank you

  20. Permalink to comment#

    I can go one better than this and create a custom login form directly on the home page without ever having to go near wp-admin:

    $args = array(
        'redirect' => home_url(), // The link to redirect to after logging in, can also be admin_url().
        'form_id' => 'custom-login-form-id', // id of form
        'label_username' => __( 'Username' ), // Custom username text
        'label_password' => __( 'Password' ), // Custom password text
        'label_remember' => __( 'Remember Me' ), // Custom remember me text
        'label_log_in' => __( 'Log In' ), // Text for the login button
        'remember' => false 
    );
    
    wp_login_form( $args ); // Displays the login.
    

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".