Right now, my login page shows the Wordpress logo. How do I change it to my logo?

  • Thanks for the help, but there's a simpler way. I just need to find the logo file that wordpress uses and replace it with my logo's image file. A reader of my site showed me how, but now I forgot. Does anyone know where that logo file is? Dec 24, 2010 at 20:39

5 Answers 5


Here is a pretty simple approach to changing the logo. Mark Jaquith of WordPress released a plugin that allows you to upload an image which will be shown on the login page instead of the WP logo.

Customize the WordPress Login Screen Logo

  • And it's incredibly simple and fast to use. Feb 2, 2011 at 21:15

I'd personally do it like this..

Hook on login head and inject some extra CSS

Hook in late, and your styling will go in after the login css inclusion, so you're less likely to need !important to force styles.

add_action( 'login_head', 'custom_login_css', 99999 );

function custom_login_css() {
    <style type="text/css">
    h1 a {
        background: url(path/to/your/image/example.jpg) no-repeat top center;

One function, one hook, job done..

Hope that helps...

If you want to go a step further and totally seize control of the login CSS keep reading, else just ignore what follows, i'm going to post it anyway, for the sake of others wanting to totally hijack login CSS..

Intercepting the enqueue

Hook onto style_loader_src declaring 2 parameters for the callback function.

  • First parameter is given the stylesheet's url or src.
  • The second is a given enqueue's handle, eg. colors, login, global..and so on..

The second variable helps the filter determine what enqueue is being called, and updates the src when it matches the login handle.

add_filter( 'style_loader_src', 'hijack_login_src', 10, 2 );

function hijack_login_src( $src, $handle ) {
    if( 'login' == $handle )
        $src = get_bloginfo( 'stylesheet_directory' ) . '/customlogin.css';
    return $src;

I used stylesheet_directory in the get_bloginfo() call to ensure we're pointing at the right directory for child themes to.

Styling the login

Create the file referenced in the above function inside your theme's folder, so following the example customlogin.css.

Copy the code from this pastebin, paste it into the newly create CSS file and save.
The code in the pastebin is basically a copy of the login.dev.css from WP 3.0.3, the difference with taking this approach is having full control over the CSS for the login without need for overrides in your styling.

Now simply make whatever changes you like inside that file.

One caveat to note here, is that the login file uses relative paths for images, so the stylesheet as is will point at non-existant images.
However as the stylesheet is now in your theme directory, you can use a relative path to your theme's image directory, giving you two easy solutions.

  • Copy the original images from wp-admin/images/ into your theme's image folder and use a relative path(see below).

  • Set the styles to use your own images in your theme's image folder using a relative path, eg. images/someimage.jpg.

  • NOTE: I'm not sure the late hook on the first example is actually needed, it's possible the login_head hook fires after the stylesheet is included anyway(i havn't gone to check).
    – t31os
    Dec 22, 2010 at 18:46
  • +1 for style_loader_src hook! The most overseen hook of all times! But you should use it on priority 11+ as wp_style_loader_src(); from /wp-includes/script-loader.php already hooks in on 10 and loads the colors and colors fresh stuff.
    – kaiser
    Nov 3, 2011 at 1:11

Lots of plugins and variations - custom login wordpress - Google Search - but basically:

Goes in your theme's functions.php file:

function custom_loginpage_logo_link($url)
return get_bloginfo('wpurl');
function custom_loginpage_logo_title($message)
return get_bloginfo('name');
function custom_loginpage_head()

$stylesheet_uri = get_bloginfo('template_url')."/login.css";
echo '<link rel="stylesheet" href="'.$stylesheet_uri.'" type="text/css" media="screen" />';

And make a file called login.css for your theme directory and make CSS changes there:

body.login {background-color: #464646;}
#login h1 a {height:160px;background: url(images/mylogo.jpg) no-repeat top center;}
#login .message {display:none;}
#login form {background-color: #c2c2c2;}
#login label {color: #111;}
#login input {border: 1px solid #999;}
.login #login p#nav a:link,
.login #login p#nav a:visited,
.login #login p#nav a:hover,
.login #login p#nav a:active {text-decoration:none; color: #fff !important}
#nav {color: #fff; font-weight: bold}
  • 2
    If you don't end up changing any style but the actual logo you could consider echoing the css directly in the header with your custom_loginpage_head() header, instead of adding an external stylesheet: echo '<style type="text/css"> h1 a { background-image:url('.get_bloginfo('template_directory').'/images/your-logo-image.png) !important; } </style>'. A little simpler IMHO.
    – matt
    Dec 22, 2010 at 17:18
  • @matt: I think it's worth you post that as an answer on it's own because the simplicity is amazing. It can be only topped my putting the logos data already base64 encoded into the CSS background-image url. Then this wouldn't even need an additional image file gg
    – hakre
    Dec 22, 2010 at 18:11
  • Would most browsers be able to render a base64 image?
    – t31os
    Dec 22, 2010 at 18:38
  • @hakre: Looks like t31os has it covered in his answer. Can you post your version with the base64 mod? I'd like to see how that is done.
    – matt
    Dec 22, 2010 at 18:44
  • 1
    @matt: regarding the base64 mod, you can find an example pf such an image URL here: ietf.org/rfc/rfc2397 along with the description about what this is about. More information there: xs4all.nl/~wrb/Articles/Article_IMG_RFC2397_P1_01.htm
    – hakre
    Dec 22, 2010 at 20:41

This article by WPEngineer should get you started on changing the logo, name, and link of your Wordpress login page.

  • Linking is a good point. I think most users are looking for that after they changed the image.
    – hakre
    Dec 22, 2010 at 20:40

Copy and paste the code in your theme functions.php file:

function change_my_wp_login_image() {
    echo "
            body.login #login h1 a {
                background: url('".get_bloginfo('template_url')."/images/your_image_name') 8px 0 no-repeat transparent;
                background-position: center;
                height: 100px;
                width: 320px;
                background-color: #E48C07;
add_action("login_head", "change_my_wp_login_image");

See also customize WordPress log in interface.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.