WordPress: Post From The Front End With A Custom Post type

Create the custom post type.

Today I want to show you how to create a custom post type for wordpress and then write code to post directly to the custom post type from the front end of your website.

First thing we need to do is create a function called ty_post_type_init(). We will then add the custom post type code as follows.

First we need to create the labels for the post type.

$labels = array(
'name' => _x('Custom Posts', 'the custom posts', 'your_text_domain'),
'singular_name' => _x('Custom Post', 'the custom post', 'your_text_domain'),
'add_new' => _x('Add New', 'custom-post', 'your_text_domain'),
'add_new_item' => __('Add New Custom Post', 'your_text_domain'),
'edit_item' => __('Edit Custom Post', 'your_text_domain'),
'new_item' => __('New Custom Post', 'your_text_domain'),
'all_items' => __('All Custom Posts', 'your_text_domain'),
'view_item' => __('View Custom Post', 'your_text_domain'),
'search_items' => __('Search Custom Post', 'your_text_domain'),
'not_found' =>  __('No custom posts found', 'your_text_domain'),
'not_found_in_trash' => __('No custom posts found in Trash', 'your_text_domain'),
'parent_item_colon' => '',
'menu_name' => __('Custom Posts', 'your_text_domain')

);

The next step is to add the arguments code; this is where we control certain aspects of the custom post type. For example you can add support for the title, editor, categories, thumbnails and more. You can also set things like the slug for the URL and the menu position.

Here is the arguments code.

$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => _x( 'custom-post', 'URL slug', 'your_text_domain' ) ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
); 

Next we create the custom post type with the following function.

register_post_type('custom_posts', $args);

Now all that’s left for this part is to add an action to register the post on init.

add_action( 'init', 'ty_post_type_init' );

This is what the code looks like so far.

// register post type for custom posts
function ty_post_type_init() {
$labels = array(
'name' => _x('Custom Posts', 'the custom posts', 'your_text_domain'),
'singular_name' => _x('Custom Post', 'the custom post', 'your_text_domain'),
'add_new' => _x('Add New', 'custom-post', 'your_text_domain'),
'add_new_item' => __('Add New Custom Post', 'your_text_domain'),
'edit_item' => __('Edit Custom Post', 'your_text_domain'),
'new_item' => __('New Custom Post', 'your_text_domain'),
'all_items' => __('All Custom Posts', 'your_text_domain'),
'view_item' => __('View Custom Post', 'your_text_domain'),
'search_items' => __('Search Custom Post', 'your_text_domain'),
'not_found' =>  __('No custom posts found', 'your_text_domain'),
'not_found_in_trash' => __('No custom posts found in Trash', 'your_text_domain'),
'parent_item_colon' => '',
'menu_name' => __('Custom Posts', 'your_text_domain')

);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => _x( 'custom-post', 'URL slug', 'your_text_domain' ) ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
);
register_post_type('custom_posts', $args);
}
add_action( 'init', 'ty_post_type_init' );

Create the form for the front end posting.

We need to create the form here to be able to post in the front end. We will be using this in our template files or as a short code, depending on the style of coding.

    <form id="custom-post-type" name="custom-post-type" method="post" action="">

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

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

</p>

<p><label for="description">Post 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">Post 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="custom_posts" />

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

<?php wp_nonce_field( 'name_of_my_action','name_of_nonce_field' ); ?>

</form>

You will notice the wp_dropdown_categories() function. This is used to be able to select categories in the front end via a dropdown menu.

Next we need to add a nonce field; this will be used for security checks so that we know the posted data came from our form. We do this by using the function wp_nonce_field(). You can read more about this here http://codex.wordpress.org/Function_Reference/wp_nonce_field

Next I’m just checking if the the form was posted, if it was run the function ty_save_post_data().

if($_POST){
ty_save_post_data();
}

Our complete code for this function looks like this.

function ty_front_end_form() {

?>
<form id="custom-post-type" name="custom-post-type" method="post" action="">

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

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

</p>

<p><label for="description">Post 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">Post 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="custom_posts" />

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

<?php wp_nonce_field( 'name_of_my_action','name_of_nonce_field' ); ?>

</form>
<?php

if($_POST){
ty_save_post_data();
}

}
add_shortcode('custom-post','ty_front_end_form');

Now we need to add a function with code to handle the posted form data and then create the new post for us.

The first code for our function looks like this.

if ( empty($_POST) || !wp_verify_nonce($_POST['name_of_nonce_field'],'name_of_my_action') )
{
print 'Sorry, your nonce did not verify.';
exit;

}

In the code above we check for an empty post variable and check that our nonce is correct. If it fails we give them a failure message.

Next we do some really minor form validation just to check that the fields are set before creating the post. We don’t want those fields really to be empty especially the title and description part.

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

if(isset($_POST['post_tags'])){
$tags = $_POST['post_tags'];
}else{
$tags = "";
}

Next we create an array with the necessary types for the post to be created.

// Add the content of the form to $post as an array
$post = array(
'post_title' => wp_strip_all_tags( $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
);

You will see above for the title part we are striping all tags. We don’t want html or any JavaScript tags in the title.

We then just use the wp_insert_post() function to create the actual post.

wp_insert_post($post);  // http://codex.wordpress.org/Function_Reference/wp_insert_post

All that’s left is to set the location, in our case the home URL and then redirect there when we are done with the post.

$location = home_url(); // redirect location, should be login page

echo "<meta http-equiv='refresh' content='0;url=$location' />"; exit;

Here is what the completed function looks like now.

function ty_save_post_data() {

if ( empty($_POST) || !wp_verify_nonce($_POST['name_of_nonce_field'],'name_of_my_action') )
{
print 'Sorry, your nonce did not verify.';
exit;

}else{

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

if(isset($_POST['post_tags'])){
$tags = $_POST['post_tags'];
}else{
$tags = "";
}

// Add the content of the form to $post as an array
$post = array(
'post_title' => wp_strip_all_tags( $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);  // http://codex.wordpress.org/Function_Reference/wp_insert_post

$location = home_url(); // redirect location, should be login page

echo "<meta http-equiv='refresh' content='0;url=$location' />"; exit;
} // end IF

}

You can download the complete plugin,  just fill in your email below. Use the following shortcode [custom-post] to add the form on a page.

Please Like the article and look out for more awesome tutorials coming soon. :)

Easy Custom Content Types for WordPress

DOWNLOAD CODE HERE: Post From Front-end

Related Posts:

  • rss
  • email
  • rss
  • email
I'm a full time PHP developer and I just love all things web related. If you need help I'm your guy.

8 Responses to WordPress: Post From The Front End With A Custom Post type

  1. Eko Dost says:

    Nice tutorial. Thanks for sharing.

  2. Jed A Lariosa says:

    Where do i paste this codes?

  3. Not sure when this article was posted but as of August 2014 – it still works great. Thanks a bunch!

  4. Chris Hardin says:

    Great tutorial do you have an example of an update page?

  5. may says:

    I found this plugin and it has all I needed for front end postingand it’s so easy to use

    http://codecanyon.net/item/forms-management-systemwordpress-frontend-plugin/8978741

  6. shadyrasmy says:

    how to use custom taxonomy i tried ‘post_category’ => $_POST[‘custom_name’] and in form and didnt work

  7. francescomac82 says:

    What to do if I also want to add Featured image?

  8. Paul says:

    Save yourself the pain of wondering why the category is not listing options.
    Add hide_if_empty

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>