How To Change The WordPress Admin and Login Logo
Tags: php, wordpress, webdev
Published: 2020-12-29 14:09:55

The WordPress login form displays the WordPress logo and clicking it goes to the WordPress website. Within the admin area, it also displays the WordPress logo in the toolbar. Let’s learn how to display your own logo instead!

## Login Form

### Logo

To change the logo appearing on the login form, we’ll utilize the **login_head** action hook. Navigate to Appearance > Theme Editor and open the template file in your theme called **functions.php**. Add the following code to it.

```php
add_action( 'login_head', 'my_custom_login_logo' );
```

The second parameter in the add_action function is the name of the function you want to call. Let’s create that function now. It will output some CSS that will override the default WordPress logo. Make sure to change the path to your logo file.

```php
// Override login logo.
function my_custom_login_logo() {
  echo '<style type="text/css">
          body.login div#login h1 a { 
            background-image:url(' . get_bloginfo('template_directory') . '/path/to/logo) !important;
            background-size: inherit;
            height: 40px;
            width: 100%;
          }
        </style>';
}
```

### Title

If you hover your mouse over the logo, you’ll notice it mentions WordPress. Let’s change that to the name of your website instead by using the **login_headertext** filter hook. Navigate to Appearance > Theme Editor and open the template file in your theme called **functions.php**. Add the following code to it.

```php
add_filter( 'login_headertext', 'my_custom_login_title' );
```

The second parameter in the add_filter function is the name of the function you want to call. Let’s create that function now. It will return the text we want to display as the title.

```php
// Override login title
function my_custom_login_title() {
  return 'NightWolf Software Development';   
}
```

### Url

If you click on the logo, you’ll notice it goes to WordPress’ website. Let’s change that to your website address by using the **login_headerurl** action hook. Navigate to Appearance > Theme Editor and open the template file in your theme called **functions.php**. Add the following code to it.

```php
add_action( 'login_headerurl', 'my_custom_login_url' );
```

The second parameter in the add_action function is the name of the function you want to call. Let’s create that function now. It will return the url that should be visited when clicking the logo.

```php
// Override login url.
function my_custom_login_url() {
  return 'https://nightwolf.dev';
}
```

## Admin Toolbar

To change the logo appearing in the admin toolbar, we’ll utilize the **wp_before_admin_bar_render** action hook. Navigate to Appearance > Theme Editor and open the template file in your theme called **functions.php**. Add the following code to it.

```php
add_action( 'wp_before_admin_bar_render', 'my_custom_admin_bar' );
```

The second parameter in the add_action function is the name of the function you want to call. Let’s create that function now. It will output some CSS that will override the WordPress logo. Make sure to change the path to your logo file.

```php
// Override admin bar.
function my_custom_admin_bar() {
    echo '<style type="text/css">
        #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
            background-image: url(' . get_bloginfo('template_directory') . '/path/to/logo) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            color: rgba(0, 0, 0, 0);
        }
        #wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
            background-position: 0 0;
        }
    </style>';
}
```

---
#### Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!
---