How To Add Your Company Logo To The WordPress Login Page

Make your website login look professional

How To Add Your Company Logo To The Wordpress Login Page

Vanja K.
Vanja K. / October 19, 2022 / 849 Views

We get asked this a lot: how to add your company’s logo to the backend login page for WordPress. It makes the whole thing look more prefessional, and in turn, makes the whole thing a lot more appealing to a lot of our clients who have more than one admin or shop manager. The procedure is quite simple, just a few lines of code, the logo in the proper size and you’re done.

Step 1 – Create a properly sized logo, and upload it to your website

The logo is the first thing you’ll need, and it will need to be uploaded to your website. For logos and some general assets for our client’s sites, we tend to add them to the assets folder within the theme itself. This solves a potential future issue where a logo needs to be updated, so it’s easily found and replaced, without the hassle of going through thousands of files in the YY/MM folder. In turn, whenever you wish to change it, simply upload the new version. That’s it!

Step 2 – Add the below code to your functions.php page

/* Add Unplugged performance logo to Login page */

function nucleus_login_logo()
{ ?>
<style type="text/css">
#login h1 a,
.login h1 a {
background-image: url('/wp-content/themes/unpluggedperformance/assets/up-black-logo-1.png');
height: 65px;
width: 305px;
background-size: 305px 65px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php }
add_action('login_enqueue_scripts', 'nucleus_login_logo');

Copy
DISCLAIMER:

Please use the code, advice, and information presented on this website with caution. Nucleus D.O.O, or any of its employees, cannot be held responsible for any damages that this code might cause. We always try to update the code shown on our website, but we cannot guarantee its functionality with various themes, templates, or coding. Please ensure that you test each code thoroughly in order to use it safely.

Need some of our services?
Get in
touch and we'll
send you a free cost estimate for your project!


    Contact Form Image
    MORE BLOGS
    We got more related posts, check them out!
    How to remove “Home” from WooCommerce Breadcrumbs
    An easy-to-add snippet of code that will clean up your single product pages and single blog posts This was a simple request, but a rather impactful request by one of our clients. Their eCommerce store, made in WooCommerce by our team displays breadcrumbs on top of their page. It’s a great way of showing the […]
    Vanja K.
    CEO & CTO
    Read More
    Limit Search Results to WooCommerce Products
    Make sure your customers see only WooCommerce products when searching for items on your online store, giving them a better showcase of your offerings Running a WooCommerce website requires some pretty straightforward tasks at hand each and every day. However, there are also some custom tweaks that some eCommerce admins would like to have for […]
    Vanja K.
    CEO & CTO
    Read More
    How to add additional gallery thumbnail sizes in WordPress
    Create uniquely resized image thumbnails for use in content pages, blog posts, landing pages and galleries, speeding up the loading speed of your WordPress website For many of us, the standard set of gallery sizes in WordPress aren’t enough and for many, they create their own set of issues. In turn, for any knowledgable WordPress […]
    Vanja K.
    CEO & CTO
    Read More
    Newsletter
    Stay up to date. It's worth it.
    Newsletter Background Image