Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
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? –  Andrew Warner Dec 24 '10 at 20:39

5 Answers 5

up vote 2 down vote accepted

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

share|improve this answer
    
And it's incredibly simple and fast to use. –  tnorthcutt Feb 2 '11 at 21:15

Copy and paste the code in your theme function.php file.

function change_my_wp_login_image() {
    echo "
        <style>
            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;
            }
        </style>
    ";
}
add_action("login_head", "change_my_wp_login_image");

you can follow the link reference for customize WordPress log in interface

share|improve this answer

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;
    }
    </style>
    <?php
}

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.

share|improve this answer
    
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 '10 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 '11 at 1:11

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

share|improve this answer
    
Linking is a good point. I think most users are looking for that after they changed the image. –  hakre Dec 22 '10 at 20:40

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" />';
}
add_filter("login_headerurl","custom_loginpage_logo_link");
add_filter("login_headertitle","custom_loginpage_logo_title");
add_action("login_head","custom_loginpage_head");

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

html,
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}
share|improve this answer
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-ima‌​ge.png) !important; } </style>'. A little simpler IMHO. –  matt Dec 22 '10 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 '10 at 18:11
    
Would most browsers be able to render a base64 image? –  t31os Dec 22 '10 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 '10 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 '10 at 20:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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