Wordpress Tip: Design the login area individually.

WordPress Tip: Design the login area individually.

Especially with customer projects in connection with WordPress, we want to design the backend as individually as possible. A coherent login area tailored to the project is definitely an optical plus here. WordPress offers us a few ways to edit this area – without a plugin!

Include your own logo

In the WordPress codex we find the following code snippet. This must be integrated into your functions.php.

function my_login_logo() { ?>
    <style type="text/css">
        .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

As you can see, the image file is defined via CSS. After adjusting the path, the custom logo should now appear in the login window.

Add text to login

We also have the option of defining a specific text in the login area. To do this, include the following code in functions.php:

function wps_login_message( $message ) {
  if ( empty($message) ){
    return "<p class="message">Welcome to this site. Please log in to continue</p>";
  } else {
    return $message;
  }
}
add_filter( 'login_message', 'wps_login_message' );

As you can see, it is very easy to make individual adjustments here. You can find more options directly in the WordPress codex.

Customize the WordPress login page via functions.php Previous post Customize the WordPress login page via functions.php
cropped rashediconsulting logo blue Next post WordPress Security: With these 20 tips you can make your WordPress site even more secure