Come visualizzare il modulo di registrazione utente di WordPress nella parte anteriore del sito Web?

Come visualizzare il modulo di registrazione utente di WordPress (il modulo che appare nella pagina "www.mywebsite.com/wp-register.php") nella parte frontale del mio blog?

Ho personalizzato il modulo di registrazione. Ma non so come chiamare quel modulo nella pagina del front-end. Qualsiasi supporto sarà davvero di grande aiuto.

Grazie in anticipo. :)

Il processo prevede 2 passaggi:

1. mostra il modulo frontend
2. salva i dati al momento dell'invio

Ci sono 3 diversi approcci che mi vengono in mente per mostrare il frontend:

• usa il modulo di registrazione integrato, gli stili di modifica, ecc. per renderlo più "frontend like"
• usa una pagina / post di WordPress e visualizza il modulo usando un shortcode
• utilizzare un modello dedicato non collegato a nessuna pagina / post, ma chiamato da un URL specifico

Per questa risposta userò quest'ultima. Le ragioni sono:

• l'uso del modulo di registrazione integrato può essere una buona idea, le personalizzazioni approfondite possono essere molto difficili utilizzando il modulo integrato e se si desidera anche personalizzare i campi del modulo, il dolore aumenta
• usare una pagina di WordPress in combinazione con uno shortcode, non è così affidabile, e penso anche che shorcodes non debba essere usato per funzionalità, solo per formattazione e simili

1: crea l'URL

Tutti noi sappiamo che il modulo di registrazione predefinito di un sito WordPress è spesso un obiettivo per gli spammer. L'uso di un URL personalizzato è di aiuto per risolvere questo problema. Inoltre, voglio anche utilizzare un URL variabile , ovvero l'URL del modulo di registrazione non dovrebbe essere sempre lo stesso, questo rende la vita degli spammer più difficile. Il trucco è fatto usando un nonce nell'URL:

/**
* Generate dynamic registration url
*/
function custom_registration_url() {
  $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
  return home_url( $nonce );
}

/**
* Generate dynamic registration link
*/
function custom_registration_link() {
  $format = '<a href="%s">%s</a>';
  printf(
    $format,
    custom_registration_url(), __( 'Register', 'custom_reg_form' )
  );
}

L'uso di queste funzioni è facile visualizzare nei modelli un collegamento al modulo di registrazione anche se è dinamico.

2: Riconosci l'URL, primo stub di Custom_Reg\Custom_Regclasse

Ora dobbiamo riconoscere l'URL. Per lo scopo inizierò a scrivere una lezione, che sarà terminata più avanti nella risposta:

<?php
// don't save, just a stub
namespace Custom_Reg;

class Custom_Reg {

  function checkUrl() {
    $url_part = $this->getUrl();
    $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
    if ( ( $url_part === $nonce ) ) {
      // do nothing if registration is not allowed or user logged
      if ( is_user_logged_in() || ! get_option('users_can_register') ) {
        wp_safe_redirect( home_url() );
        exit();
      }
      return TRUE;
    }
  }

  protected function getUrl() {
    $home_path = trim( parse_url( home_url(), PHP_URL_PATH ), '/' );
    $relative = trim(str_replace($home_path, '', esc_url(add_query_arg(array()))), '/');
    $parts = explode( '/', $relative );
    if ( ! empty( $parts ) && ! isset( $parts[1] ) ) {
      return $parts[0];
    }
  }

}

La funzione guarda la prima parte dell'url dopo home_url(), e se corrisponde al nostro nonce restituisce VERO. questa funzione verrà utilizzata per verificare la nostra richiesta ed eseguire le azioni necessarie per visualizzare il nostro modulo.

3: la Custom_Reg\Formclasse

Ora scrivo una classe, che sarà responsabile di generare il markup del modulo. Lo userò anche per memorizzare in una proprietà il percorso del file modello che dovrebbe essere usato per visualizzare il modulo.

<?php 
// file: Form.php
namespace Custom_Reg;

class Form {

  protected $fields;

  protected $verb = 'POST';

  protected $template;

  protected $form;

  public function __construct() {
    $this->fields = new \ArrayIterator();
  }

