WordPress Post From Front End

Cristian Antohe

Last Updated: 23/02/23

Table of Contents

1 Reasons WordPress Post From Front End
2 Creating a WordPress Front End Posting plugin
- 2.1 Other WordPress functions needed
3 Anonymous posting or logged in users?
4 A Shortcode for the Front End Posting plugin
5 Braking down the code
6 The Simple Front End Posting Form
7 Add a post to WordPress programmatically
8 Errors and notices
9 Conclusions
10 WordPress Creation Kit with Front End Posting

I’ve been thinking a lot lately about making the WordPress post from front end article. Solutions exist, in terms of plugins and specialized themes, but neither fits the bill and there are times when they just aren’t all that flexible. However there’s always the possibility of a custom built WordPress Front End Posting plugin that can be adjusted to fit an exact need.

In this article, we’ll look at the reasons why you’ll need WordPress Post From Front End, using the WordPress API to insert posts and finally putting it all together in the form of an easy to modify WordPress Front End Posting plugin.

Reasons WordPress Post From Front End

WordPress is getting more and more used as a framework (or application platform) and for good reasons. It’s really well documented and “there’s a plugin for that” phrase is as true as it gets. Also you can find really good developers at good prices.

All these combined encourage people to build, build, build:

community websites
directories
Q&A sites
photo sharing portals
etc.

Creating a WordPress Front End Posting plugin

We’ll start by getting acquainted with the wp_insert_post() function. This WordPress function inserts posts (and pages) into the database. It sanitizes variables, does some checks, fills in missing variables like date/time, etc.

1	<?php wp_insert_post( $post, $wp_error ); ?>

The $post parameter is an array representing the elements that make up a post. The contents of the post array can depend on how much (or little) you want to trust the defaults. For a full list just check the WordPress Codex entry on wp_insert_post.

There are some particularities you should be aware of:

Setting a value for $post['ID'] WILL NOT create a post with that ID number. Instead it will update the post with that ID number.
wp_insert_post() passes data through the sanitize_post() function, which itself handles all the necessary sanitization and validation (kses, etc.). However, to remove HTML, JavaScript, and PHP tags from the post_title and any other fields, you need to use the wp_strip_all_tags() function

Other WordPress functions needed

In order to get a fully working Front End Posting plugin, we’ll need to use a couple more WordPress functions, which are:

wp_set_post_terms – adds and updates terms to a post.
add_post_meta – adds a custom field to any post type.
wp_insert_attachment – for adding images or any type of attachments.

Anonymous posting or logged in users?

Depending on what your project needs, you can allow anonymous posting, or ask users to register/login before they can post from front end.

Our plugin will require users to login first. However, we won’t deal with the login and registration functionality, instead we’ll let another plugin take care of that: Profile Builder. The free version is perfect for that and all we’ll need to do is to add links to the login and registration pages, in the same page where we are adding our front end posting shortcode.

A Shortcode for the Front End Posting plugin

The best way to build our front end functionality, in order to make WordPress post from front end, is to have it all inside a plugin that will make use of a shortcode to display the form that will gather our information.

To test it out create a new file called simple-fep.php, copy the code bellow and use the shortcode [simple-fep] in a page to show the Front End Posting Form.

<?php
/*
Plugin Name: Simple Front End Posting
Plugin URI: http://www.cozmoslabs.com/
Description: Really simple way of posting from the front end in WordPress
Author: Cristian Antohe	
Version: 1.0
Author URI: http://www.cozmoslabs.com/
*/
 
