Your login screen is one of the first pages customers see when they land on your WordPress site. This may be their first or thousandth time with your brand, yet each time they must go through this login process before accessing the rest of your site information. Because of the repetition of this step, your site’s login page becomes an important touch point during the customer journey and should be updated accordingly to match your brand. We’ve created a step-by-step guide on how to add your company logo to this page to get your brand recognition started right away!
There are many ways, you can add a logo such as:
- A custom 3rd party theme
- 3rd party plugins
- With a simple code snippet
Today, we’ll focus on code snippets so you don’t have to install any 3rd party themes or plugins. If you are interested in more in-depth information on how to install a custom logo on your WordPress site instead of your login page, please click here.
Set yourself up for success:
- First, connect to your WordPress FTP or login to your cPanel.
- Locate your theme folder (in this example, we’ll use the “twenty-sixteen” theme).
- From here, navigate to the wp-content/themes/your-theme-name folder.
- Create a folder “assets” and upload your logo image file
These first steps ensure that your logo image is uploaded to the correct location before you try and place it on your login page.
Begin Placing Your Logo:
- To get started, log in to WordPress as an administrator.
- Then go to your dashboard.
- Follow this path: Click Dashboard -> Appearance -> Editor
- Once you reach the editor page, look in the right column where you will see “Theme Files”.
- Under Theme Files, you’ll see a list of all files related to your theme. In this example, we are using the “Twenty Sixteen” theme.
- Find the “functions.php” file
- Click Edit to modify the file.
- Add this code snippet below:
function add_logo_to_login() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/assets/images/logo.jpg) !important; width:300px !important;}
</style>';
}
add_action('login_head', 'add_logo_to_login');In the code snippet above, “/assets/images/logo.jpg” is the location of the custom logo.
This ensures that your logo, as well as the rest of your images, are stored in a folder and easy to access when needed.
Now, here’s what the login page looks like with our logo as an example:
Remember, it’s never too early to make customers aware of your brand by editing and personalizing your WordPress site. If you’re interested in doing more WordPress editing, such as changing your site’s language or date and time, our knowledge base has step-by-step instructions on how to do so. If you are interested in fast and reliable WordPress hosting to enhance your website, click here!
