Skip to content
Read For Learn
Read For Learn
  • Database
    • Oracle
    • SQL
  • C
  • C++
  • Java
  • Java Script
  • jQuery
  • PHP
Read For Learn
  • Database
    • Oracle
    • SQL
  • C
  • C++
  • Java
  • Java Script
  • jQuery
  • PHP

Custom Login and Registration form in Ajax

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="https://wordpress.stackexchange.com/questions/78193/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]

Related Posts:

  1. Custom ReCaptcha Login
  2. How to override wp-login.php
  3. WordPress custom login page
  4. Properly customizing login/register form
  5. Deep customization of wp-login.php
  6. A truely custom login page?
  7. Change the default WordPress image on the dashboard login to a custom image [duplicate]
  8. Adding “Remember Me” in custom login
  9. Change the login button on the login page
  10. When adding a custom REST endpoint, where do you put the endpoint function, and where do you put the function registration call?
  11. How build a custom login/register form with error handling?
  12. WordPress AJAX Login Screen
  13. What is the proper way to apply the login_form_bottom filter?
  14. Remove Links from Login page
  15. Getting $comments outside the comment template
  16. setting a specific home page for logged in users
  17. Change “logged in” link in (you must be logged in to post a comment)
  18. Redirect to requested page after (custom) login
  19. How wp_ajax_nopriv since WordPress 3.1
  20. how to use reCaptcha v3 in wordpress custom login form?
  21. Customizing the default logout page of WordPress
  22. How do I remove the eye icon that shows visibility on login screen and reset password screen
  23. How to use get_option() without any filter?
  24. Last time a user logged in
  25. Calling a php file from a javascript file in wordpress
  26. How can I allow access to multiple users, using the same login, at the same time?
  27. Auto redirect after session expire, but only for one user
  28. Adding a login form that concatenates three fields into a username
  29. Load more posts with multiple queries
  30. Viewing checkout page removes fees from mini cart
  31. Load MediaPlayerElement after Infinity Scroll loads more posts
  32. How to add an extra variable to login and authenticate it?
  33. How can I display a PHP foreach loop’s answers by AJAX
  34. Add Custom API Call to WP-Login.php
  35. Login/Logout Session Sharing – Multiple WordPress Installations
  36. Auto login from custom registration form
  37. Custom login with external provider iframe and data object
  38. User can not login
  39. Lost password empty field error redirect to custom login
  40. Custom Log In Screen – Disable password recovery [duplicate]
  41. Multi-site User Sessions
  42. Custom Login Process
  43. Switch between WordPress websites easy for an end user
  44. Lost password and back to blog in same line
  45. WordPress : using AJAX to get posts & Sidebar Content to an external application
  46. I w’d like to know If there are simple solutions to integrate other CMSs to wordpress
  47. Restrict content access to logged in users
  48. Custom login and registration forms
  49. How to create a custom WordPress front page
  50. URL and Site title outputting on Login page
  51. Is it possible to integrate a custom login feature with wordpress?
  52. Open login logo URL in new tab
  53. How to change the login page without a plugin and not only customizing logo and text around the form?
  54. Removing “Failed” query argument upon successful login
  55. Validate user login in php
  56. Removing “There is no account with that username or email address.” error message in “/wp-login.php?action=lostpassword”
  57. No plugin populate user information in to form
  58. how to change the url rediction of the woocommerce login page of the flatsome theme for my own in wordpress?
  59. mailchimp integration on a custom footer
  60. How to change Login default blue admin color?
  61. Latest update broke my custom login CSS
  62. POST 429 Error when trying to place more than 20 images into post at once
  63. Trouble with custom login page
  64. Wrap WordPress Login Form in custom Div
  65. Custom password set/reset link in same URL format as default does’t work
  66. How to submit form data in the same page in WordPress without reloading the page?
  67. Custom login doesn’t stay
  68. Check get_post value after wp-admin login
  69. where can i find the login page in wordpress and add my header to it
  70. Pass the post ID
  71. Unable to show messages using ‘admin_notices’
  72. Show Site Name on WP login screen
  73. Use wp_login_form function to login with a custom user table?
  74. how to manage Session in WordPress using custom login?
  75. Redirect all pages to the custom login page except for the registration page
  76. How to stop login for SPECIFIC users BEFORE a specified date
  77. wp_login_form display no styled form
  78. Must I rewrite the whole login form or can I jsut do a part
  79. Looking for a way to align log in form fields with background image and scale responsively
  80. Media Upload not working after hiding some elements from functions.php
  81. Centering one product on a single page [closed]
  82. Add Member’s birthdate from Backend and shows it on frontside [closed]
  83. Remove link from page title
  84. Menu not appearing in custom theme
  85. Custom Post Types database persistance. Why not?
  86. Many Rewrite Parameters/Rules
  87. Adding other links on header than LinkedIn, Facebook, Youtube etc
  88. Pagination with custom field
  89. How can i display custom menu in sidebar?
  90. Is there a hack for using is_page() within the function.php file?
  91. Custom select query two tables by a meta key
  92. How to have multiple WordPress Menus
  93. Can readers download zip files from WordPress sites?
  94. Make tag archive display post are ordered by post format
  95. Create a custom admin panel
  96. Can’t add classes using jQuery from a JSON string with get_body_class()
  97. How to customize a site hosted on wordpress.com locally [closed]
  98. Help customising admin bar, removing buddypress links from dropdown
  99. how to add wp-user fields to front-end form
  100. Let author add field to metabox by pressing a button
Categories customization Tags ajax, customization, login, wp-login-form
How to disable WordPress trackbacks?
Show Welcome Panel on Dashboard for every user

Recommended Hostings

Cloudways: Realize Your Website's Potential With Flexible & Affordable Hosting. 24/7/365 Support, Managed Security, Automated Backups, and 24/7 Real-time Monitoring.

FastComet: Fast SSD Hosting, Free Migration, Hack-Free Security, 24/7 Super Fast Support, 45 Day Money Back Guarantee.

Recent Added Topics

  • Bug in translation system: load_theme_textdomain() returns true, files are available and accessible but the language defaults to english
  • Custom Elementor controls not appearing in the widget Advanced tab using injection hooks
  • Get the name of the template/*html file used
  • Trying to Add Paging to Single Post Page
  • Sharing media files between live and staging servers
  • How to display the description of a custom post type in the dashboard?
  • Critical error on image display
  • Copying WP data and files into new install?
  • How to determine the DirectAdmin WordPress backup date?
  • How to get list of ALL tables in the database?
© 2026 Read For Learn
  • Database
    • Oracle
    • SQL
  • algorithm
  • asp.net
  • assembly
  • binary
  • c#
  • Git
  • hex
  • HTML
  • iOS
  • language angnostic
  • math
  • matlab
  • Tips & Trick
  • Tools
  • windows
  • C
  • C++
  • Java
  • javascript
  • Python
  • R
  • Java Script
  • jQuery
  • PHP
  • WordPress