In the first post of this series, I will guide you to use the WordPress API to customize the WordPress login page, specifically, I will take a simple example of editing the WordPress logo to be my own logo and change the WordPress logo. background color change.
Create Plugins
First of all, to easily manage your code, I recommend you to create your own plugin. In this whole series we will create a separate plugin to manage, first go to the folder /wp-content/plugins/ and create a folder called tp-custom-admin.
In this directory we will have the file custom-admin.php and folder images (to contain images that you use in the plugin). Structure like this:
Next we open the file custom-admin.php to add plugin information, so that it can be displayed in the plugin management page.
<?php
/**
* Plugin Name: TP Customize Admin Screen
* Plugin URI: https://TechtipsNReview.com
* Description: Tùy biến lại trang quản trị của admin.
* Version: 1.0
* Author: Thach Pham
* Author URI: https://TechtipsNReview.com
*/
And in this article, the code you will write right below this information declaration. Now go to the plugin admin page and activate the plugin.
Create interactive function to login page
Now we will declare a function that will contain the code that you want to customize to the login page, for example, we have a function named tp_custom_login().
/**
* Thay đổi logo trang đăng nhập và đổi màu nền
*/
function tp_custom_logo() {}
add_action(‘login_enqueue_scripts’, ‘tp_custom_logo’);
Like the above code, you will see we hook the function tp_custom_logo()
into the name hook login_enqueue_scripts
. This is the hook that will display what we hook into the login page, so we want to change the image and color, which means we will write more CSS for the login page, so hook this hook.
Add custom CSS to the login page
We already have the function declared above, now we can add any custom code but for the easiest implementation we will add CSS to change the logo image and background color for the login page.
First we need to close our PHP code so we can write CSS more easily like this:
function tp_custom_logo() { ?>
<?php }
add_action(‘login_enqueue_scripts’, ‘tp_custom_logo’);
Now we will write CSS or HTML in the space in the middle. First of all, we will change the logo, now you go to the login page to see its HTML structure, you will see the logo showing it in the id #login.
Okay so now we will have the following CSS (remember to change your logo image):
<style type="text/css">
#login h1 a {
background-image: url(<?php echo plugins_url(‘images/logo.png’, __FILE__); ?>);
background-size: 280px 80px;
width: 280px;
height: 80px;
}
</style>
Right on line 3, I used the plugins_url() function as follows:
<?php echo plugins_url(‘images/logo.png’, __FILE__); ?>
This means it will print the path to the logo.png file in the current plugin’s images directory because the function plugins_url has the effect of getting the plugin’s path, parameters __FILE__
i.e. get the current directory path of the current file.
Now the result we have:
Now let’s add CSS to make it more different.
function tp_custom_logo() { ?>
<style type="text/css">body {
background: #34566f !important;}
.login #nav a, .login #backtoblog a, .login label {
color: #f3f3f3 !important;
}
.wp-core-ui .button-primary {
background: #31b36b !important;
border: none !important;
text-shadow: none !important;
box-shadow: none !important;}
.login form {
box-shadow: none !important;
background: transparent !important;
}
#login h1 a {
background-image: url(<?php echo plugins_url(‘images/logo.png’, __FILE__); ?>);
background-size: 280px 80px;
width: 280px;
height: 80px;
}
</style>
<?php }
add_action(‘login_enqueue_scripts’, ‘tp_custom_logo’);
[alert color=”green” type=”alert-message-outline” title=”Tips” size=”small”]To write CSS correctly, you should use your browser’s Inspect tool to see the CSS of the element to be edited and then write the CSS over the selection (see video).[/alert]
Result:
If you want to build your own login page for WordPress without using the default /wp-admin page, you can refer to this guide.
Self-marking “Remember Me”
If you want the Remember Me button to be ticked by default to remember the next login, you can add the function below to customize it.
</pre>
<pre>/**
* Tự đánh dấu vào nút Remember Me để ghi nhớ lần đăng nhập sau
*/
function tp_rememberme_check() {
add_filter( ‘login_footer’, ‘tp_rememberme_checked’ );
}
add_action( ‘init’, ‘tp_rememberme_check’ );function tp_rememberme_checked() {
echo "<script>document.getElementById(‘rememberme’).checked = true</scrip>";
}</pre>
<pre>
Okay that’s simple, continue in the following articles we will customize it inside the admin page of WordPress.
Source: How to Customize WordPress Login Page
– TechtipsnReview