Advertisement
Creative Coding

Posting via the Front End: Inserting

by

Today, we will begin the mini-series on how to insert posts via the front end. We will be covering a variety of different aspects in this tutorial, beginning with form validation and inserting posts. So, let's get ready and begin!


Introduction

Our goal after completing this mini-series should allow the user to submit posts via the front end, along with editing and sending the post to the trash; all without being in the WordPress Dashboard. These methods can be used in either a theme or plugin and be very adaptable to achieve very advanced and complex submissions.

The demo and the download files are a stripped down theme which has been created for just the purposes of this tutorial.

So open up your favourite text editor and let’s begin!


Step 1 Creating a Form

We begin by creating a form which will allow the user to enter the details with regards to creating a post. As we are building this into a theme, let's begin by creating a new page template and let's call it template-insert-posts.php. We will then begin constructing our form, and inserting some labels and input fields for the post title and textarea for the body:


<form action="" id="primaryPostForm" method="POST">

	<fieldset>
		<label for="postTitle"><?php _e('Post Title:', 'framework') ?></label>

		<input type="text" name="postTitle" id="postTitle" class="required" />
	</fieldset>

	<fieldset>
		<label for="postContent"><?php _e('Post Content:', 'framework') ?></label>

		<textarea name="postContent" id="postContent" rows="8" cols="30" class="required"></textarea>
	</fieldset>

	<fieldset>
		<input type="hidden" name="submitted" id="submitted" value="true" />

		<button type="submit"><?php _e('Add Post', 'framework') ?></button>
	</fieldset>

</form>

What we have just created is a very simple form which has a text input for the user to enter the title and a textarea for the content of the post.

Now that we have our fundamentals set, we will need to perform some form validation to ensure that we are getting correct content and not having malicious attacks against our submissions.


Step 2 Form Validation

We will be using two different forms of validation. We will be using the jQuery Validation Plugin, along with traditional PHP validation. Let's begin with the jQuery side of validation first and initialise our validation script. We will ensure that we register and enqueue the scripts within our functions.php file. Along with this, we will create a blank JavaScript file where we will handle all of our custom jQuery; remember to register and enqueue this file for initialisation. This should look something like this:


// custom jquery
wp_register_script( 'custom_js', get_template_directory_uri() . '/js/jquery.custom.js', array( 'jquery' ), '1.0', TRUE );
wp_enqueue_script( 'custom_js' );

// validation
wp_register_script( 'validation', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js', array( 'jquery' ) );
wp_enqueue_script( 'validation' );

Great, we have registered and enqueued all of our necessary scripts. We will now open our custom jQuery file and begin initialising our jQuery Validation Plugin; we will open our blank JavaScript file and write the following line of code to create our jQuery Validation:


jQuery(document).ready(function() {

	jQuery("#primaryPostForm").validate();

});

All we have done here is get the ID of our form and apply the validate method to this. Now that we have this in place, we will go back to our template-insert-posts.php file and ensure that we have put the required class into the input fields which are required.

All the jQuery Validation is in place, let's move onto the PHP Validation.

Our validation should ensure that we enter a title, and if the jQuery Validation fails, then it will fall back to the PHP Validation. We do this by first creating a PHP variable to store the error message, and then create some conditional tests.

We initially test if the user has submitted the form, and then we test if our PHP error message variable is blank. We need to insert the following code which does this just above our <?php get_header(); ?>:

<?php

$postTitleError = '';

if ( isset( $_POST['submitted'] ) ) {

	if ( trim( $_POST['postTitle'] ) === '' ) {
		$postTitleError = 'Please enter a title.';
		$hasError = true;
	}

}

?>

Our PHP Validation is in place, we are going to ensure that the value we are submitting is the same value the user has entered, and we do this by inserting the following code into our postTitle input field:


value="<?php if ( isset( $_POST['postTitle'] ) ) echo $_POST['postTitle']; ?>"

We also need to do the same for our text area but it works slightly differently; instead of setting a value, we insert the following code inside our postContent textarea tags:


<?php if ( isset( $_POST['postContent'] ) ) { if ( function_exists( 'stripslashes' ) ) { echo stripslashes( $_POST['postContent'] ); } else { echo $_POST['postContent']; } } ?>

Finally, we need to ensure that we are outputting our error message, and we do this by checking if our error message variable is empty. If our variable is not empty then output the message else do not output anything. The following code achieves this:


<?php if ( $postTitleError != '' ) { ?>
	<span class="error"><?php echo $postTitleError; ?></span>
	<div class="clearfix"></div>
<?php } ?>

Now that we have set up our form with validation we can move onto inserting the content into a post. Let's move on...


Step 3 Submitting a Post

We will now submit our form data into an actual post. We do this by using the WordPress function wp_insert_post. This function allows us to insert posts, so we will be using this to our advantage.

We begin by first creating a variable to hold all of our different elements. You can define a whole bunch of different elements and you can read about in the WordPress Codex. Insert the following code, just below your form validation code:


$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 );

