Creating a BuddyPress/WordPress Username availability checker for your site
Hi all, I am back with another tutorial and plugin to spice up the registration page. So you all have seen the ajaxified username availability checker on twitter and other social network, why not for our very own beloved BuddyPress.
Here we go.
Step 1:Create the required javascript. Well, here is the code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | jQuery( document ).ready( function () { var j = jQuery; //append a loading box j( "input#signup_username" ).wrap( "<div id='username_checker'></div> " ); j( "#username_checker" ).append( "<span class='loading' style='display:none'></span>" ) j( "#username_checker" ).append( "<span id='name-info'></span> " ); j( "input#signup_username" ).bind( "blur", function () { j( "#username_checker #name-info" ).empty();//hhide the message //show loading icon j( "#username_checker .loading" ).css( { display: 'block' } ); var user_name = j( "input#signup_username" ).val(); j.post( ajaxurl, { action: 'check_username', 'cookie': encodeURIComponent( document.cookie ), 'user_name': user_name }, function ( response ) { var resp = JSON.parse( response ); if ( resp.code == 'success' ) show_message( resp.message, 0 ); else show_message( resp.message, 1 ); } ); } ); function show_message( msg, is_error ) {//hide ajax loader j( "#username_checker #name-info" ).removeClass(); j( "#username_checker .loading" ).css( { display: 'none' } ); j( "#username_checker #name-info" ).empty().html( msg ); if ( is_error ) { j( "#username_checker #name-info" ).addClass( "error" ); } else { j( "#username_checker #name-info" ).addClass( "available" ); } } } ); |
We have attached the event handler to the signup_username field and we are checking the username availability via ajax when the user leaves the username field. show_message does the housekeeping for showing/hiding messages.
Step2: Create the PHP code for handling the request and sending the output.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | function bpdev_ua_check_username() { include_once( ABSPATH . WPINC . '/registration.php' ); //we need o include this other wise username_exists will not favor us <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://buddydev.com/wp-includes/images/smilies/simple-smile.png?479509" alt=":)" class="wp-smiley" style="height: 1em; max-height: 1em;"><noscript><img src="https://buddydev.com/wp-includes/images/smilies/simple-smile.png?479509" alt=":)" class="wp-smiley" style="height: 1em; max-height: 1em;" /></noscript> if ( ! empty( $_POST["user_name"] ) ) { $user_name = sanitize_user( $_POST["user_name"] ); if ( username_exists( $user_name ) ) { $msg = array( "code" => "taken", "message" => __( "This usename is taken, please choose another one.", "buddypress" ) ); } elseif ( function_exists( "get_current_site" ) ) {//for mu global $wpdb; //check for the username in the signups table $user = $wpdb->get_row( $wpdb->prepare( "SELECT * FROM $wpdb->signups WHERE user_login = %s", $user_name ) ); if ( ! empty( $user ) ) { $msg = array( "code" => "registered", "message" => __( "This username is registered but not activated. It may be available within few days if not activated. Please check back again for the availability.", "buddypress" ) ); } } if ( empty( $msg ) ) {//so all is well, but now let us validate $check = bpdev_validate_username( $user_name ); if ( empty( $check ) ) { $msg = array( "code" => "success", "message" => __( "Congrats! The username is available.", "buddypress" ) ); } else { $msg = array( "code" => "error", "message" => $check ); } } } else { $msg = array( "code" => "error", "message" => __( "Username Can not be empty!", "buddypress" ) ); } echo json_encode( $msg ); } add_action( "wp_ajax_check_username", "bpdev_ua_check_username" ); //hook to ajax action /* helper function to check the username is valid or not, thanks to @apeatling, taken from bp-core/bp-core-signup.php and modified for chacking only the username * original:bp_core_validate_user_signup() * **/ function bpdev_validate_username( $user_name ) { global $wpdb; $errors = new WP_Error(); $maybe = array(); preg_match( "/[a-z0-9]+/", $user_name, $maybe ); $db_illegal_names = get_site_option( 'illegal_names' ); $filtered_illegal_names = apply_filters( 'bp_core_illegal_usernames', array( 'www', 'web', 'root', 'admin', 'main', 'invite', 'administrator', BP_GROUPS_SLUG, BP_MEMBERS_SLUG, BP_FORUMS_SLUG, BP_BLOGS_SLUG, BP_REGISTER_SLUG, BP_ACTIVATION_SLUG ) ); $illegal_names = array_merge( (array) $db_illegal_names, (array) $filtered_illegal_names ); update_site_option( 'illegal_names', $illegal_names ); if ( ! validate_username( $user_name ) || in_array( $user_name, (array) $illegal_names ) || $user_name != $maybe[0] ) { $error = __( 'Only lowercase letters and numbers allowed', 'buddypress' ); } if ( strlen( $user_name ) < 4 ) { $error = __( 'Username must be at least 4 characters', 'buddypress' ); } if ( strpos( ' ' . $user_name, '_' ) != false ) { $error = __( 'Sorry, usernames may not contain the character "_"!', 'buddypress' ); } /* Is the user_name all numeric? */ $match = array(); preg_match( '/[0-9]*/', $user_name, $match ); if ( $match[0] == $user_name ) { $error = __( 'Sorry, usernames must have letters too!', 'buddypress' ); } return $error; } |
So, we have created a function and hooked it to show the message whether the username is available or not. Put the above code in your functions.php file.
That's it. ahh yes, you will need to add some css for better and cool display of messages. Thanks to Andy, I have taken the css from bp-default theme. here you go
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* The css is taken from bp-default theme, thanks to @apeatling, I have just modified the selectors */ #username_checker span.loading { background-image: url( ajax-loader.gif ); background-position: 92% 50%; background-repeat: no-repeat; padding-right: 30px !important; } #username_checker span.available, #username_checker span.error{ display:none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 10px 0; width: 90%; padding: 6px; border-color: #c4e9bd; } #username_checker span.available{ display:block; color: #1a9b00; background: #dffcd9; } #username_checker span.error{ display:block; color: #fff; background: #e41717; } |
That's it.
here are a few screenshots to show how it looks like.
Here is a plugin version to just get it work instantly for you.
Download:-
Current Version : https://buddydev.com/plugins/bpdev-username-availability-checker/
How to Install:
- Download https://buddydev.com/plugins/bpdev-username-availability-checker/
- unzip it and upload "bpdev-username-availability-checker" to wp-content/plugins
- Login to WordPress admin
- Go to Plugin->Installed and activate the plugin "Username Availability Checker"
- Logout and go to your register page, now type some values in the username field and as soon as you put the focus away from username field, It will check and show the status
So, It is fun. Now for theme developers, my advice is do not use the plugin, instead put the js/css in your theme, why should we add an extra css/js file when we can accomplish it via the theme.
Now my turn is over, hope you all will like this. And do not forget, there are a few more things called "plugin" coming soon :), so please make sure to check the site a few times in a week 😀
Looking forward to hear your thoughts now:)
@Brajesh
Wow!
Every time I go away for a weekend, you come up with something new and really cool!
I should go away more often 🙂
Thanks!
hi Patrick
haha , thanks 🙂
Installed it on bp-default but now at the top I get a red bar with "deleted" word. And the checker does not work.
Hi Mel
This should be some other issue. This plugin will not cause any such issue. Please check again and make sure that other plugins are not causing this issue.
Hi Brajesh, where I should add the requered javascript?
hi Soubhik, If you have downloaded the plugin, you do not need to think about the javascript, It will be loaded automatically. If you prefer the other way, you can include it in header(make sure to check you include it only on register page and not on other pages).
Pingback:Daily Tip: Build a BuddyPress Username Availability Checker - WordPress MU and BuddyPress plugins, themes, support, tips and how to's
Hello, I can't get this plugin to work. I use thememylogin plugin for a integrated looking login screen – could that be the problem?
After I install and activate it doesn't do anything.
hi Mark, The plugin is for Buddypress registration pages only, so that could be a problem. edit the plugin to load javascript on your login/register page and It will work.
Hey Brajesh!
That is what I call useful! Thanks for this snippet! 🙂
Is it possible to apply it also to the registration of blogs? A widget, such as a Whois query on the home page would be cool!
Regards, Jens
hi Jens
Thanks for the comment.
That's a nice idea, will give it a try this weekend(tomorrow).
Thanks
Brajesh
Hey!
Have you tryed it already? 😉
Brajesh,
I have a plugin request/suggestion. Dint know where to place it. Could not post it in forums. I am not yet a premium member 🙁
It would be great if we could have something like the facebook friend suggestion (widget-plugin) with ajax support. Simple algorithm to get friends of friends will suffice the purpose.
I am a beginner in php/ajax. So they is way out of my league. Thought this would be a great place to have it.
Thanks.
@gwu
Thanks for the suggestion. will update over the status by tuesday 🙂
Hi Brajesh,
I have a suggestion which you could make into a premium plugin, while at it, why doesn't the script also verify email ID, and that the two password fields match?
Add also an option (which I am doing now by editing the php file directly) to prevent certain names from being registered, added more values to "illegal names".
come to think of it, these should be core functions really.
Cheers.
Great piece of code. We'll see if it has any scaling issues.
You should contribute it to the core. It needs something like this.
Thanks 🙂
I will be glad to contribute it to core if they accept it 🙂
Please do let me know if you find any scaling issue.
Thanks
Brajesh
Brajesh,
I activated the plugin, it works fine in Firefox and IE 8 but it doesn't work with IE 7, has an error. The error says 'JSON' is undefined…
Hi becky, seems json file is not loaded, I am updating the plugin today. Will update here in couple of hours,.
Thanks
Brajesh
same error as Becky
any one???
Hi GWU,
I am updating the plugin today. Please check back after a couple of hours.
Thanks
Brajesh
Hi, Just updated the plugin. Please download version 1.0.1 and It will work.
Brajesh,
I was just going to mention the same issue. You can see on my site: http://givingsports.com/register/accept-invitation/noemail/1/2 if you need a place to test. If you have a fix you want me to test feel free to send it over and I'll do it.
Thanks!
Hi, Just updated the plugin. Please use this version
https://buddydev.com/http//buddydev.com/public-download/bpdev-username-availability-checker1.0.1.zip
Let me know if it still gives error?
Tested and the fix seems to work. Thanks!
Thanks for confirming.
Not working for me. I've tried functions.php method and activating as a plugin but nothing actually happens on the registration page. I'm not using the plugin mentioned by Mark earlier and as far as I can see no other plugins effect the registration options so I'm confused!
I'm using 'month and name' permalinks. Registration page is at '/register/' with title "Create an Account
Registering for this site is easy, just fill in the fields below and we'll get a new account set up for you in no time."
found the problem – it conflicts with the plugin 'Wordpress Mobile Pack'
Hey Brajesh 🙂
I've download the plug-in…and uploaded it! but it doesn't seem to be functioning :S you can have a look on my site http://9xxssf.info/register
What could be the issue? is it because of the theme am using? "BuddyPress Social Theme" …or does this ONLY work on the default theme? any help is appreciated 🙂
Thank you!
Hi Daniel,
Thanks for the comment.
I just checked your site. The plugin is working but there is a problem as the analytics code from your site is automatically appended to the results.
I am not sure which plugin you are using, but the code which is appended looks like this
http://pastebin.com/WURFEic7
Please disable that plugin, as it is causing the json parse issue for result, and availability checker will work.
You are a life saver indeed 🙂 …apparently those codes are automatically embedded by my hosting to check the site's stats! i just disabled the code and now its working fine for me.
Thanx man!
Can this be modified for a singular install?
Figured it out. Had to parse the
jsonString
instead ofresponse
Thanks a million! This works great on the latest releases of BuddyPress (1.2.8) and WordPress (3.1) I'm on single install not Multi-Site and works perfect.
Thanks for the comment Alex. Glad it is working 🙂
Hi 🙂
First, thanks for this plugin. This is exactly what I was looking for. I'm using WP 3.1.1 with the Atahualpa theme (not BP). When I went to activate the plugin I got this error:
Fatal error: Call to undefined function bp_is_page() in /home1/eurocoop/public_html/atascocitapetfinder/wp-content/plugins/bpdev-username-availability-checker/username-availability-checker.php on line 22
I don't really know much about PHP, so I was hoping you could give me an idea of how to fix this.
Thanks!!
Hi Lauren,
The plugin was created for BuddyPress. That's why the error is coming. I will update it this weekend for wordpress/wordpress multisite without bp installation.
Hello Brajesh,
This is a great plugin – I downloaded the latest version to use on wordpress site. But it gives me an error saying –
Fatal error: Call to undefined function bp_is_page() in /home1/xxxxx/public_html/mydomainfolder/wp-content/plugins/bpdev-username-availability-checker/username-availability-checker.php on line 22
I do not want to use buddypress and want to use this plugin just for the basic wordpress installation.
Please advice
Thanks
Hi Brajesh,
question re username check and WP 3.1 (actually, 3.1.2). In your code you have line "include_once(ABSPATH.WPINC."/registration.php");
registration.php was deprecated in WP 3.1.
question is whether your code is really still working?
I'm curious, because I use plugin xtra signup, which includes your code and there it is not working anymore, ajax loader continues spinning and I assume that this is because of registration.php.
maybe you could point on some solution?
thanks.
one more question, don't you actually have plans to add email checker and password strength meter to your plugin?
both are in xtra signup and one of them is written by 3rd author for sure 🙂
Hi James,
The plugin works for BuddyPress 1.2.8+ wordpress 3.x.
Since I already show a plugin/code related to strength checker, I did not add it. BP Xtra signup is by Boris, and I am sure He is very helpful person. Did you mention the issue on Bp forums?
hi Brajesh,
sorry for messing in your comments. just checked your plugin with latest wp and bp, works excellent as always, what means that author of the xtra signup modified your code not in the best way.
p.s. I should always use checked sources 🙂
Hi James,
Thanks for confirming.
The problem with xtra signup may be because of some other code.
hi again Brajesh,
wp and bp have this limit of 4 characters for username. As I see, it is in your/this plugin too.
Is there any easy way to change this limit to 3 characters from your plugin, or only extarnal function would work (maybe you have one)?
thanks a lot!
Its even invisible in my plugin directory in WP… 🙁
i cant activate it…
Hi Eternity,
Have you uploaded the plugins to wp-content/plugins. If yes, please go to
Dashboard->Plugins->Installed->All(on the top) and search for
"User Name Availability Checker for wordpress/buddypress"
This should be available there. I just checked on wp3.2 to confirm it.
works great.
how to allow "_" as twitter allow for user names?
need to change in plugin or in bb-core-signup.php ?
and the same about number of letters allowed…
Hi
where we put the "javascript code"?
thanks
Hi , thanks for this plugin
I use wp 3.2.1 ( not MU and not Buddy press ) , this plugin not work in Wp ?
error when active plugin :
Fatal error: Call to undefined function bp_is_page() in /home/webir/domains/1web.ir/public_html/wp-content/plugins/bpdev-username-availability-checker/username-availability-checker.php on line 22
please repair this error and work in wp
thanks again
Good Luck
Hi Ali,
This plugin does require BuddyPress(Mu is not required). That's why you are seeing this error. Please remind me this weekend and I will fix it for wp 🙂
It's have a error on wp. 3.3
To erase it go to the ftp control panel > wp-content > plugins > bpdev-username-availability-checker
And Delete this folder to end this error.
Just confirming that the plugin works fine with wordpress 3.3+BuddyPress 1.5.2. I did not see any issue.
Thanks for checking with BuddyPress 1.5.x – I'll give it a try next week as we're expecting a lot of new member registrations the following week.
This is very handy code and should be in core. Brajesh, have you made any headway with having your code added to the core?
Hi,
Thank you for a great plugin. I have little question. I am using this with Qtranslate. Each time I call qtrans_getlanguage() inside the file, it refers only to the default one. Do you know why? I am calling that the qtrans function to do different things depending on the language employed.
Thank you.
Hello,
Thank you for a great script.
I noticed that if I am using it with qTranslate, I am unable to print strings in different languages. For example,
$msg=array("code"=>"taken","message"=>__("[:en]This usename is taken, please choose another one.[:ar]some_arabic_text","buddypress"));
will always print the English string even if I am in the Arabic section.
Your help is appreciated.
You wouldn't happen to have code to only accept certain e-mail types would you? i.e., edu e-mail addresses? I want to incorporate buddypress into a site, but only allow teachers and such to join the community. It seems like this code could be tweaked in some way to verify e-mail addresses, but I am no PHP wiz. Could you help me? Thanks!
You wouldn’t happen to have code to only accept certain e-mail types would you? i.e., edu e-mail addresses? I want to incorporate buddypress into a site, but only allow teachers and such to join the community. It seems like this code could be tweaked in some way to verify e-mail addresses, but I am no PHP wiz. Could you help me? Thanks!
HI ADDesigns,
Please check back tomorrow. I will be releasing a plugin to allow registration from only certain domain/email or extension. That should help you.
Hey, great! I can only get it by paying $30? What if it doesn't play nice with my site and plugins =/
Hi AD,
1. I haven't released it yet. will be doing today.
2. If it doe not work, you are entitled to the full refund without any question.
Hope that helps
Regards
Brajesh
Oh!! A restriction on email domains! Perfect! Will this work with Membership plugin by WPMUdev.org do you know?
On another note, is it possible to remove the restriction that forces only lowercase letters and numbers? I would want firstname.lastname to be ok.
Thanks again!!!
To change which characters are valid in the username field, I changed this:
preg_match( "/[a-z0-9]+/", $user_name, $maybe );
to this:
preg_match( "/[A-Za-z0-9.-]+/", $user_name, $maybe );
to allow uppercase and . -, but if the page is invalidated because of another field, the username field comes back invalidated as well ( with the BP rule of lowercase and numbers only). Anyone know how to tweak the code so that this first field stays validated?
Thanks!
This will actually invalidate each time by itself as well – though the script validates on the page, it is invalidated when the form is posted.
Hi Andrew,
There have been some changes in current version of wordpress and now validate_username returns false for the upcase.
Here is a solution.
http://pastebin.com/TZ6wjRR1
please put that in bp-custom.php and it will fix the issue.
Hi again,
I ended up changing the preg_match in your code and the one in bp-members-signup.php following this link: http://osdir.com/ml/general/2010-06/msg36677.html since I wanted to allow more than just upper and lowercase. Thanks for your help again!
Pingback:11 Quality Ajax Check Username Availability Example | Best Smashing
Pingback:WordPress-Blog zur BuddyPress-Community erweitern – Teil 4: BuddyPress-Plugins (1) | Geld-online-Blog
nice plugin…
Hi Brajesh, Another fantastic plugin.
One question with this one, I can get it to check user names when my Buddypress Sign up page slug is http://www.mysite.com/register/ but not when it is http://www.mysite.com/signup/
Is there a piece of the code that I can change for this to be effective while not using the default register slug?
Cheers,
Kinsleigh
Hey BRAJESH very nice plugin. Please advice on what i need to do to make mine work. Have followed all the steps but seems to be a problem with css
Hi Brajesh,
Please help me with a similar plugin like this, that would look for Blog Names availability.
say- Blog Name Availability Checker for wordpress/buddypress
Searching the whole internet gave me only one clue here..
http://wordpress.org/support/topic/plugin-networks-for-wordpress-subdomain-name-availability-checker
I am also using "Network for WordPress" and need a "Subdomain Blog name availability checker"
It says we can use "domain_exists" function (built in to WP) to check whether a combination of domain and path is available. It needs the network ID as a parameter, so we'll have to get IDs for the networks we want to check. A straightforward query against the wp_site table.
Hi, Brajesh could you throw some more light on it and If possible you can come up with a new plugin. Understanding php code is like understanding Chinese for me.
When I use this plugin in the current version of Buddypress all I get is a Red Bar. Am I doing something wrong or is it possible to get an updated version if it's broken in the current buddypress?
WP Version 3.4.2
BP Version 1.6.1
Plug-in Version 1.0.1
Thanks for the Plug-in Brajesh. Looks like a nice feature but can't get it work as advertised. On the Registration Page, I get a Red Bar underneath the username field if it's already taken. No text in the Br. Also when I enter a different username (which has not been taken), the Red Bar stays?
Any Ideas?
Many Thanks.
Bernhard
Hi Bernhard,
I have just uploaded version 1.0.3 which will work. Please upgrade.
Regards
Brajesh
Fantastic. Download and Installed the updated plug-in and it's working fine. Thank you
Brajesh!
Im getting 404 page not found on the download page, anyone else?
Hi Tylor,
I have updated the links now.
Please download and let me know if it works or not.
Thanks
Brajesh
@all whose comments I could not reply/Publish earlier. My sincere apologies guys. Was not very active last year and many comments remained unpublished. been publishing them from last couple of days as I am actively back on BuddyDev.
If any of you are still working with BuddyPress and want these things, please just reply and i will have them.
Hi,
This plugin and BuddyPress notifications widget has some conflicts with this autocomplete jquery script I use. https://github.com/devbridge/jQuery-Autocomplete.
1. username-availability-checker will not display any message, stuck at the spinning icon
2. notifications widget will not clear the notification, stuck at the clearing… message.
Hope you can help me solved this thank you very much!
Hi Jason,
Thank you for letting us know.
We will be testing and letting you know tomorrow in more details.
Hi Brajesh, thank you so much for your time looking at this. Really love these 2 plugins you created, appreciate your effort. Hope everything can be resolved.
Hi Jason,
Just tested it today with the jquery auto complete plugin. It is working fine for me.
There are chances that the autocomplete is inadvertently applied on the same element as our username checker causing conflict. Can you please point me to your site where you are facing the problem.
Hi Brajesh,
Thanks for the plug in, it is great.
Not sure if it is another plugin conflict but it doesn
t check the usernames anymore.
t work.I turned off other plugins but it doesn
I could see it calling AJAX thru Console but the JSON don`t returns.
Could you please take a look at http://www.sosaqui.com/cadastro/ ?
ALl the best,
Jose Geraldo
Hi Jose,
My apologies for the delayed reply.
Is that plugin still active, I don't see the files loaded on your registration page. Can you please activate and let me know, I will do a quick test and will let you know.
Thanks
Brajesh
Hi Brajesh,
Since bp_is_page is deprecated since version 1.7, I though we could update the 2 instances of bp_is_page(BP_REGISTER_SLUG) to an alternative such as is_page(my_page_ID). What do you think?
Cheers,
Vernon
That's a good find Vernon 🙂 Need to update it. On it tomorrow 🙂
If I ignore the error message displayed by the username availability checker and continue completing the form, I seem to be able to register with a username that has upper case letters in it.
Is this expected behaviour?
Pingback:1 Jahr My Wireless Life: Learnings aus dem Aufbau einer Online Community
how can I integrate this with your ajax registration plugin?
simply download the plugin version, install it on your site, then activate, that is all.
To test, go to your registration page type any name as username, move to the next field, It will notify you if your username is available or not.
Hi Brajesh,
'Username Availability Checker' doesn't seem to be checking for Capital Letters during its initial 'Username' check. This results in a false "Congrats! The username is available" when filling out the rest of the registration form, and then triggers the "Usernames can only contain lowercase letters (a-z) and numbers." once 'Complete Sign Up" is clicked.
Is there a way to have the plugin 1. check for the capital letters sooner and display the notice immediately? or 2. Somehow force lowercase letters for the Username input field?
The last few updates for this plugin have been excellent, thank you as always!
-Carl
Just amazing!!!
Thank you for giving away such a nice plugin 🙂
How can I get this to work with GravityForm's User Registration addon? thank you