Table of Contents
- 1 Reasons WordPress Post From Front End
- 2 Creating a WordPress Front End Posting plugin
- 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 thesanitize_post()
function, which itself handles all the necessary sanitization and validation (kses, etc.). However, to remove HTML, JavaScript, and PHP tags from thepost_title
and any other fields, you need to use thewp_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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <?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.
1 2 3 4 5 6 7 8 | /*
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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!
Related Articles
Beginner’s Guide to: What Is WordPress?
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 […]
Continue ReadingPost to Post Relationships with WCK 2.0.4
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 […]
Continue ReadingBest WordPress Pricing Table Plugins & Examples
Check out these pricing table examples for inspiration and ideas. We also share the best pricing table plugins for WordPress sites.
Continue Reading
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/