  public function create() {
    do_action( 'custom_reg_form_create', $this );
    $form = $this->open();
    $it =  $this->getFields();
    $it->rewind();
    while( $it->valid() ) {
      $field = $it->current();
      if ( ! $field instanceof FieldInterface ) {
        throw new \DomainException( "Invalid field" );
      }
      $form .= $field->create() . PHP_EOL;
      $it->next();
    }
    do_action( 'custom_reg_form_after_fields', $this );
    $form .= $this->close();
    $this->form = $form;
    add_action( 'custom_registration_form', array( $this, 'output' ), 0 );
  }

  public function output() {
    unset( $GLOBALS['wp_filters']['custom_registration_form'] );
    if ( ! empty( $this->form ) ) {
      echo $this->form;
    }
  }

  public function getTemplate() {
    return $this->template;
  }

  public function setTemplate( $template ) {
    if ( ! is_string( $template ) ) {
      throw new \InvalidArgumentException( "Invalid template" );
    }
    $this->template = $template;
  }

  public function addField( FieldInterface $field ) {
    $hook = 'custom_reg_form_create';
    if ( did_action( $hook ) && current_filter() !== $hook ) {
      throw new \BadMethodCallException( "Add fields before {$hook} is fired" );
    }
    $this->getFields()->append( $field );
  }

  public function getFields() {
    return $this->fields;
  }

  public function getVerb() {
    return $this->verb;
  }

  public function setVerb( $verb ) {
    if ( ! is_string( $verb) ) {
     throw new \InvalidArgumentException( "Invalid verb" );
    }
    $verb = strtoupper($verb);
    if ( in_array($verb, array( 'GET', 'POST' ) ) ) $this->verb = $verb;
  }

  protected function open() {
    $out = sprintf( '<form id="custom_reg_form" method="%s">', $this->verb ) . PHP_EOL;
    $nonce = '<input type="hidden" name="_n" value="%s" />';
    $out .= sprintf( $nonce,  wp_create_nonce( 'custom_reg_form_nonce' ) ) . PHP_EOL;
    $identity = '<input type="hidden" name="custom_reg_form" value="%s" />';
    $out .= sprintf( $identity,  __CLASS__ ) . PHP_EOL;
    return $out;
  }

  protected function close() {
    $submit =  __('Register', 'custom_reg_form');
    $out = sprintf( '<input type="submit" value="%s" />', $submit );
    $out .= '</form>';
    return $out;
  }

}

La classe genera un markup del modulo eseguendo il loop di tutti i campi aggiunti createmetodo di chiamata su ciascuno di essi. Ogni campo deve essere un'istanza di Custom_Reg\FieldInterface. Un ulteriore campo nascosto viene aggiunto per la verifica nonce. Il metodo modulo è "POST" per impostazione predefinita, ma può essere impostato su "OTTIENI" utilizzando il setVerbmetodo. Una volta creato, il markup viene salvato all'interno della $formproprietà dell'oggetto che viene ripetuta dal output()metodo, agganciata 'custom_registration_form'all'amo: nel modello di modulo, semplicemente call do_action( 'custom_registration_form' )genererà il modulo.

4: il modello predefinito

Come ho detto, il modello per il modulo può essere facilmente sostituito, tuttavia è necessario un modello di base come fallback. Scriverò qui un modello molto approssimativo, più una prova di concetto che un modello reale.

<?php
// file: default_form_template.php
get_header();

global $custom_reg_form_done, $custom_reg_form_error;

if ( isset( $custom_reg_form_done ) && $custom_reg_form_done ) {
  echo '<p class="success">';
  _e(
    'Thank you, your registration was submitted, check your email.',
    'custom_reg_form'
  );
  echo '</p>';
} else {
  if ( $custom_reg_form_error ) {
    echo '<p class="error">' . $custom_reg_form_error  . '</p>';
  }
  do_action( 'custom_registration_form' );
}

get_footer();

5: l' Custom_Reg\FieldInterfaceinterfaccia

Ogni campo dovrebbe essere un oggetto che implementa la seguente interfaccia

<?php 
// file: FieldInterface.php
namespace Custom_Reg;

interface FieldInterface {

  /**
   * Return the field id, used to name the request value and for the 'name' param of
   * html input field
   */
  public function getId();

  /**
   * Return the filter constant that must be used with
   * filter_input so get the value from request
   */
  public function getFilter();

