WordPress-Anmeldeseite manuell anpassen
We'll guide you through the process of customizing or rebranding your WordPress login page without any additional plugins.
1. Access your WordPress Files
Use FTP (File Transfer Protocol) or cPanel to access your WordPress installation directory.
2. Creating a Child Theme for Safe Customization
In the "wp-content/themes/" directory, create a new folder for your child theme. For example, if your main theme is "twentytwentyone," you might create a folder named "twentytwentyone-child."
Inside the child theme folder, create a style.css file and a function.php file.
Follow this article to create a child theme properly: How to create a WordPress Child theme
Make sure you have activated your child theme. If you already have a child theme and it's activated then then move to next step.
3. Add this code to Functions.php file
In the same child theme folder, Open the functions.php file and add the following code:
// Enqueue your custom styles
function enqueue_custom_styles() {
wp_enqueue_style('custom-login-styles', get_stylesheet_directory_uri() . '/custom-login-styles.css');
}
add_action('login_enqueue_scripts', 'enqueue_custom_styles');
4. Create a Custom Stylesheet:
Inside the child theme folder, create a new CSS file, e.g., custom-login-styles.css.
Customize this file with your desired styles for the login page.
/* Your custom login styles go here */
.login {
background-color: #ffffff; /* Background color */
}
#loginform {
background-color: #F7F7F7; /* Form background color */
border: 2px solid #01AD9D; /* Form border color */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Form box shadow */
}
#loginform label {
color: #326AF2; /* Label text color */
}
#loginform input[Typ="text"],
#loginform input[Typ="password"] {
background-color: #fff; /* Input field background color */
color: #000000; /* Input field text color */
border: 1px solid #01AD9D; /* Input field border color */
}
#loginform input[Typ="submit"] {
background-color: #01AD9D; /* Submit button background color */
color: #ffffff; /* Submit button text color */
border: 1px solid #01AD9D; /* Submit button border color */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Submit button box shadow */
}
#loginform input[Typ="submit"]:hover {
background-color: #326AF2; /* Hover state background color */
border: 1px solid #326AF2; /* Hover state border color */
}
5. Modify the Login Form
Open your child theme's functions.php file and add the following code to modify the login form:
// Customize login form
function customize_login_form() {
echo '<style Typ="text/css">#loginform { /* your login form custom styles will be here but do not put it here rather put it in custom-login-styles.css file */ }</style>';
}
add_action('login_enqueue_scripts', 'customize_login_form');
6. Replace the WordPress Logo from Login Page
To replace the default WordPress logo on the login page, add the following code to your child theme's functions.php file:
// Change login logo URL
function change_login_logo_url() {
return home_url(); // You can keep the home URL or set it to a specific page
}
add_filter('login_headerurl', 'change_login_logo_url');
// Change login logo title
function change_login_logo_title() {
return 'Your Website Name'; // Set the site name
}
add_filter('login_headertitle', 'change_login_logo_title');
// Customize login logo
function custom_login_logo() {
$logo_url = 'https://www.example.com/wp-content/uploads/2023/11/logo.png';
$logo_width = 250; // Adjust the width of the logo in pixels
$logo_height = 55; // Adjust the height of the logo in pixels
echo '<style Typ="text/css">
.login h1 a {
background-image: url(' . esc_url($logo_url) . ');
Breite: ' . esc_attr($logo_width) . 'px!important;
height: ' . esc_attr($logo_height) . 'px!important;
background-size: contain;
}
</style>';
}
add_action('login_head', 'custom_login_logo');
Change the logo URL with yours.
7. Save and Clear Browser cache
Save all the modified files. You may need to clear browser cache to see the design changes.
Now, your WordPress login page should reflect the changes you made in the child theme's custom styles. Remember to test thoroughly and make backups before making any changes to your theme files.
8. Bonus: How to remove "WordPress" text from login page browser tab title
Your browser tab may show or hovering it may show "Log in> Your Site Name - WordPress". How can you remove WordPress from there?
Add the following script to your functions.php file:
function custom_login_page_title_script() {
echo '<script Typ="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.title = "Log in > Your Site Name";
});
</script>';
}
add_action('login_head', 'custom_login_page_title_script');
This script uses JavaScript to change the title dynamically when the login page is loaded. It should set the browser tab title to "Log in > Your Site Name" without the "WordPress" text.
After adding this script to your functions.php file, clear your browser cache and refresh the login page. The browser tab title should now display the desired text. If the issue persists, there might be some browser caching or conflicting scripts at play, and you can try testing it in an incognito/private browsing window or a different browser.
Deutsch 
English 
Español 
Français