Custom logo on login form for WordPress

Sometimes you want to deliver a fully customized WordPress installation and theme, and this is a very simple fix that’ll step up your game.

By adding the following function into the functions.php file (or creating your own functions.php file for a child theme), you are telling WordPress to grab the logo from somewhere else in order to integrate the login form into the whole corporate image.

function my_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url('url_to_image');
            padding-bottom: 20px;
            background-size: imgWidth_px imgHeight_px;
            height: imgHeight_px;
            width: imgWidth_px;
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Be sure to change imgWidth_ and imgHeight_ with the width and height of your logo.

If imgWidth_ is greater than 320 pixels, compute and add in a margin-left to center it:

margin-left: (imgWidth-320)/2;

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.