The code we have just inserted creates an array and assigns values to the different elements. For the post_title element, we POST our postTitle value, and we POST our postContent to our post_content element.

We also set our post type to post, as we will be submitting the default post type but you are able to pass any custom post type to this field. Finally we are setting the status of the post to be pending so the admin can confirm the post before publishing it.

We then run the function wp_insert_post and pass our array with all our elements and the data assigned to them.

That's it! We are now able to add posts via the front end, but we are not finished yet. We have some security issues that we need to compensate. We begin by inserting a wp_nonce_field. If you don't know what a nonce field is, the WordPress Codex explain it perfectly:

The nonce field is used to validate that the contents of the form came from the location on the current site and not somewhere else.

This will help us against any security issues and prevent any malicious attacks. All we have to do is insert the following code just before our submit button:


<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>

Along with this, we will edit our form validation to ensure that we are only submitting content once the nonce field has been confirmed that we are submitting the content from the website, we do this by replacing our validation conditional statement. Your final code with validation and submitting the data should be as follows:


if ( isset( $_POST['submitted'] ) && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' ) ) {

	if ( trim( $_POST['postTitle'] ) === '' ) {
		$postTitleError = 'Please enter a title.';
		$hasError = true;
	}

	$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 );

}

Finally, just for an extra we will set a redirect once the user has submitted the information, so that users can not press submit multiple times and keep entering the same data into our posts. We will do this on a very basic level.

As wp_insert_post returns an ID we will use this to our advantage, and return the ID to a variable which we will use to ensure that we are not redirecting if no post was created.

We will do this by assigning our wp_insert_post function to a variable, as follows:


$post_id = wp_insert_post( $post_information );

We then will run a conditional statement to only redirect if we have a post ID, then use the WordPress redirect function and pass the home_url to this. The code you will insert is as follows:


if ( $post_id ) {
	wp_redirect( home_url() );
	exit;
}

All done...


Conclusion

That's the basics and fundamentals on how to insert posts via the front end. We have covered a lot, by first creating a form, form validation and submitting our data into a pending post!

Within the next part, we will be digging a little deeper into editing and deleting posts via the front end, which gets a little more tricky but it can be very useful!

I would like to say a HUGE thank you for spending the time to read my tutorial, I hope it helped. Please feel free to leave comments and I will try my best to assist and answer them, if not you can always contact me directly through my website: www.VinnySingh.co or Twitter @VinnySinghUK

Stay Tuned For Part 2!

Related Posts
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Custom Database QueriesApplication foundation 400
    Throughout this series, we've been looking at the various facilities that make it possible to treat WordPress as a foundation for web application development. Thus far, we've covered a lot of ground: We've talked about how WordPress is more of a foundation rather than a framework. We've discussed the nature of the the Event-Driven Design Pattern. There's been a discussion of Email, User Management, Saving Data, Retrieving Data ...and more. In the most recent articles, we've been talking a look at how to handle queries against the WordPress database through the use of WP_Query and WP_User_Query.Read More…
  • Code
    PHP
    Acceptance Testing With CodeceptionIntro to codeception retina preview
    Typically new features for web applications are tested by visiting the appropriate page in a browser, maybe filling out some form data, submitting the form, and then developers or testers hope to see their desired result. This is the natural way most web developers test their apps. We can continue with this natural testing process and improve upon it to ensure our apps are as stable as possible by using Codeception. Read More…
  • Code
    Plugins
    Using HighCharts in WP-AdminHighcharts 400
    Charts are a great way to present data. They make data more digestible by making it visually appealing. In WordPress, there is no built-in method for getting posts and pages data in a graphical form. Although, there are certain plugins available which integrate Google Analytics with WordPress, but they are overkill if you want to get only a portion of that data. Also, nothing should keep you from learning new techniques and to dive straight into the subject is the best way to learn.Read More…
  • Code
    PHP
    Authentication With Laravel 4Laravel 4 auth retina preview
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…
  • Code
    Business
    Making the Best of Google AdSense in WordPressGoogleadsensepreview
    Blog monetization is not a "must", but it's a very important source of motivation. Whether you're blogging alone or along with some authors you gathered, earning even a few bucks a month can change your and/or your authors' approach to your blog. Since Google AdSense is one of the easiest and most popular ways for blog monetization, we're going to see how to use it with a WordPress blog with multiple authors. (Although, this tutorial will also work for single bloggers.) We'll be covering how to set up profile fields for authors' AdSense ads and how to display those ads with a function, with a widget, with a shortcode and automatically inside posts.Read More…
  • Code
    Creative Coding
    Posting via the Front End: Editing and DeletingPreview editing and deleting
    Today, we will be continuing with our mini-series into insert posts via the front end but in this part we will be exclusively looking at how to edit and delete posts via the front end. We will be covering how to display all our posts, edit them, and delete them. So, let’s get ready and begin!Read More…