function simple_fep($content = null) {
	global $post;
 
	// We're outputing a lot of html and the easiest way 
	// to do it is with output buffering from php.
	ob_start();
 
?>
<style>
#fep-new-post label{display:inline-block;width:15%;}
#fep-new-post input{width:60%;}
#fep-new-post input[type="submit"]{margin-left:15%;width:30%;padding:7px;}
#fep-new-post textarea{	display:inline-block;width:80%;vertical-align:top;}
</style>
<div id="simple-fep-postbox" class="<?php if(is_user_logged_in()) echo 'closed'; else echo 'loggedout'?>">
		<?php do_action( 'simple-fep-notice' ); ?>
		<div class="simple-fep-inputarea">
		<?php if(is_user_logged_in()) { ?>
			<form id="fep-new-post" name="new_post" method="post" action="<?php the_permalink(); ?>">
				<p><label>Title *</label><input type="text" id ="fep-post-title" name="post-title" /></p>
				<p><label>Content *</label><textarea class="fep-content" name="posttext" id="fep-post-text" tabindex="1" rows="4" cols="60"></textarea></p>
				<p><label>Tags</label><input id="fep-tags" name="tags" type="text" tabindex="2" autocomplete="off" value="<?php esc_attr_e( 'Add tags', 'simple-fep' ); ?>" onfocus="this.value=(this.value=='<?php echo esc_js( __( 'Add tags', 'simple-fep' ) ); ?>') ? '' : this.value;" onblur="this.value=(this.value=='') ? '<?php echo esc_js( __( 'Add tags', 'simple-fep' ) ); ?>' : this.value;" /></p>
				<input id="submit" type="submit" tabindex="3" value="<?php esc_attr_e( 'Post', 'simple-fep' ); ?>" />					
				<input type="hidden" name="action" value="post" />
				<input type="hidden" name="empty-description" id="empty-description" value="1"/>
				<?php wp_nonce_field( 'new-post' ); ?>
			</form>
		<?php } else { ?>		
				<h4>Please Log-in To Post</h4>
		<?php } ?>
		</div>
 
</div> <!-- #simple-fep-postbox -->
<?php
	// Output the content.
	$output = ob_get_contents();
	ob_end_clean();
 
	// Return only if we're inside a page. This won't list anything on a post or archive page. 
	if (is_page()) return  $output;
}
 
