What is the Tutorial About?
This tutorial provides a simple and effective solution to a common issue faced by many WordPress users – changing the default WordPress logo and link on the login page. WordPress, by default, does not provide an option in the settings to customize this logo. However, with a bit of code and the use of a plugin, you can easily personalize your login page to better reflect your brand. The tutorial is presented by Mark from Wicky Design, who guides you through the process step-by-step, making it easy even for those with minimal coding experience.
Step by step
- Install the Code Snippets Plugin:
This plugin allows you to add code to your website without editing theme files. You can download it from the WordPress plugin repository. - Navigate to the Snippets Tab:
Once you’ve installed and activated the Code Snippets plugin, you’ll see a new tab in your WordPress dashboard called “Snippets”. - Add a New Snippet:
Click on the “Add New” button to create a new snippet. - Name Your Snippet:
Give your snippet a descriptive title so you can easily identify it later. - Paste the Code:
Paste the provided code into the snippet. This code will change the default WordPress logo on your login page.
Source: Wicky Desingfunction custom_login_logo() { echo '<style type="text/css"> .login h1 a { background-image: url(logo.svg) ; // Your Logo Here background-position: center center; background-size: contain; width: 100%; } </style>'; } add_action('login_head', 'custom_login_logo'); function login_url(){ return "https://wickydesign.com"; // Your URL Here } add_filter('login_headerurl', 'login_url');
- Customize the Code:
Replace the URL in the code with the URL of your desired logo. You can also adjust the width of the logo and the URL that the logo links to. - Save and Activate the Snippet:
Once you’ve made your changes, click “Save” and activate the snippet. - Check Your Changes:
Visit your login page to see your new custom logo in action. If you’ve changed the link URL, clicking on the logo should take you to your specified URL.
Remember, you can always deactivate or delete the snippet if you want to revert back to the default WordPress logo.
Use Cases for this Tutorial
- Branding:
If you’re running a business or a blog, having your logo on the login page adds a professional touch and reinforces your brand identity. - Personalization:
For personal blogs or websites, changing the logo to something that represents you can make your site feel more unique and personal. - Client Projects:
If you’re developing a website for a client, customizing the login logo to their business logo can add an extra level of professionalism to your work. - Community Websites:
For websites with multiple users or contributors, a custom logo can make the login page feel more welcoming and inclusive.