Custom Login and Registration form in Ajax olatechproApril 4, 20233 Views How to create the custom login/Registration form using AJAX. Post Views: 3 Related postsGet rid of this Strict Standards warningWooCommerce: get_current_screen not working with multi languageCan’t login on WordPressForce HTTPS using .htaccess – stuck in redirect loopWordPress: Ajax not working to insert, query and result dataHow Can I pass an image file to wp_handle_upload?
Here is a simple shortcode that gets the job done: add_shortcode('ajax_login','ajaxlogin_shortcode_handler'); function ajaxlogin_shortcode_handler($atts,$content=null){ if (is_user_logged_in()) return; $retval = '<p id="message" style="color:red"></p>' .wp_login_form(array('form_id' => 'ajaxloginform','echo' => false)). '<div id="login-result" style="position:absolute; top:300px; left: 670px;"> <img src="path/ajax-loader.gif"/> </div>'; $js = <<<JS <script type="text/javascript"> jQuery(document).ready(function($){ $("#ajaxloginform").click(function() { // turn loading screen on $('#login-result').toggle(); //get foem data var input_data = $('#my-login-form').serialize(); //make ajax call $.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)) { $('#message').html("<?php _e('Your login credentials is not correct. Please try again.'); ?>"); }else { // login success. redirect users to some page. //$(location).attr('href', '/my-account/'); //or reload the same page location.reload(); } } }); // turn loading screen off $('#login-result').toggle(); // prevent actual submission of form return false; }); }); </script> JS; //enqueue jquery if its not already loaded wp_enqueue_script('jquery'); return $retval .$js; } Usage: [ajax_login] Log in to Reply
Here is a simple shortcode that gets the job done:
Usage:
[ajax_login]