  /**
   * Return true if the used value passed as argument should be accepted, false if not
   */
  public function isValid( $value = NULL );

  /**
   * Return true if field is required, false if not
   */
  public function isRequired();

  /**
   * Return the field input markup. The 'name' param must be output 
   * according to getId()
   */
  public function create( $value = '');
}

Penso che i commenti spieghino cosa dovrebbero fare le classi che implementano questa interfaccia.

6: aggiunta di alcuni campi

Ora abbiamo bisogno di alcuni campi. Possiamo creare un file chiamato 'fields.php' in cui definiamo le classi dei campi:

<?php
// file: fields.php
namespace Custom_Reg;

abstract class BaseField implements FieldInterface {

  protected function getType() {
    return isset( $this->type ) ? $this->type : 'text';
  }

  protected function getClass() {
    $type = $this->getType();
    if ( ! empty($type) ) return "{$type}-field";
  }

  public function getFilter() {
    return FILTER_SANITIZE_STRING;
  }

  public function isRequired() {
    return isset( $this->required ) ? $this->required : FALSE;
  }

  public function isValid( $value = NULL ) {
    if ( $this->isRequired() ) {
      return $value != '';
    }
    return TRUE;
  }

  public function create( $value = '' ) {
    $label = '<p><label>' . $this->getLabel() . '</label>';
    $format = '<input type="%s" name="%s" value="%s" class="%s"%s /></p>';
    $required = $this->isRequired() ? ' required' : '';
    return $label . sprintf(
      $format,
      $this->getType(), $this->getId(), $value, $this->getClass(), $required
    );
  }

  abstract function getLabel();
}


class FullName extends BaseField {

  protected $required = TRUE;

  public function getID() {
    return 'fullname';
  }

  public function getLabel() {
    return __( 'Full Name', 'custom_reg_form' );
  }

}

class Login extends BaseField {

  protected $required = TRUE;

  public function getID() {
    return 'login';
  }

  public function getLabel() {
    return __( 'Username', 'custom_reg_form' );
  }
}

class Email extends BaseField {

  protected $type = 'email';

  public function getID() {
    return 'email';
  }

  public function getLabel() {
    return __( 'Email', 'custom_reg_form' );
  }

  public function isValid( $value = NULL ) {
    return ! empty( $value ) && filter_var( $value, FILTER_VALIDATE_EMAIL );
  }
}

class Country extends BaseField {

  protected $required = FALSE;

  public function getID() {
    return 'country';
  }

  public function getLabel() {
    return __( 'Country', 'custom_reg_form' );
  }
}

Ho usato una classe base per definire l'implementazione dell'interfaccia predefinita, tuttavia, è possibile aggiungere campi molto personalizzati implementando direttamente l'interfaccia o estendendo la classe base e ignorando alcuni metodi.

A questo punto abbiamo tutto per visualizzare il modulo, ora abbiamo bisogno di qualcosa per convalidare e salvare i campi.

7: la Custom_Reg\Saverclasse

<?php
// file: Saver.php
namespace Custom_Reg;

class Saver {

  protected $fields;

  protected $user = array( 'user_login' => NULL, 'user_email' => NULL );

  protected $meta = array();

  protected $error;

  public function setFields( \ArrayIterator $fields ) {
    $this->fields = $fields;
  }

  /**
  * validate all the fields
  */
  public function validate() {
    // if registration is not allowed return false
    if ( ! get_option('users_can_register') ) return FALSE;
    // if no fields are setted return FALSE
    if ( ! $this->getFields() instanceof \ArrayIterator ) return FALSE;
    // first check nonce
    $nonce = $this->getValue( '_n' );
    if ( $nonce !== wp_create_nonce( 'custom_reg_form_nonce' ) ) return FALSE;
    // then check all fields
    $it =  $this->getFields();
    while( $it->valid() ) {
      $field = $it->current();
      $key = $field->getID();
      if ( ! $field instanceof FieldInterface ) {
        throw new \DomainException( "Invalid field" );
      }
      $value = $this->getValue( $key, $field->getFilter() );
      if ( $field->isRequired() && empty($value) ) {
        $this->error = sprintf( __('%s is required', 'custom_reg_form' ), $key );
        return FALSE;
      }
      if ( ! $field->isValid( $value ) ) {
        $this->error = sprintf( __('%s is not valid', 'custom_reg_form' ), $key );
        return FALSE;
      }
      if ( in_array( "user_{$key}", array_keys($this->user) ) ) {
        $this->user["user_{$key}"] = $value;
      } else {
        $this->meta[$key] = $value;
      }
      $it->next();
    }
    return TRUE;
  }

