Your cart is currently empty!
Replace SayPro WordPress Login Icons

Written by
in
To replace the WordPress login icons (such as the WordPress logo on the login screen) with your SayPro branding, you’ll want to customize the WordPress login page. Here’s how to do that step-by-step:
✅ Method 1: Use Custom Code (Recommended for Control)
Step 1: Add Custom Code to Your Theme’s functions.php
Go to:
Appearance > Theme File Editor > functions.php (or use a child theme to avoid losing changes after updates).
Add the following code:
// Replace WordPress login logo with SayPro logo
function saypro_custom_login_logo() {
?>
body.login div#login h1 a {
background-image: url('/images/saypro-logo.png');
background-size: contain;
width: 100%;
height: 100px;
}
<?php
}
add_action('login_enqueue_scripts', 'saypro_custom_login_logo');
// Change login logo link URL
function saypro_login_logo_url() {
return home_url(); // or custom SayPro URL
}
add_filter('login_headerurl', 'saypro_login_logo_url');
// Change login logo title text
function saypro_login_logo_url_title() {
return 'Welcome to SayPro';
}
add_filter('login_headertext', 'saypro_login_logo_url_title');
Step 2: Upload Your SayPro Logo
- Go to Appearance > Theme File Editor > Theme Folder > images
- Upload your
saypro-logo.png
image (recommended size: around 320×80 px) - Adjust the file path or name in the code above if needed.
✅ Method 2: Use a Plugin (Easier, Less Technical)
If you prefer a no-code method:
Recommended Plugins:
- LoginPress
- Custom Login Page Customizer by Colorlib
- Theme My Login
How to Use:
- Go to Plugins > Add New
- Search for:
LoginPress
or similar - Install and Activate
- Go to LoginPress > Customizer
- Change:
- Logo image
- Background
- Button styles
- Etc.
🧠 Tip:
If you’re using a custom login URL (e.g., via WPS Hide Login), these changes still apply — but test after updating.
Would you like help creating a custom logo in the right size or style for the login page?