Créer et éditer un article en front-end sur wordpress (en PHP)

J’ai récemment été amené à ouvrir mon blog wordpressà la collaboration.  Pour cela, je vais permettre à des utilisateurs de s’inscrire et de publier un article (post, custom post ou page) en front-end simplement. Pour des raisons de sécurités, je ne souhaite pas que ces utilisateurs accèdent à la partie admin de mon site wordpress.

Nous allons donc créer un nouveau template php sur notre thème wordpress et l’attribuer à la page « Ajouter un article ».

Sur ce template, nous allons permettre à chaque utilisateur connecté de publier un nouvel article en 3 étapes :

• La création d’un formulaire d’édition de mon nouvel article.
• L’enregistrement du nouveau post grâce à la fonctions wp_insert_post().
• L’édition de l’article si celui-ci a déjà été créé.

Créer un formulaire d’édition du nouvel article.

Je vais créer un formulaire très basique, afin de récupérer le titre et le contenu de l’article. J’utilise la fonction wp_editor() pour utiliser l’éditeur de contenu TinyMCE.

Une fois l’article sauvegardé, je souhaite conserver le contenu dans le formulaire. Ainsi, l’éditeur pourra continuer à éditer son contenu. J’utilise la méthode $_POST['postTitle'] et $_POST['postContent'] afin de charger le contenu de l’article dans le formulaire.

<form action="" id="primaryPostForm" method="POST">
   
   // Champs destiné au titre de mon article
   <label for="postTitle">Titre de mon article</label>
   <input type="text" name="postTitle" id="postTitle" class="required" 
         value="<?php if(isset($_POST['postTitle'])){ $_POST['postTitle']; } ?> " />

   // Champa destiné au contenu de l'article. Ici, on va utiliser l'éditeur TinyMCE de WordPress.
   <label for="postContent">Votre article</label>
   <?php 
      $content = stripslashes( if(isset($_POST['postContent'])) { $_POST['postContent']; }
      $settings  = array( 'editor_height' => '350', 'media_buttons' => false );
      wp_editor( $content, 'postContent', $settings); 
   ?>
   
   // Champs de sécurité
   <?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
                  
   <input type="submit" name="submit_post" id="submit_post" value="Publier mon article" />
   
</form>

Créer le nouvel article dans wordpress

Afin de sauvegarder cette page ,post ou custom_post dans ma base de donnée, je vais utiliser la fonction wp_insert_post().

Ici, je décide de créer un article « En attente de relecture » (pending). Ainsi, je pourrai contrôler le contenu avant qu’il n’apparaisse sur mon blog. Vous trouverez également d’autres fonctionnalités de sauvegarde avec la fonction wp_insert_post() dans la documentation officielle de wordpress.

<?php if(isset($_POST['submit_post'] && isset($_POST['post_nonce_field']) && wp_verify_nonce($_POST['post_nonce_field'], 'post_nonce'))){

   // Je vérifie que le titre a bien été ajouté et envoyé
   if ( trim( $_POST['postTitle'] ) === '' ) {
      $postTitleError = 'Veuillez renseigner le titre de votre article';
   } else {
      
      // Post to save
      $post_information = array(
         'post_title' => wp_strip_all_tags( $_POST['postTitle'] ),
         'post_content' => $_POST['postContent'],
         'post_type' => 'post',
         'post_status' => 'pending',
      );
      wp_insert_post( $post_information, $wp_error );
   }
}

Editer un article existant en front-end

Pour éditer un article existant, il suffit de préciser l’ID du post dans la fonction wp_insert_post().

Premièrement, je récupèrer l’ID du nouveau post créé dans wordpress. Pour cela, il vous suffit de récupérer cette valeur lors de l’utilisation de wp_insert_post() :

$the_post_id = wp_insert_post( $post_information, $wp_error );

Ensuite, je récupère cette valeur dans mon formulaire de contact.

<input type="hidden" name="postId" id="postId" value="<?php echo $the_post_id; ?>" />

Voici ce que cela donne lors de la création du post :

// Je vérifie si je suis en train d'éditer un article ou d'en créer un nouveau ($the_post_id sera NULL).
$post_exist_id = $_POST['postId'];

// Post to save
$post_information = array(
   // Je passe l'ID du post à updater. Si l'ID est NULL, alors je crée un nouveau post
   'ID' => $post_exist_id,
   'post_title' => wp_strip_all_tags( $_POST['postTitle'] ),
   'post_content' => $_POST['postContent'],
   'post_type' => 'post',
   'post_status' => 'pending',
);

// Ici, on va récupérer l'ID de l'article qui vient d'être publié.
$the_post_id = wp_insert_post( $post_information, $wp_error );

Quelques petites astuces supplémentaires

Si vous souhaitez donner un preview de cette page, vous devrez créer le lien du preview, qui ressemble à cela :

monsite.com?p=<?php echo $the_post_id; ?>&preview=true

De manière alternative,  vous pouvez utiliser directement une redirection après la création du post.

wp_redirect( site_url()."?post=".$the_post_id);

Notre article est maintenant créé. N’hésitez pas à déposer vos questions et remarques en commentaire.

retrouvez tous les outils et ressources en liens avec ce tuto ...

Technologies utilisées pour ce tuto :

HTML 5

PHP