Front End Posting with WordPress

4919659112_b9f6b0df8f_o

In this tutorial I am going to discuss how to insert posts via the front end of a WordPress blog. This tutorial will also cover some validation techniques, setting the post as “pending”, and email notification when a new post is created. So let’s begin!

First, you would want to create a new page, let’s call it “Add Article” with a slug of “add-article”. Make sure that your permalink settings it set to “/%postname%/”

Create a PHP file: page-add-article.php. Test this page, it should show a blank white screen.

Now we are ready to add some code to this page, open page-add-article.php using your favorite code editor. Create the header and the footer functions:

<?php get_header(); ?>

<?php get_footer(); ?>

Next we want to create the form to add the article.
Create the form

<div class = "content">
    <div class = "article-submit">
        <?php echo $msg ? $msg : ''; ?>
    </div>
    <form method = "post">
        <div class = "form-group">
            <label class = "" for = "article_title"><?php _e('Article Title'); ?>*</label>
            <input type = "text" name = "article_title" class = "form-control" value = "<?php echo $_POST['article_title'] ? $_POST['article_title'] : ''; ?>" />
        </div>
        <div class = "form-group">
            <label class = "" for = "article_description"><?php _e('Article Description'); ?>*</label>
            <textarea class = "form-control" name = "article_description" rows= "15" ><?php echo $_POST['article_description'] ? $_POST['article_description'] : ''; ?></textarea>
        </div>
        <div class = "form-group">
            <label class = "" for = "article_email"><?php _e('Your Email'); ?>*</label>
            <input type = "text" name = "article_email" class = "form-control" value = "<?php echo $_POST['article_email'] ? $_POST['article_email'] : ''; ?>" />
        </div>
        <br class = "clearfix" />
        <input type = "submit" name = "article_submit" class = "btn btn-default" />
    </form>
</div>

The “article-submit” div container is where we will be outputting any error or success messages

next, we need to code the server side. Just before the get_header(); function, insert the following PHP code:

if (isset($_POST['article_submit'])) {
// Sanitize the form fields here
// Create validation here
}

Sanitizing the Form Fields
Make sure that your visitors are submitting valid data and not some script or anything else that can harm our site, we need to sanitize the form fields:

$article_title = sanitize_text_field($_POST['article_title']);
$article_description = wp_strip_all_tags($_POST['article_description']);
$article_email = sanitize_text_field($_POST['article_email']);

We are simply passing all posted data to the sanitize_text_field function. The wp_strip_all_tags function sanitizes and strip all html tags from any input data that is why we no longer have to use sanitize_text_field with it.

Validation

if( empty( $article_title ) ) {
    $msg .= '<p class = "post-error">Please enter article title</p>';
} else if ( empty( $article_description )) {
    $msg .= '<p class = "post-error">Please enter article description</p>';
} else if ( empty( $article_email )) {
    $msg .= '<p class = "post-error">Please enter your email address</p>';
} else if ( ! is_email( $article_email )) {
    $msg .= '<p class = "post-error">Please enter a valid email</p>';
} else {
    // Insert the page to the database
   
    // Save a copy of the user's email to our database
   
    // Send an email notification to the admin email
}

In the code above, we are simply validating the input fields if they are empty and if the email address is of the right format.
You can test the form right now by navigating to the page ( ex. http://example.com/add-article) to see the form and the validation in action.

Inserting to the Database
Add the following code on the ELSE block:

// Insert the page to the database
$article_data = array(
    'post_title'    =>  wp_strip_all_tags( $article_title ),
    'post_content'  =>  implode( "\n", array_map( 'sanitize_text_field', explode( "\n", $article_description ) ) ),
    'post_status'   =>  'pending',
    'post_author'   =>  1,
    'post_type'     => 'post'
);

$post_id = wp_insert_post( $article_data );

Notice that we are setting post_status to “pending”, that way the admin can review the post before it appears on the site. Change the “post_type” value if you want to associate this new post with another post type. Make sure to replace “post_author” value with the admin user ID. If you are dealing with logged in users then it’s best to use the global $current_user variable then set the post author value to: “$current_user->ID” without the double quotes.

We then add the codes that will save the user’s email to our database for later use and also notify the admin email about the new post that is awaiting his/her approval:

if( $post_id ){
    // Save a copy of the user's email to our database, you can remove this if you are dealing with logged-in users.
    update_post_meta( $post_id, 'article_author', $article_email );
   
    // Send an email notification to the admin email
    $from = 'info@example.com';
    $headers = 'From: Example.com <"' . $from . '">';
    $subject = "New article awaiting approval";
   
    ob_start();
    ?>
   
    <p>A new article is awaiting your approval, <a href = "<?php echo get_permalink( $post_id ); ?>">click here to review the article</a></p>
    <p><br /></p>
    <p><a href = "<?php echo home_url(); ?>">blog.anandmahalskhmi.com</a></p>
   
    <?php

    $message = ob_get_contents();
   
    ob_end_clean();

    wp_mail(get_option('admin_email'), $subject, $message, $headers);
   
    $msg = '<p class = "post-success">Your Article has been submitted and is now awaiting for approval.</p>';
}

You now have a front-end form that includes validation and email notification, just go ahead and test it!. You can style the error or success colors of your own choice!.