// Add the shortcode to WordPress. 
add_shortcode('simple-fep', 'simple_fep');
 
 
function simple_fep_errors(){
?>
<style>
.simple-fep-error{border:1px solid #CC0000;border-radius:5px;background-color: #FFEBE8;margin: 0 0 16px 0px;padding: 12px;}
</style>
<?php
	global $error_array;
	foreach($error_array as $error){
		echo '<p class="simple-fep-error">' . $error . '</p>';
	}
}
 
function simple_fep_notices(){
?>
<style>
.simple-fep-notice{ border:1px solid #E6DB55;border-radius:5px;background-color: #FFFBCC;margin: 0 0 16px 0px;padding: 12px;}
</style>
<?php
 
	global $notice_array;
	foreach($notice_array as $notice){
		echo '<p class="simple-fep-notice">' . $notice . '</p>';
	}
}
 
function simple_fep_add_post(){
	if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'post' ){
		if ( !is_user_logged_in() )
			return;
		global $current_user;
 
		$user_id		= $current_user->ID;
		$post_title     = $_POST['post-title'];
		$post_content	= $_POST['posttext'];
		$tags			= $_POST['tags'];
 
		global $error_array;
		$error_array = array();
 
		if (empty($post_title)) $error_array[]='Please add a title.';
		if (empty($post_content)) $error_array[]='Please add some content.';
 
		if (count($error_array) == 0){
 
			$post_id = wp_insert_post( array(
				'post_author'	=> $user_id,
				'post_title'	=> $post_title,
				'post_type'     => 'post',
				'post_content'	=> $post_content,
				'tags_input'	=> $tags,
				'post_status'	=> 'publish'
				) );			
 
			global $notice_array;
			$notice_array = array();
			$notice_array[] = "Thank you for posting. Your post is now live. ";
			add_action('simple-fep-notice', 'simple_fep_notices');
		} else {
			add_action('simple-fep-notice', 'simple_fep_errors');
		}
	}
}
 
add_action('init','simple_fep_add_post');

Braking down the code

We’ll start by creating the plugin header. The only way WordPress knows a particular file is a plugin, is when it contains a short description in the plugin file. Our Simple Front End Posting plugin is no different.

/*
Plugin Name: Simple Front End Posting
Plugin URI: http://www.cozmoslabs.com/
Description: Really simple way of posting from the front end in WordPress
Author: Cristian Antohe	
Version: 1.0
Author URI: http://www.cozmoslabs.com/
*/

The Simple Front End Posting Form

Our front end posting form will contain only the title, the content and an input field for tags (separated by a coma). This is mostly because it’s only supposed to be a demonstrative piece of code to get you started with Front End Posting.

Since we are outputting a lot of HTML and CSS code, the only simple way of doing it is to use output buffering from php. When you create a shortcode you should always use return because you shouldn’t output data using echo, for example.

Another thing that we are doing here is to check if the user is actually logged in or not. If not, we’re simply asking the user to login. You can replace that piece of code with a login url of your own choice and if you’re using Profile Builder for the front-end login, you can link it to the page where you have the login shortcode.

function simple_fep_form($content = null) {
	global $post;
 
	// We're outputing a lot of html and the easiest way 
	// to do it is with output buffering from php.
	ob_start();
 
?>
<style>
#fep-new-post label{display:inline-block;width:15%;}
#fep-new-post input{width:60%;}
#fep-new-post input[type="submit"]{margin-left:15%;width:30%;padding:7px;}
#fep-new-post textarea{	display:inline-block;width:80%;vertical-align:top;}
</style>
<div id="simple-fep-postbox" class="<?php if(is_user_logged_in()) echo 'closed'; else echo 'loggedout'?>">
		<?php do_action( 'simple-fep-notice' ); ?>
		<div class="simple-fep-inputarea">
		<?php if(is_user_logged_in()) { ?>
			<form id="fep-new-post" name="new_post" method="post" action="<?php the_permalink(); ?>">
				<p><label>Title *</label><input type="text" id ="fep-post-title" name="post-title" /></p>
				<p><label>Content *</label><textarea class="fep-content" name="posttext" id="fep-post-text" tabindex="1" rows="4" cols="60"></textarea></p>
				<p><label>Tags</label><input id="fep-tags" name="tags" type="text" tabindex="2" autocomplete="off" value="<?php esc_attr_e( 'Add tags', 'simple-fep' ); ?>" onfocus="this.value=(this.value=='<?php echo esc_js( __( 'Add tags', 'simple-fep' ) ); ?>') ? '' : this.value;" onblur="this.value=(this.value=='') ? '<?php echo esc_js( __( 'Add tags', 'simple-fep' ) ); ?>' : this.value;" /></p>
				<input id="submit" type="submit" tabindex="3" value="<?php esc_attr_e( 'Post', 'simple-fep' ); ?>" />					
				<input type="hidden" name="action" value="post" />
				<input type="hidden" name="empty-description" id="empty-description" value="1"/>
				<?php wp_nonce_field( 'new-post' ); ?>
			</form>
		<?php } else { ?>		
				<h4>Please Log-in To Post</h4>
		<?php } ?>
		</div>
 
</div> <!-- #simple-fep-postbox -->
<?php
	// Output the content.
	$output = ob_get_contents();
	ob_end_clean();
 
	// Return only if we're inside a page. This won't list anything on a post or archive page. 
	if (is_page()) return  $output;
}

The function that outputs our form is actually our shortcode. To create a shortcode in WordPress is really easy, you just need to use the add_shortcode function:

1 2	// Add the shortcode to WordPress. add_shortcode('simple-fep', 'simple_fep_form');

Where the first parameter is the name of the shortcode and the second one the function that outputs the content in your page.

Add a post to WordPress programmatically

Now that we have our form we need to process that information. We’re checking to see if our title and content was completed, and if that’s the case use wp_insert_post function to add our content to the database.

function simple_fep_add_post(){
	if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'post' ){
		if ( !is_user_logged_in() )
			return;
		global $current_user;
 
		$user_id		= $current_user->ID;
		$post_title     = $_POST['post-title'];
		$post_content	= $_POST['posttext'];
		$tags			= $_POST['tags'];
 
		global $error_array;
		$error_array = array();
 
		if (empty($post_title)) $error_array[]='Please add a title.';
		if (empty($post_content)) $error_array[]='Please add some content.';
 
		if (count($error_array) == 0){
 
			$post_id = wp_insert_post( array(
				'post_author'	=> $user_id,
				'post_title'	=> $post_title,
				'post_type'     => 'post',
				'post_content'	=> $post_content,
				'tags_input'	=> $tags,
				'post_status'	=> 'publish'
				) );			
 
			global $notice_array;
			$notice_array = array();
			$notice_array[] = "Thank you for posting. Your post is now live. ";
			add_action('simple-fep-notice', 'simple_fep_notices');
		} else {
			add_action('simple-fep-notice', 'simple_fep_errors');
		}
	}
}
 
add_action('init','simple_fep_add_post');

Errors and notices

We also want people to know that the title and content are required fields, as well as congratulating them on the fact that they successfully posted something new.

There are two functions that take care of that. We’re using some global parameters to pass the notices and errors arrays around.

