Inicio de sesión de WordPress en jQuery Popup – ¿Cómo validar el inicio de sesión con jQuery Ajax?

Tengo el formulario de inicio de sesión de WordPress funcionando en el front-end de mi sitio web, para permitir que mis usuarios inicien sesión sin tener que visitar wp-login.php o abandonar el “tema” o el sitio web.

Si vas a http://westendmediacentre.com/dev y haga clic en iniciar sesión, puede ver que tengo el formulario que aparece dentro de una ventana emergente de jQuery. Mi código para esto es el siguiente:

Código de formulario:

<div class="login-form">
      <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
        <input type="text" name="log" id="log" value="Username<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" onclick="this.value="";" onblur="this.value=!this.value?'Username':this.value;"/>
        <input type="password" name="pwd" id="pwd" value="Password" size="20" class="login-fields" onclick="this.value="";" onblur="this.value=!this.value?'Password':this.value;"/>
        <input type="submit" name="submit" value="Login" class="login-button" />
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
      </form>
</div>

jQuery:

$('.button-login').click(function() {
    $('.login-box').fadeIn('slow', function() {
    // Animation complete
    });
    $(".login-box").css({'z-index' : '10000'});
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").css({'z-index' : '1'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.login-box-close').click(function() {
    $('.login-box').fadeOut('fast', function() {
    // Animation complete
    });
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
});

Esto funciona perfectamente, sin embargo, si intenta iniciar sesión con algunas credenciales incorrectas, será redirigido a una página de WordPress que le dará el error.

Lo que me gustaría hacer es que estos errores aparezcan dentro de mi ventana emergente jQuery, de modo que cuando intente iniciar sesión con credenciales incorrectas, aparezca un mensaje de error arriba o debajo del formulario, en lugar de redirigir a otra página con el error. se muestra allí.

Intenté seguir este tutorial, sin embargo, no funcionó bien con mi código existente: http://www.tutorialstag.com/custom-wordpress-login-sin-usar-un-complemento.html

Agradecería si alguien pudiera publicar una solución de trabajo

Esto se trata de la estructura de wordperess, en primer lugar, debe saber que incluso si proporciona credenciales de inicio de sesión correctas o incorrectas, su estructura redirige al usuario a wp-login.php (debido a)
< ?php echo get_option('home'); ?>/wp-login.php línea (quiero decir que solo está publicando su nombre de usuario y contraseña en wp-login.php)
Y luego, si la información proporcionada es correcta, wordpress nuevamente redirige al usuario a la página de inicio de inmediato; de lo contrario, muestra un error (con efecto de sacudida), puede encontrar todas estas acciones en el archivo wp-login.php.
Hay dos opciones diferentes que puede utilizar.

• Puedes hackear el archivo wp-login.php como
  si un usuario no proporcionó el nombre de usuario/contraseña correctos, permítale redirigir de nuevo a http://www.westendmediacentre.com/dev/
• Puede construir su propio mecanismo de inicio de sesión con la validación de Ajax (es decir, debe preparar un archivo php para la conexión a la base de datos y recuperar el nombre de usuario y la contraseña de la base de datos y enviar los resultados a su sistema de inicio de sesión)

Si selecciona la segunda forma, puede controlar este correo. Eso es muy útil.

NO edite ningún archivo principal si es posible. Te arrepentirás de eso más tarde.

Si tuviera que escribir un complemento y el complemento estuviera manejando su ventana emergente jQuery, entonces podría hacer esto:

Para hacer un formulario de inicio de sesión, puede mirar este complemento:
http://wordpress.org/extend/plugins/sidebar-login/

Entonces solo tendría la mayor parte de esa lógica en un archivo PHP en el que se publicaría su secuencia de comandos AJAX. Si el inicio de sesión falla, los datos devueltos del archivo PHP se enviarán a su secuencia de comandos AJAX y estará bien.

puede intentar usar el complemento de WordPress a continuación, lo que facilitaría mucho su trabajo

http://wordpress.org/extend/plugins/simplemodal-login/

con un poco de css puedes hacer que coincida con tu tema actual

Te estás perdiendo esta parte del tutorial.

$("#submitbtn").click(function() {

    $('#result').html('<img src="https://stackoverflow.com/questions/8021309/<?php bloginfo("
    template_url '); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_login_form').serialize();
    $.ajax({
        type: "POST",
        url: "<?php echo "
        http: //" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",  
        data: input_data,
        success: function(msg) {
            $('.loader').remove();
            $(' 
<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
        }
    });
    return false;

});