  /**
  * Save the user using core register_new_user that handle username and email check
  * and also sending email to new user
  * in addition save all other custom data in user meta
  *
  * @see register_new_user()
  */
  public function save() {
    // if registration is not allowed return false
    if ( ! get_option('users_can_register') ) return FALSE;
    // check mandatory fields
    if ( ! isset($this->user['user_login']) || ! isset($this->user['user_email']) ) {
      return false;
    }
    $user = register_new_user( $this->user['user_login'], $this->user['user_email'] );
    if ( is_numeric($user) ) {
      if ( ! update_user_meta( $user, 'custom_data', $this->meta ) ) {
        wp_delete_user($user);
        return FALSE;
      }
      return TRUE;
    } elseif ( is_wp_error( $user ) ) {
      $this->error = $user->get_error_message();
    }
    return FALSE;
  }

  public function getValue( $var, $filter = FILTER_SANITIZE_STRING ) {
    if ( ! is_string($var) ) {
      throw new \InvalidArgumentException( "Invalid value" );
    }
    $method = strtoupper( filter_input( INPUT_SERVER, 'REQUEST_METHOD' ) );
    $type = $method === 'GET' ? INPUT_GET : INPUT_POST;
    $val = filter_input( $type, $var, $filter );
    return $val;
  }

  public function getFields() {
    return $this->fields;
  }

  public function getErrorMessage() {
    return $this->error;
  }

}

Quella classe, ha 2 metodi principali, uno ( validate) che esegue il ciclo dei campi, li convalida e salva buoni dati in un array, il secondo ( save) salva tutti i dati nel database e invia la password via e-mail al nuovo utente.

8: Utilizzo di classi definite: completamento della Custom_Regclasse

Ora possiamo lavorare di nuovo sulla Custom_Regclasse, aggiungendo i metodi che "incollano" l'oggetto definito e li fanno funzionare

<?php 
// file Custom_Reg.php
namespace Custom_Reg;

class Custom_Reg {

  protected $form;

  protected $saver;

  function __construct( Form $form, Saver $saver ) {
    $this->form = $form;
    $this->saver = $saver;
  }

  /**
   * Check if the url to recognize is the one for the registration form page
   */
  function checkUrl() {
    $url_part = $this->getUrl();
    $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
    if ( ( $url_part === $nonce ) ) {
      // do nothing if registration is not allowed or user logged
      if ( is_user_logged_in() || ! get_option('users_can_register') ) {
        wp_safe_redirect( home_url() );
        exit();
      }
      return TRUE;
    }
  }

  /**
   * Init the form, if submitted validate and save, if not just display it
   */
  function init() {
    if ( $this->checkUrl() !== TRUE ) return;
    do_action( 'custom_reg_form_init', $this->form );
    if ( $this->isSubmitted() ) {
      $this->save();
    }
    // don't need to create form if already saved
    if ( ! isset( $custom_reg_form_done ) || ! $custom_reg_form_done ) {
      $this->form->create();
    }
    load_template( $this->getTemplate() );
    exit();
  }

  protected function save() {
    global $custom_reg_form_error;
    $this->saver->setFields( $this->form->getFields() );
    if ( $this->saver->validate() === TRUE ) { // validate?
      if ( $this->saver->save() ) { // saved?
        global $custom_reg_form_done;
        $custom_reg_form_done = TRUE;
      } else { // saving error
        $err =  $this->saver->getErrorMessage(); 
        $custom_reg_form_error = $err ? : __( 'Error on save.', 'custom_reg_form' );
      }
    } else { // validation error
       $custom_reg_form_error = $this->saver->getErrorMessage();
    }
  }

  protected function isSubmitted() {
    $type = $this->form->getVerb() === 'GET' ? INPUT_GET : INPUT_POST;
    $sub = filter_input( $type, 'custom_reg_form', FILTER_SANITIZE_STRING );
    return ( ! empty( $sub ) && $sub === get_class( $this->form ) );
  }

