You often work with wordpress website, maybe one day you will get bored with its default login page interface. Or you are designing a website for a client, perhaps at the time of handover leaving the default login page as it is, it looks too mediocre, has no own brand characteristics at all. This is the default WordPress login page.
Perhaps you need to change the look of the login page a bit, to make it more professional, and also to have a more personal identity. There are many plugins to help you change the login page to make it more beautiful. But in this case, using a plugin will consume a bit more website resources and confuse the admin page. Therefore, in this article, I will guide you with code and css.
Customize the login page to your liking
This is the login page I have customized to my liking. In this login page, I have changed the page background image, changed the logo, adjusted the transparent login form background. Also, by default the logo will point to the wordpress website when clicked. So I will also show you how to change this link pointing to your site. Absolute brand affirmation, right?
First, you create a folder named login to the child theme folder. In my login folder to enter 3 files background.jpg , custom_login.css and logo.png .
After that, you open custom_login.css and paste this css in and save it.
/* Change login page style by Ken Than */
.login h1 a {
background-image: url(logo.png);
width: 213px;
height: aoto;
background-size: 213px auto;
}
.login label {
color: #fff;
display: block;
margin-bottom: 1em;
font-weight: bold;
}
.login form {
background: rgba(48, 66, 88, 0.3) ;
}
.login form .input {
font-weight: normal;
}
.login #backtoblog a, .login #nav a {
color: #fff;
}
.wp-core-ui .button-primary {
background: #4da28f;
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span>
</div>
Next, we need to assign this CSS to the login page by going to the function.php file of the Child theme and adding the following code:
add_filter('login_headerurl', 'custom_login_url');
function custom_login_css() {
wp_enqueue_style('login-styles', get_theme_root_uri() . '/flatsome-child/login/custom_login.css');
}
add_action('login_enqueue_scripts', 'custom_login_css');
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
Note to change flatsome-child in the path /flatsome-child/login/custom_login.css to the exact name of the interface you are using.
Next, we need to change the logo’s wordpress link to our website link. Add the following code to the function.php file .
function custom_login_url() {
return 'https://www.hocwordpress.vn';
}
<div>
<span>1</span><span>2</span><span>3</span>
</div>
Remember to change the URL to your website URL.
Save this function.php file and you’re done.
summary
This is the easiest way for you to customize your login page to your liking without having to use a plugin to clutter up your admin page. If you have any problems, feel free to ask me. Good luck!
