👋🏼Welcome to my WP-Host blog where I am excited to share my knowledge and expertise on WordPress hosting and website construction tutorials with you. Let’s connect and learn from each other! You can reach me at info@yrshare.com.
Continue to share the wordpress tutorials. The content shared today is to teach you to modify the default login page of wordpress, modify the LOGO picture, LOGO link, LOGO title, and background image on the login page. Here I use code to achieve it, but it is not complicated. , you only need to add some simple code snippets in the wordpress theme Functions.php file to achieve these effects.
If you have installed Code Snippets or other similar code management plug-ins, you can also add the following code to the plug-in, which will be simple and convenient.
Table of Contents
Modify the landing page LOGO
You can add the following code to the theme Functions.php file or the Code Snippets plug-in, and then upload a picture named [login_logo.png] in the [images] directory under the current theme directory of the website. This picture can be yours Website LOGO or other pictures.
If there is no [images] directory in your theme, you can create one manually.
//Modify the landing page LOGO
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');
Modify the logo link on the landing page
By default, the logo on the landing page is linked to wordpress.org, so you can use the following code to modify the link, and the link address can be filled in freely.
//Modify the logo link on the landing page
function custom_loginlogo_url($url) {
return'https://yrshare.com/'; //Enter the URL address you need to link to here
}
add_filter( 'login_headerurl', 'custom_loginlogo_url');
function custom_register_url($url) {
return'https://yrshare.com/'; //Enter the URL address you need to link to here
}
add_filter( 'login_registerurl', 'custom_register_url');
Modify the logo title of the landing page
The default LOGO title is official wordpress, you can modify it through the following code, for example, I changed it to [WP-host] here, you can modify it to the title you want, such as your website name, company name.
//Modify the logo title of the landing page
function custom_headertitle ( $title ) {
return __( 'WP-host' );
}
add_filter('login_headertitle','custom_headertitle');
Modify the background image of the landing page (method 1)
The default wordpress login page is gray, if you don’t think it looks good, you can add a beautiful picture background to it through the following code.
You can make a picture called [bg2.webp] and add it to the [images] directory of the current wordpress theme.
//Modify the background image of the landing page (method 1)
function custom_login_head(){
echo '<style type="text/css">
body{background-image: url('.get_bloginfo('template_directory').'/images/bg2.webp) !important; }
</style>';
}
add_action('login_head', 'custom_login_head');
Modify the background image of the landing page (method 2)
If you think the fixed picture background is not good-looking, then you can use the following code to use the BING daily picture as the background of your wordpress landing page. This picture will change every day, and it will automatically read the BING picture.
//Call the bing image as the background image of the login page (changes every day)
function custom_login_head(){
$str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
if (preg_match("/\/(.+?).jpg/", $str, $matches)) {
$imgurl='http://s.cn.bing.net'.$matches[0];
}
echo'<style type="text/css">body{background: url('.$imgurl.');background-image:url('.$imgurl.');-moz-border-image: url('.$imgurl.');}</style>';
}
add_action('login_head', 'custom_login_head');