  protected function getTemplate() {
    $base = $this->form->getTemplate() ? : FALSE;
    $template = FALSE;
    $default = dirname( __FILE__ ) . '/default_form_template.php';
    if ( ! empty( $base ) ) {
      $template = locate_template( $base );
    }
    return $template ? : $default;
  }

   protected function getUrl() {
    $home_path = trim( parse_url( home_url(), PHP_URL_PATH ), '/' );
    $relative = trim( str_replace( $home_path, '', add_query_arg( array() ) ), '/' );
    $parts = explode( '/', $relative );
    if ( ! empty( $parts ) && ! isset( $parts[1] ) ) {
      return $parts[0];
    }
  }

}

Il costruttore della classe accetta un'istanza di Forme una di Saver.

init()il metodo (usando checkUrl()) guarda la prima parte dell'url dopo home_url(), e se corrisponde al nonce giusto, controlla se il modulo è già stato inviato, in tal caso usando l' Saveroggetto, convalida e salva i dati utente, altrimenti stampa semplicemente il modulo .

init()Il metodo attiva anche l'hook dell'azione 'custom_reg_form_init'passando l'istanza del modulo come argomento: questo hook deve essere utilizzato per aggiungere campi, per impostare il modello personalizzato e anche per personalizzare il metodo del modulo.

9: Mettere insieme le cose

Ora dobbiamo scrivere il file del plugin principale, dove possiamo

• richiede tutti i file
• carica il textdomain
• avviare l'intero processo utilizzando la Custom_Regclasse e la chiamata di istanzainit() metodo su di esso usando un hook ragionevolmente precoce
• usa 'custom_reg_form_init' per aggiungere i campi per formare la classe

Così:

<?php 
/**
 * Plugin Name: Custom Registration Form
 * Description: Just a rough plugin example to answer a WPSE question
 * Plugin URI: https://wordpress.stackexchange.com/questions/10309/
 * Author: G. M.
 * Author URI: https://wordpress.stackexchange.com/users/35541/g-m
 *
 */

if ( is_admin() ) return; // this plugin is all about frontend

load_plugin_textdomain(
  'custom_reg_form',
  FALSE,
  plugin_dir_path( __FILE__ ) . 'langs'
); 

require_once plugin_dir_path( __FILE__ ) . 'FieldInterface.php';
require_once plugin_dir_path( __FILE__ ) . 'fields.php';
require_once plugin_dir_path( __FILE__ ) . 'Form.php';
require_once plugin_dir_path( __FILE__ ) . 'Saver.php';
require_once plugin_dir_path( __FILE__ ) . 'CustomReg.php';

/**
* Generate dynamic registration url
*/
function custom_registration_url() {
  $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
  return home_url( $nonce );
}

/**
* Generate dynamic registration link
*/
function custom_registration_link() {
  $format = '<a href="%s">%s</a>';
  printf(
    $format,
    custom_registration_url(), __( 'Register', 'custom_reg_form' )
  );
}

/**
* Setup, show and save the form
*/
add_action( 'wp_loaded', function() {
  try {
    $form = new Custom_Reg\Form;
    $saver = new Custom_Reg\Saver;
    $custom_reg = new Custom_Reg\Custom_Reg( $form, $saver );
    $custom_reg->init();
  } catch ( Exception $e ) {
    if ( defined('WP_DEBUG') && WP_DEBUG ) {
      $msg = 'Exception on  ' . __FUNCTION__;
      $msg .= ', Type: ' . get_class( $e ) . ', Message: ';
      $msg .= $e->getMessage() ? : 'Unknown error';
      error_log( $msg );
    }
    wp_safe_redirect( home_url() );
  }
}, 0 );

/**
* Add fields to form
*/
add_action( 'custom_reg_form_init', function( $form ) {
  $classes = array(
    'Custom_Reg\FullName',
    'Custom_Reg\Login',
    'Custom_Reg\Email',
    'Custom_Reg\Country'
  );
  foreach ( $classes as $class ) {
    $form->addField( new $class );
  }
}, 1 );

10: compiti mancanti

Ora tutto è abbastanza fatto. Dobbiamo solo personalizzare il modello, probabilmente aggiungendo un file modello personalizzato nel nostro tema.

In questo modo possiamo aggiungere stili e script specifici solo alla pagina di registrazione personalizzata

