What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » WordPress » Customize Login Page

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() {
	echo 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() {
	echo get_option('blogname');
}
add_filter('login_headertitle', 'change_wp_login_title');

Subscribe to The Thread

  1. Jim

    Also helpful is replacing the dashboard logo:

    function custom_dashboard_logo() {
   echo '

         #header-logo { background-image: url('.get_bloginfo('template_directory').'/img/dashboardlogo.gif) !important; }

   ';
}
add_action('admin_head', 'custom_dashboard_logo');

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

    thanks!

    Reply ↓
    • Jim

      ooops, didn’t follow directions:

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

    • Hassan

      get_stylesheet_directory_uri();

  2. Kaushik Biswas

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

    Reply ↓
  3. Tino1408

    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?

    Reply ↓
  4. Tino1408

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

    Reply ↓
  5. wptidbits

    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.

    Reply ↓
  6. Michael Gunner

    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" /<';
}
    Reply ↓
  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/

    Reply ↓
    • piku2008

      This plugin will help me a lot with all my future projects ….

      Thanks

  8. Michael Gunner

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

    Reply ↓
  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.

    Reply ↓
  10. Rajesh Namase

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~