Customize WordPress login screen |  kulturbanause®

Customize WordPress login screen

If you use WordPress for customer projects, it makes sense to visually adapt the administration area to the customer’s existing corporate design. As a rule, they prefer their own logo to that of WordPress, and an individualized installation naturally also has a higher-quality technical effect.
The first point of contact between the user and the WordPress backend is the login area. With just a few lines of code, you can replace the WordPress logo with that of the customer. A snippet that should definitely go into the theme template.

Training from kulturbanause

Intensive training with a high level of practical relevance.

Create logo graphic

The default WordPress logo is 326 x 67 pixels in size. It is therefore easiest if you also create your logo within the framework of these dimensions.
The snippet below searches within the theme folder (../wp-content/themes/name-des-themes/img/logo-login.png) after the graphic. So make sure you put the picture in the right place.

functions.php

Copy the following code into the functions.php of the theme or use a site-specific plugin. Three elements of the login screen will be changed.
First, the logo is exchanged for the graphic you created. The link to the wordpress.com logo is then rewritten to the home page of your website get_bloginfo( 'blogname' ) and the title with the name of your blog get_option('blogname') replaced.


/* ----------------------- */
/* customized login-screen */
/* ----------------------- */

// logo
function kb_custom_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/img/logo-login.png);
            padding-bottom: 30px;
        }
    </style>
<?php }

add_action( 'login_enqueue_scripts', 'kb_custom_login_logo' );

// link
function kb_custom_login_logo_url() {
    return get_bloginfo( 'url' );
}

add_filter( 'login_headerurl', 'kb_custom_login_logo_url' );

// title
function kb_custom_login_logo_url_title() {
    return get_bloginfo( 'blogname' );
}

add_filter( 'login_headertitle', 'kb_custom_login_logo_url_title' );

update 1

I’ve adjusted the code above because the URL has appeared in the layout in an unwanted way since WordPress 3.4 at the latest. Now everything is working properly again.

links on topic

You can also find information on this topic in the WordPress codex:

Written by Jonas

thumbs

Jonas is the founder of the web design agency kulturbanause® and the kulturbanause® blog. He is responsible for project management, UX/UI and frontend development and has published numerous specialist books and video training courses. As a lecturer, he conducts training courses and workshops. He prefers to work on projects and topics that challenge him conceptually as well as creatively and technically.

Previous post WordPress admin login: How to find wp-login.php
Login and navigation in the backend Next post Login and navigation in the backend