add_action( 'wp_enqueue_scripts', function() {
  // if not on custom registration form do nothing
  if ( did_action('custom_reg_form_init') ) {
    wp_enqueue_style( ... );
    wp_enqueue_script( ... );
  }
});

Usando questo metodo possiamo accodare alcuni script js per gestire la validazione lato client, ad esempio questo . Il markup necessario per far funzionare lo script può essere facilmente gestito modificando la Custom_Reg\BaseFieldclasse.

Se vogliamo personalizzare l'e-mail di registrazione, possiamo usare il metodo standard e avere dati personalizzati salvati su meta, possiamo usarli nell'e-mail.

L'ultima attività che probabilmente vogliamo implementare è impedire la richiesta al modulo di registrazione predefinito, semplice come:

add_action( 'login_form_register', function() { exit(); } );

Tutti i file possono essere trovati in un Gist qui .

TLDR; Inserisci il seguente modulo nel tuo tema, gli attributi namee idsono importanti:

<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
    <input type="text" name="user_login" value="Username" id="user_login" class="input" />
    <input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
    <?php do_action('register_form'); ?>
    <input type="submit" value="Register" id="register" />
</form>

Ho trovato un eccellente articolo di Tutsplus su Come creare un fantastico modulo di registro Wordpress da zero . Questo trascorre molto del suo tempo nello stile del modulo, ma ha la seguente sezione abbastanza semplice sul codice wordpress richiesto:

Passaggio 4. WordPress

Non c'è niente di speciale qui; sono necessari solo due frammenti di WordPress, nascosti nel file wp-login.php.

Il primo frammento:

<?php echo site_url('wp-login.php?action=register', 'login_post') ?>  

E:

<?php do_action('register_form'); ?>

Modifica: ho aggiunto il bit finale in più dall'articolo per spiegare dove inserire i frammenti di codice sopra - è solo un modulo in modo che possa andare in qualsiasi modello di pagina o barra laterale o ricavarne uno shortcode. La sezione importante è quella formche contiene i frammenti sopra e i campi obbligatori importanti.

Il codice finale dovrebbe apparire così:

<div style="display:none"> <!-- Registration -->
        <div id="register-form">
        <div class="title">
            <h1>Register your Account</h1>
            <span>Sign Up with us and Enjoy!</span>
        </div>
            <form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
            <input type="text" name="user_login" value="Username" id="user_login" class="input" />
            <input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
                <?php do_action('register_form'); ?>
                <input type="submit" value="Register" id="register" />
            <hr />
            <p class="statement">A password will be e-mailed to you.</p>


            </form>
        </div>
</div><!-- /Registration -->

Nota che è davvero importante e necessario avere user_logincome namee come idattributo nel tuo input di testo; lo stesso vale per l'input e-mail. Altrimenti, non funzionerà.

E con ciò, abbiamo finito!

questo articolo fornisce un tutorial greate su come creare i propri moduli di registrazione / login / ripristino password front-end.

o se stai cercando un plugin, li ho già usati prima e posso consigliarli:

• Ajax Accedi / Registrati
• Accedi con Ajax

Qualche tempo fa ho creato un sito Web che mostrava un modulo di registrazione personalizzato sul lato frontale. Questo sito Web non è più attivo, ma ecco alcuni screenshot.

Ecco i passaggi che ho seguito:

1) Attiva la possibilità per tutti i visitatori di richiedere un nuovo account tramite Impostazioni> Generale> Opzione Iscrizione. La pagina di registrazione ora appare nell'URL /wp-login.php?action=register

2) Personalizza il modulo di registrazione in modo che assomigli al front-end del tuo sito. Questo è più complicato e dipende dal tema che stai utilizzando.

Ecco un esempio con il ventitreesimo:

// include theme scripts and styles on the login/registration page
add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles');

// remove admin style on the login/registration page
add_filter( 'style_loader_tag', 'user16975_remove_admin_css', 10, 2);
function user16975_remove_admin_css($tag, $handle){
    if ( did_action('login_init')
    && ($handle == 'wp-admin' || $handle == 'buttons' || $handle == 'colors-fresh'))
        return "";

    else return $tag;
}

