Adding a custom message in WordPress login page make your site more interactive to your visitors.
We have learned to customize our WordPress Login/Registration page. Now we can change WordPress default logo with our own logo and add a nice background instead of WordPress default background. In this tutorial, we’ll learn how to customize our WordPress login page by adding custom text or message on WordPress login page.
How to add custom message or text to WordPress login page
To add a custom message on WordPress login page, we can use login_message filter.
The filter “login message” is used to filter the message displayed on the WordPress login page above the login form. This filter is used to return HTML markup.
Copy the below code and paste it into your theme’s functions.php file to add a custom message on WordPress login page.
//* Add custom message to WordPress login page
function smallenvelop_login_message( $message ) {
if ( empty($message) ){
return "<p><strong>Welcome to SmallEnvelop. Please login to continue</strong></p>";
} else {
return $message;
}
}
add_filter( 'login_message', 'smallenvelop_login_message' );
Here you can see how it looks after adding the code. The text appears just below the logo. You can add some HTML and some CSS to style the text.
Like the WordPress default login page, you can also customize your WordPress admin dashboard. We’ve some more tutorial on creating a stunning admin dashboard. Check it out here.
You can also use free WordPress plugins to customize your login page. These plugins can be found free on WordPress plugin repository. Here I have listed some of the free plugins you can use for your WordPress sites.
- WP Custom Login Free WordPress Plugin
- Sexy Login Free WordPress Plugin
- Memphis Custom Login Free WordPress Plugin
- Branded Login Screen Free WordPress Plugin
- BM Custom Login Free WordPress Plugin
- A5 Custom Login Page Free WordPress Plugin
- Custom Login CSS Free WordPress Plugin
- My WordPress Login Logo Free WordPress Plugin
- Erident Custom Login and Dashboard Free WordPress Plugin
Poonam, so how could I center that text correctly with CSS? I tried but failed and the text stays aligned to the left. I am relatively new to WP so I guess my skills lack. Please advise, thanks.
John, just add a class to p element like
and in your stylesheet add a CSS for this element.
p.test{text-align:center;}
Poonam,
Thanks for the reply. Where does the p element go? In the php functions? I am not sure where to put it exactly. I tried to see an example but it didn’t help me.
I am trying to center the text and then I plan to enlarge the font and change the font-family.
Regards,
Bobby
John just put the below function in your theme’s functions.php file
//* Add custom message to WordPress login page
function smallenvelop_login_message( $message ) {
if ( empty($message) ){
return “
<p style="text-align:center;">Your message......</p>“;
} else {
return $message;
}
}
add_filter( ‘login_message’, ‘smallenvelop_login_message’ );
ok thanks Poonam 🙂
Hi, i have a simple login page see the image here http://i.imgur.com/kEXFgBJ.png now i need your help… i want to add a youtube or any video (1) on this page and a buddypress member search box (2)
here is the login page template coding (php) https://justpaste.it/zhm3
Can you please help me?
Hey very nice site!! Man .. Excellent .. Amazing .. I’ll bookmark your site and take the feeds also…I am happy to find so many useful information here in the post, we need develop more strategies in this regard, thanks for sharing. . . . . .
Poonam,
Awesome post you have here.
So what if I have that custom message to be below the login form, say under the ‘Back to Site’ link text?
How do you achieve that?
Thanks
but how can I add a custom message box in the homepage.
i want to add a page in my website
Hey Poonam, very cool site and cool content. Has already helped me a few times. Maybe you can help me out I’ll try to customize your code….
return “Welcome to SmallEnvelop. Please login to continue“;
} else {
Instead of “SmallEnvrlop” I want to integrate the page name…. I think that should be this: it should look like this:
…return “Welcome to “;
} else {…
But it doesn’t work like this. Do you possibly have an idea?
Thanks Poonam,