WordPress

Quick Tip: Customize the WordPress login page

It is really just a minor detail, and although there is such a simple way to do it, customizing the wp-login.php page can make a site feel a lot more unique. This also goes for customers, who get greeted by their own logo on the login page.

The following quick tutorial will show how you can style the login page, replace the WordPress logo and change the logo URL.

Note: All of the code in this tutorial is to be placed in your theme’s function.php.

Changing the logo

In order to replace the default WordPress logo, we use a WordPress action hook, which allows us to inject a style-block with CSS into the header of the page. We can then change the logo image, which is a background image, to whatever image we want.

/*Change the login logo*/
function custom_login_logo() { ?>
    <style type="text/css">
        .login h1 a {
            height:226px; /*height of your image*/
            background-size:auto; /*disable or change background-size*/
            background-position: center center;
            background-image: url(<?php bloginfo('template_url'); ?>/images/wp-login.png);
         }
    </style>
<?php }
add_action('login_head', 'custom_login_logo');

The image, in this case wp-login.png, has to uploaded into the theme folder. In this example i placed it in the theme’s subfolder images.

Changing the logo URL

We have changed the logo image, but if it is clicked it will still redirect the user to WordPress.com. By adding the following code, we can instead redirect to a url of our choice.

/*Change the logo url*/
function custom_login_url() {
    return site_url();
    //If you wish to redirect to another site, here is an alternative:
    //return 'http://my.site.com'
}
add_filter('login_headerurl', 'custom_login_url');

Changing the logo title

The only logo-related thing that is left to change now is the title attribute of the link, which otherwise will show “Powered by WordPress” when hovering over the logo.

/*Change the "Powered by WordPress!" title*/
function custom_login_title(){
    return get_bloginfo('name');
}
add_filter('login_headertitle','custom_login_title');

Styling the page

If you want to make bigger changes to the page, you can simply change the CSS that we used earlier to replace the logo. Here is an example, the result can be seen here:

body.login {
    background: #000;
}
body.login h1 a { 
    height:226px;
    background-size: 137px 113px;
    background-position: center center;
    background-image:url(<?php bloginfo('template_url'); ?>/library/images/techstorm-login.png);
}
body.login form {
    -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0 4px 200px -1px;
    -moz-box-shadow: rgba(200, 200, 200, 0.7) 0 4px 200px -1px;
    box-shadow: rgba(200, 200, 200, 0.7) 0 4px 200px -1px;
}
#nav, #backtoblog{
    display:none;
}

I'm a webdeveloper based in Oslo, Norway. I currently work with web development at Nettmaker.

I would like to change the world, but they won't give me the source…

0 0 votes
Article Rating
Subscribe
Notify of
guest

2 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments