Wednesday 15 October 2014

Submit WordPress Posts From The Frontend

1. The Form

First we will set up the basic form which you can use to enter in the information to submit new posts.
<!-- New Post Form -->

<div id="postbox">

<form id="new_post" name="new_post" method="post" action="">

<p><label for="title">Title</label><br />

<input type="text" id="title" value="" tabindex="1" size="20" name="title" />

</p>

<p><label for="description">Description</label><br />

<textarea id="description" tabindex="3" name="description" cols="50" rows="6"></textarea>

</p>

<p><?php wp_dropdown_categories( 'show_option_none=Category&tab_index=4&taxonomy=category' ); ?></p>

<p><label for="post_tags">Tags</label>

<input type="text" value="" tabindex="5" size="16" name="post_tags" id="post_tags" /></p>

<p align="right"><input type="submit" value="Publish" tabindex="6" id="submit" name="submit" /></p>

<input type="hidden" name="post_type" id="post_type" value="post" />

<input type="hidden" name="action" value="post" />

<?php wp_nonce_field( 'new-post' ); ?>

</form>

</div>

<!--// New Post Form -->
There’s nothing special with this form really. The only thing is the wp_dropdown_categories() function, which creates the list of categories you can select from. You can learn more about this function here. Everything else you enter into the form will automatically create a new entry, including tags. Make sure no matter what you do, always include the wp_nonce_field(), for security reasons.

2. The PHP for Processing the Form

Here is where the fun part begins. This is the PHP which you need to process and submit the form information.
<?
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] )) {

 // Do some minor form validation to make sure there is content
 if (isset ($_POST['title'])) {
  $title =  $_POST['title'];
 } else {
  echo 'Please enter a title';
 }
 if (isset ($_POST['description'])) {
  $description = $_POST['description'];
 } else {
  echo 'Please enter the content';
 }
 $tags = $_POST['post_tags'];

 // Add the content of the form to $post as an array
 $post = array(
  'post_title' => $title,
  'post_content' => $description,
  'post_category' => $_POST['cat'],  // Usable for custom taxonomies too
  'tags_input' => $tags,
  'post_status' => 'publish',   // Choose: publish, preview, future, etc.
  'post_type' => $_POST['post_type']  // Use a custom post type if you want to
 );
 wp_insert_post($post);  // Pass  the value of $post to WordPress the insert function
       // http://codex.wordpress.org/Function_Reference/wp_insert_post
 wp_redirect( home_url() );
} // end IF

// Do the wp_insert_post action to insert it
do_action('wp_insert_post', 'wp_insert_post'); 

?>
Let’s go over this.
The first line checks if a post has been submitted, and if the action is not empty. You could do this check a number of ways, this is just how I’ve done it:
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] )) {
The second part is a basic form validation that checks to see if the title and description fields are set, and if so set the values to the variables $title and $description. You may want to check that each of the fields are set this way but I am just showing as an example.
Then, I set up a variable called $post, which is an array of values from the form fields.
  • post_title = $title like we set above using the validation
  • post_content = $description as we set
  • post_category = the category that was selected
  • tags_input = the tags
  • post_status = publish, future or draft. Whatever you want to set it to
  • post_type = post, page, or if you have set up a custom post type you can use that instead
To insert the new post information you can use the function wp_insert_post() and passing the $post variable to it. This is all of course, only if the form has been submitted which is why we put all this within the ‘if’ statement.
Update: I’ve added the function wp_redirect() after the wp_insert_post() function, to fix the redirect to a 404 page. You can change the location by passing the function an argument. For example: wp_redirect( ‘/some-page/’) or wp_redirect( home_url() ).
Close the IF statement and then add the action. The line do_action(‘wp_insert_post’, ‘wp_insert_post’); will add the wp_insert_post hook, with the wp_insert_post from the if statement as the callback, thereby adding the $post variable with all it’s information to the function. Without this line the post will not be submitted and your form will be useless.
I will leave the CSS up to you since I am not here to make your form look pretty, just work. Besides, everyone styles things differently anyways.
You can embed this code in a custom page template, say for example: page-submit.php. Copy the code from page.php and paste it in your custom template. You can create custom pate templates using page-slug.php or page-id.php. I find making custom templates this way 100 times better than using the old way, which involves assigning the page a specific template in the page attributes.
Make sure that you create a new page in the WordPress dashboard, and that your page slug or page id match the name of your template file (ie: page-submit.php – page slug = submit). This new page you create will automatically use the custom template you make, so there is no need to do anything else. You can enter content into the page if you choose to of course, but as long as the custom template includes the new post form, either above or below the_content() function you are good to go.

No comments:

Post a Comment