function simple_fep_errors(){
?>
<style>
.simple-fep-error{border:1px solid #CC0000;border-radius:5px;background-color: #FFEBE8;margin: 0 0 16px 0px;padding: 12px;}
</style>
<?php
	global $error_array;
	foreach($error_array as $error){
		echo '<p class="simple-fep-error">' . $error . '</p>';
	}
}
 
function simple_fep_notices(){
?>
<style>
.simple-fep-notice{ border:1px solid #E6DB55;border-radius:5px;background-color: #FFFBCC;margin: 0 0 16px 0px;padding: 12px;}
</style>
<?php
 
	global $notice_array;
	foreach($notice_array as $notice){
		echo '<p class="simple-fep-notice">' . $notice . '</p>';
	}
}

Conclusions

While this was easy and fun to code, I don’t recommend using this in production as it is. There are some things I haven’t handled like:

Checking to see if the $_POST was set – PHP notices will be issued due to this fact
If you have an error like you forgot to complete the title, everything you wrote in the content and tags will be lost
No Front End Editing of any kind
No integrated login/registration
No options for the shortcode (like selecting the post type where you can post), no image upload and many more NO’s

This is simply an introduction to making WordPress Post From Front End. While it looks simple (just 120 lines of code and I’m sure you could do it in less), once you start adding functionalities you realize that there are many problems that aren’t so easy to solve. But we’ll leave that for another time.

You just finished reading “WordPress Post From Front End” by Cozmoslabs.

P.S. If you’re looking for an all-in-one solution to make WordPress Post From Front End you might want to check out:

WordPress Creation Kit with Front End Posting

Have you tried making WordPress to post something from the front-end? It’s not that straight forward as you might expect it to be.
WCK – Front End Posting tries to solve just that.

Create and edit posts/pages/custom post types directly from the front end
WYSIWYG editor
Easy usage of shortcodes
Quick access to Front End Dashboard
And much more!

Find out more about WCK – Front End Posting!

From the blog

Beginner’s Guide to: What Is WordPress?

Author: Cristian Antohe

Last Updated: February 15th, 2017

Ever now and again the question arises with new clients that aren't really tech savvy: "What Is WordPress?" What I'm hoping to achieve with this post is to drop the technical jargon for a minute and explain in down to earth words what is WordPress, how can it help you, what is WordPress.com, what's a […]

Post to Post Relationships with WCK 2.0.4

Author: Cristian Antohe

Last Updated: February 27th, 2014

A new version of WordPress Creation Kit is now available: 2.0.4 with Post to Post Relationships WordPress Post to Post Relationships In WordPress post types are often in a relationship of some sort. For example, you might want to relate a soccer player to a team. You could do it with taxonomies, but it can […]

Best WordPress Monetization Plugins & Tactics to Grow Your Revenue

Author: Freddy Muriuki

Last Updated: June 6th, 2024

You will agree that finding the best WordPress monetization plugins (and tactics) to grow your revenue is challenging. If that describes your situation, you're in the right place, and we have your back as always. Like you, I had big dreams when I started my first WordPress site. Also, like you, I was skeptical about […]

11 thoughts on “WordPress Post From Front End”

Hi,

That’s a great way to create a frontend submission form, I’ve successfully created and added the files into my website, walllaaah, it’s working perfectly but I was wondering how to modify it to let post into a specific category with a rich text enabled??

hope to get some help on that,

Thnx,

If you look at the function:
http://codex.wordpress.org/Function_Reference/wp_insert_post

there is a parameter called post_category. Just add your category there and the form will be posted directly in that particular category.

As for the rich text editor, have a look at http://codex.wordpress.org/Function_Reference/wp_editor function in WordPress. It lets you add a WYSYWIG to any text area you want (as long and it’s not loaded through ajax).

Or you can have a look at our own plugin, WCK Front-End http://www.cozmoslabs.com/wordpress-creation-kit-sale-page/ It might be just what you need.

quite interesting at start and later i was just puzzled as i am not much into programming. i have tried P2 TWITTER theme which provide front end facility but it didn’t did well as i want facebook wall type fast yet easy front end editor. any suggestion?

If P2 didn’t work out for you you’ll probably have to find someone to custom code this.

If i want to include upload file option with it, what to do? Pls mail me the code

Hello,
thank you for this post

there is a problem

if i refresh page after add post

Warning: : failed to open stream: No such file or directory in C:\xampp\htdocs\wp\wp-includes\class-wp-theme.php on line 948

This seems to be a problem with the theme and the page template that you have on the page. How are you refreshing the page ?

So are you telling me I can essentially build an app with this plugin? Basically create a template that the user can edit and add content that will populate to the site. Is this true?

Yes. That’s exactly it!

I know the post is old indeed, but I have one important question – security. How secure is this? I mean, shoudn’t we perform a strict check what the user had submitted or WP handles this? Thanks!

I have created file in theme folder with named as : simple-fep.php
Copy all code and psted into this file

I created page and i put short-code in the page as [simple-fep]

Short-code is visiable only.. therefore nothing out put
I am using twentythirteen theme

here is link of out put with short code only
http://nocholk.com/short-c/