Oggi vediamo come creare un modulo in JavaScript per la registrazione ed il Login in WordPress e disegnato per Bootstrap versione 4. Come funzioni supplementari ho inserito la possibilità per l’utente di ricevere una email di conferma di avvenuta registrazione.
Ho anche inserito la possibilità di ripristinare la password con una a 6 caratteri generata da WordPress e che verrà inviata alla email dell’utente ogni qualvolta ne richieda una.
Il bello di questo modulo di registrazione è che avviene tutto in JavaScript ed è facile per voi anche da “modellare” in base alle vostre esigenze.

wp-arl

Partiamo creando una nuova cartella dentro al tema e la chiameremo “inc” e poi proseguiamo inserendo come prima cosa il codice HTML necessario per inserire le voci “Login”, “Registrati” e “Logout”.
Creiamo un file a parte rinominandolo register.php, che conterrà al suo interno questo codice e lo inseriamo dentro la cartella “inc”:

Come potete vedere vi saranno 2 modal da inserire, ora le creeremo ma in 2 file separati chiamati form-login.php e form-register.php, non sono altro che 2 form separati, uno appunto per la parte del Login ed uno invece per la registrazione.

Creiamo ora un nuovo file form-login.php e lo inseriamo dentro la cartella “inc”, il codice per il form login è il seguente:

Ora creiamo il codice per il form registrazione, sempre dentro la cartella “inc” e lo chiamiamo form-register.php il codice è il seguente:

Abbiamo creato al momento i 2 form, ora, sempre dentro la cartella “inc” andiamo ad inserire i file per la convalida dei 2 form e lo chiamiamo register-functions.php, il codice sarà il seguente:

Se notate bene, nel file register-functions.php dovrete andare alla riga numero 15 e cambiare nel wp_register_script la vocina “themename-jquery” dentro all’array. Questa è una sicurezza maggiore, in quanto grazie a questa funzione, dico a WordPress di aspettare che sia caricato jQuery nel mio sito prima di procedere con le chiamate Ajax.

Ora ci occupiamo della parte JavaScript, quindi, se non avete già una cartella “js” nel vostro tema, createne una ed inserite questo file che chiamerete registration.js

Abbiamo quasi finito! Ora dobbiamo includere i files nel tema e partiamo con l’includere il file register-functions.php nel vostro file functions.php

Bene, ora non resta altro che inserire le 2 modal dei 2 form, registrazione e login dentro ad ogni pagina del sito, per questo è bene inserire il tutto nel footer.php del vostro tema:

Fatto questo, avrete un form per il login e la registrazione, completo e compatibile con la più recente versione di Bootstrap, ovvero la versione 4.

Per chi volesse abbellirlo, nel codice è presente anche un loader carino. Questo è il CSS che ho utilizzato:

Se vi interessa ho sviluppato anche un plugin con circa lo stesso codice, ma che vi offre anche la possibilità, tramite un pannello di opzioni, di escludere il CSS di BootStrap e di scegliere la posizione del menu login/Registrati.

Potete scaricare gratuitamente il plugin a questo link, finché WordPress.org non mi accetterà il plugin 🙂 Come promesso eccovi qua il link alla repository di WordPress: WP Ajax Register Login