wordpress ajax login without plugin

most of the ajax wp-login plugins out there are offered as widgets. There are times when we we want a simple and encapsulated solution within the template files. All the javascript is encapsulated within the sidebar.php for example and we don’t need to clutter our plugin directory. This should be easily doable but I couldn’t find any quick snippets in google. perhaps most people were lazy and went for the plugin solution.

In sidebar.php for example

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#my-submit").click(function() {
// turn loading screen on
jQuery('#login-result').toggle();
var input_data = jQuery('#my-login-form').serialize();
jQuery.ajax({
type: "POST",
url: "<?php echo site_url('wp-login.php','login_post'); ?>",
data: input_data,
success: function(msg) {
// if login incorrect, wordpress will redirect user to its own login form. We scan for an error term.
var reg1 = /login_error/g;
if (reg1.test(msg)) {
jQuery('#message').html("<?php _e('Your login credentials is not correct. Please try again.'); ?>");
}
else {
// login success. redirect users to some page.
jQuery(location).attr('href', '/my-account/');
}
}
});
// turn loading screen off
jQuery('#login-result').toggle();
// prevent actual submission of form
return false;
});
});
</script>

And the form can be as simple as

<form name="login-form" id="my-login-form" style="padding-left: 60px;">
<p id="message" style="color:red"></p>
<label style="padding-right:10px;">Username</label><input type="text" name="log" id="my-user-login" value="<?php if ( isset( $user_login) ) echo esc_attr(stripslashes($user_login)); ?>" />

<label style="padding-right:10px;">Password</label><input type="password" name="pwd" id="my-user-pass" value="" />

<div style="float:left;">
<label><input name="rememberme" type="checkbox" id="my-rememberme" value="forever" /><?php _e('Remember me', 'woocommerce'); ?></label>
</div>
<div style="float:left;padding-left: 30px;">
<a href="<?php echo esc_url( wp_lostpassword_url( home_url() ) ); ?>"><?php _e('Lost Password?', 'woocommerce'); ?></a>
</div>
<div style="clear:both; padding: 20px 90px;">
<input type="submit" name="wp-submit" id="my-submit" value="<?php _e('Log In'); ?>"/>
</div>
<?php wp_nonce_field('my-nonce'); ?>
<input type="hidden" name="testcookie" value="1" />
<!-- this is your img loader -->
<div id="login-result" style="position:absolute; top:300px; left: 670px;">
<img src="/wp-content/plugins/nextgen-gallery/images/ajax-loader.gif"/>
</div>
</form>

Author: bpeh

Bernard Peh is a great passioner of web technologies and one of the co-founder of Sitecritic.net Website Design and Reviews. He works with experienced web designers and developers everyday, developing and designing commercial websites. He specialises mainly in SEO and PHP programming.

4 thoughts on “wordpress ajax login without plugin”

  1. I don’t understand what is problem with plugins. I believe things like add-ons of this type SHOULD be exclusively put into plugins, to separate the logical layers. Such a functionality should not be embedded to a particular template, because its sense is not to add something visual to the template, but to add a general functionality, no matter which visual style of the template I decide to use.

    The fact that there are xxl-huge templates that look almost like an entire operating system embedded in the template doesn’t change nothing on the fact that it contradicts the principle of keeping stuff logically layered. Few lines of a code adding some functionality mediated via a plugin that can be turned on and off, is virtually the same as adding such lines directly into some PHP file of the template. Why there should not be 100 plugins, each adding a very small functionality? Problems arise usually not because of many plugins used simultaneously, but because many plugins do not make just the simple task they should do, but rather they try to do too many things together. Multiple plugins trying to do the same will of course collide sometimes.

    What could help is that “mother” plugins could contain child (sub)plugins each doing some functionality, with the mother metaplugin just adding a GUI for setting logically complementary plugins at one page, for example. But these child plugins should be able to work also separately. Only the mother plugin could tag (mark) these child plugins as its dependency, so if user decides to uninstall the child(nested) plugin without removing the mother plugin, a warning should be issued…

  2. May I simply say what a relief to find someone that really understands what they’re talking about
    on the net. You certainly understand how to bring
    an issue to light and make it important. More and more
    people really need to check this out and understand this side of
    your story. I was surprised you are not more popular because
    you definitely possess the gift.

    Have a look at my web site :: quill coupon

Comments are closed.