BuddyDev

Search

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.

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.


//return success/error and info
function bpdev_ua_check_username(){
include_once(ABSPATH.WPINC."/registration.php");//we need o include this other wise username_exists will not favor us :)
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"));
else if(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


/* 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 : http://buddydev.com/plugins/bpdev-username-availability-checker/

How to Install:

  • Download http://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 :D

Looking forward to hear your thoughts now:)

Get latest WordPress & BuddyPress tutorials, news and tricks in your inbox.

We send out a lovely email newsletter with the most popular stories. Be a part of it.

89 Responses to Creating a BuddyPress/WordPress Username availability checker for your site

  • @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!

  • 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

  • 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.

  • 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…

  • same error as Becky

  • 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!

  • 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?

  • 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.

  • 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!

  • 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

  • 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?

  • @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 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.
    I turned off other plugins but it doesn`t work.

    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

  • 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?

Leave a Reply

Are you looking for support?

Please join BuddyDev Premium Club to get timely support. At the moment, We are unable to provide much support in comments. By Joining BuddyDev Premium Club, you will get guaranteed support(and we have 30 days money back guarantee too).

Your email address will not be published. All the fields marked as * are required.


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>