// display front-end header and footer on the login/registration page
add_action('login_footer', 'user16975_integrate_login');
function user16975_integrate_login(){
    ?><div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>

            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                    <?php get_search_form(); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
        </header><!-- #masthead -->

        <div id="main" class="site-main">
    <?php get_footer(); ?>
    <script>
        // move the login form into the page main content area
        jQuery('#main').append(jQuery('#login'));
    </script>
    <?php
}

Quindi modifica il foglio di stile del tema per far apparire il modulo come desideri.

3) È possibile modificare ulteriormente il modulo modificando i messaggi visualizzati:

add_filter('login_message', 'user16975_login_message');
function user16975_login_message($message){
    if(strpos($message, 'register') !== false){
        $message = 'custom register message';
    } else {
        $message = 'custom login message';
    }
    return $message;
}

add_action('login_form', 'user16975_login_message2');
function user16975_login_message2(){
    echo 'another custom login message';
}

add_action('register_form', 'user16975_tweak_form');
function user16975_tweak_form(){
    echo 'another custom register message';
}

4) Se hai bisogno di un modulo di registrazione front-end, probabilmente non vorrai che gli utenti registrati vedano il back-end quando accedono.

add_filter('user_has_cap', 'user16975_refine_role', 10, 3);
function user16975_refine_role($allcaps, $cap, $args){
    global $pagenow;

    $user = wp_get_current_user();
    if($user->ID != 0 && $user->roles[0] == 'subscriber' && is_admin()){
        // deny access to WP backend
        $allcaps['read'] = false;
    }

    return $allcaps;
}

add_action('admin_page_access_denied', 'user16975_redirect_dashbord');
function user16975_redirect_dashbord(){
    wp_redirect(home_url());
    die();
}

Ci sono molti passaggi, ma il risultato è qui!

Molto più semplice: usa una funzione WordPress chiamata wp_login_form()( pagina Codex qui ).

Puoi creare il tuo plug-in in modo da poter utilizzare uno shortcode nelle tue pagine:

<?php
/*
Plugin Name: WP Login Form Shortcode
Description: Use <code>[wp_login_form]</code> to show WordPress' login form.
Version: 1.0
Author: WP-Buddy
Author URI: http://wp-buddy.com
License: GPLv2 or later
*/

add_action( 'init', 'wplfsc_add_shortcodes' );

function wplfsc_add_shortcodes() {
    add_shortcode( 'wp_login_form', 'wplfsc_shortcode' );
}

function wplfsc_shortcode( $atts, $content, $name ) {

$atts = shortcode_atts( array(
        'redirect'       => site_url( $_SERVER['REQUEST_URI'] ),
        'form_id'        => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in'   => __( 'Log In' ),
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_remember'    => 'rememberme',
        'id_submit'      => 'wp-submit',
        'remember'       => false,
        'value_username' => NULL,
        'value_remember' => false
), $atts, $name );

// echo is always false
$atts['echo'] = false;

// make real boolean values
$atts['remember']       = filter_var( $atts['remember'], FILTER_VALIDATE_BOOLEAN );
$atts['value_remember'] = filter_var( $atts['value_remember'], FILTER_VALIDATE_BOOLEAN );

return '<div class="cct-login-form">' . wp_login_form( $atts ) . '</div>';

}

Tutto quello che devi fare è dare uno stile al tuo frontend.

Se sei aperto all'uso dei plugin, ho già usato il componente aggiuntivo Registrazione utente per Gravity Forms, ha funzionato molto bene:

http://www.gravityforms.com/add-ons/user-registration/

Modifica: mi rendo conto che questa non è una soluzione molto dettagliata, ma fa esattamente quello che ti serve ed è una buona soluzione.

Modifica: per espandere ulteriormente la mia risposta, il componente aggiuntivo Registrazione utente per i moduli di gravità consente di mappare tutti i campi in un modulo creato utilizzando i moduli di gravità, a campi specifici dell'utente. Ad esempio, è possibile creare un modulo con Nome, Cognome, Email, Sito Web, Password. Al momento dell'invio, il componente aggiuntivo mapperà tali input nei relativi campi utente.

Un'altra cosa interessante è che puoi aggiungere qualsiasi utente registrato in una coda di approvazione. I loro account utente verrebbero creati solo una volta approvati nel back-end da un amministratore.

Se il link sopra riportato si interrompe, solo Google "Aggiungi registrazione utente per Gravity Forms"