Download Report

3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Log in or Join VoodooPress.
Menu
Skip to content
Home
General
Tutorials
Hooks
Functions
WordPress Tips
Interesting Links
Optimization
Plugins
Themes
Customizing Themes
Post Formats
Voodoo Empire Links
About Me
Rev. Voodoo’s Blog
VoodooPress Google+
Vudu.me short URL
The Voodoo Empire
Voodoo Empire Shop
Forums
Topic List
Contact Us
How to Post From Your Front End With No Plugin
183 Replies
Lately I’ve been working on another side project. A wine rating site that we hope to launch soon. But one of the requirements for the site was that once a wine rater
logged in, they should have access to a form to rate wines. I didn’t want anyone to have to fuss with the back end of WordPress. I just wanted to present them with a
simple form to fill out. Let’s look into how that’s done.
The first thing you need to figure out is the details. Sketch out your form, what types of data do you need? Is it just normal post stuff (title, post, categories, keywords),
or do you need more? You can use custom fields/meta boxes from the front end. You can also allow thumbnail uploads to set as the featured image, or multiple image
uploads. Today we will just look at the basic stuff. Tomorrow we will add image uploads.
After you have your form all filled out you need to figure out some more details. Since the main focus of my site is going to be wine rating, I want to use the standard
post as wine rating. I will also use the standard categories to present a dropdown of wine types. And I will use the normal tagging system to allow for keywords. You
can follow the same setup, or you can register a new post type, and use custom taxonomies, these things would only require some simple changes in the code I’ll give
you, and I’ll point them out.
Now that we have all the details figured out, we need to get into the code. I set up a simple page template first. Now since this is just another form really, I borrowed
heavily from my own article here about Contact Form 7. You’ll see a few blocks of code down a setup for a simple page template, it looks like:
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
1/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
<?php
/*
Template Name: Wine Rating Form
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>
<div class="form-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>'
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div>
</div>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You’ll see that the template is the same as on the example in the previous post, except I change the name to Wine Rating Form in the header of the code. So save that as
whatever you like, I called it ratewine.php. You’ll see a call to the_content on line 20. I’m going to put my new form directly under that. You can do the same, or you
can delete the_content, it’s up to you. I left it in as I may decide later to add some instructions through the normal WP page interface.
You’ll also notice that on line 19, I have div class=formcontent rather than the normal entrycontent from twenty ten. That is just to avoid having twenty ten’s css play
too much on our form. That is explained in this article as well.
Let’s add in our form now! Again looking at the article from before you can see how I like to lay out my forms. I’m going to follow the same format here:

<div class="wpcf7">
<form id="new_post" name="new_post" method="post" action="" class="wpcf7-form" enctype="multipart/form-data">

<fieldset name="name">
<label for="title">Wine Name:</label>
<input type="text" id="title" value="" tabindex="5" name="title" />
</fieldset>

<fieldset class="category">
<label for="cat">Type:</label>
<?php wp_dropdown_categories( 'tab_index=10&taxonomy=category&hide_empty=0' ); ?>
</fieldset>

<fieldset class="content">
<label for="description">Description and Notes:</label>
<textarea id="description" tabindex="15" name="description" cols="80" rows="10"></textarea>
</fieldset>

<fieldset class="tags">
<label for="post_tags">Additional Keywords (comma separated):</label>
<input type="text" value="" tabindex="35" name="post_tags" id="post_tags" />
</fieldset>
<fieldset class="submit">
<input type="submit" value="Post Review" tabindex="40" id="submit" name="submit" />
</fieldset>
<input type="hidden" name="action" value="new_post" />
<?php wp_nonce_field( 'new-post' ); ?>
</form>
</div> 
You’ll notice I have some tags in there that come from Contact Form 7. we wrap the form in a wpcf7 class, and apply the wpcf7form class to the actual form. This is
not required of course. I just did it because I already have css in place from this tutorial. If I apply the same classes, I can reuse the css with no edits. Keep things simple
eh!
The important part is to make sure the name and ID on these inputs match up with what I have. That is because we are using standard inputs. These will save to specific
values that go to your database from the block of code I’m about to give you. You will also notice the second block makes use of wp_dropdown_categories, I like the
idea of giving a list of categories here, since my cats are wine types. This is one place you could swap in a custom taxonomy. And finally at the bottom you’ll notice a
little use of wp_nonce_field again, just a simple verification on where the data is coming from.
So that has our form all built. If you saved it now, and then applied this template to a page you would have your post form. Depending on if you followed this tutorial
before, it may or may not be styled. But the big thing you would notice is that the form doesn’t do anything! You can fill it out for sure, but the data does nothing. Let’s
fix that!
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
2/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Way at the top of our template, under the page template header, but above the get_header call, we are going to put some code.
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == "new_post") {
// Do some minor form validation to make sure there is content
if (isset ($_POST['title'])) {
$title = $_POST['title'];
} else {
echo 'Please enter the wine name';
}
if (isset ($_POST['description'])) {
$description = $_POST['description'];
} else {
echo 'Please enter some notes';
}
$tags = $_POST['post_tags'];
// ADD THE FORM INPUT TO $new_post ARRAY
$new_post = array(
'post_title'
=>
$title,
'post_content' =>
$description,
'post_category' =>
array($_POST['cat']), // Usable for custom taxonomies too
'tags_input'
=>
array($tags),
'post_status' =>
'publish',
// Choose: publish, preview, future, draft, etc.
'post_type'
=>
'post' //'post',page' or use a custom post type if you want to
);
//SAVE THE POST
$pid = wp_insert_post($new_post);
//SET OUR TAGS UP PROPERLY
wp_set_post_tags($pid, $_POST['post_tags']);
//REDIRECT TO THE NEW POST ON SAVE
$link = get_permalink( $pid );
wp_redirect( $link );
} // END THE IF STATEMENT THAT STARTED THE WHOLE FORM
//POST THE POST YO
do_action('wp_insert_post', 'wp_insert_post');
Up at the top are some instruction to WordPress to use this as a post, and we set up new_post which is what our nonce_field verifies against. After that we do some
validation. Just some basic fields we want to require. And then we set up the array which grabs the data from our form and puts it all together to insert into the
WordPress database. The wp_redirect line is optional, this redirects the user to their new post once they hit submit. This works great on a wine rating site I thought, take
the user right to their post. (redirect threw errors, working on it) I have update the above code again. Everything works splendidly. The redirect block of code is optional
or can be edited to redirect where you would like.
I’ve tried to mark with comments in the code where custom post types and custom taxonomies can be swapped out. But that pretty well does it! With this code you can
have your own front end post form.
If your form isn’t styled, just take a look at this post, it has the styling I use for Contact Form 7, which if you set up your form using the layout I did above, it will work
for this form as well.
Now just save up this page template to your theme and apply it to a page, and you have a post from the front end form available to your users! You probably don’t want
this available to just anyone, I keep the access restricted to authors and above on my site.
Notes For Multi Category Select:I haven’t had time to totally sort this out yet, but I’m posting it here for info.
If you replace the wp_dropdown_categories line with this:
<?php $select_cats = wp_dropdown_categories( array( 'echo' => 0, 'taxonomy' => 'category', 'hide_empty' => 0 ) );
$select_cats = str_replace( "name='cat' id=", "name='cat[]' multiple='multiple' id=", $select_cats );
echo $select_cats; ?>
It will allow for multiple category select. However, something needs done with the processing code above to allow that array to be handled.
Around line 16 (of the processing code), where we set up the post tags, I have this
$post_cat = $_POST['cat'];
And then in the array, I replaced the post category line with this
'post_category' =>
$post_cat,
And that was it, I am now able to select and save multiple categories!
UPDATE: If you check out this post, the end review of this form, down at the bottom we have an update with a possible fix to get the validation working properly. If
you have a chance to try the fix out and report back if it works, that would be awesome!
UPDATE(2): If you cruise around the site, and search a little, you’ll find that there are a whole variety of posts related to this frontend post form. But here is a couple
valuable links – our great VoodooPress readers have been busy! One of our readers provided his technique for editing and deleting these posts from the front end.
Another reader got validation working and provided us with that code! That’s a lot of cool stuff! If you have anything to add here, feel free to submit your stuff, or even
ask about a guest post! We are well on our way to posting perfection!
Share this:
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
3/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Shortlink: http://vudu.me/76
Related Posts
Posting From the Front End – Form Validation (Reader Submission)
Posting on WordPress From the Front End
Gravity Forms is Working Towards Full WP Editor
Reader Request – Use Category Slug Based Images for Posts
Edit and Delete posts from front end with no plugin part 2
This entry was posted in Customizing Themes, Tutorials, WordPress Tips and tagged contact form 7, front end, post form, wp_dropdown_categories, wp_nonce_field
on March 22, 2011 by Rev. Voodoo.
About Rev. Voodoo
Rev. Voodoo owns The Voodoo Empire, a local music and artist promotion group. VoodooPress is my hobby, I don't work or go to school for any computer related
field, I just like to tinker, and I love WordPress! You can find out more of my personal and music stuff over on my personal blog.
View all posts by Rev. Voodoo →
Post navigation
← Including the Article Link for Link Post Format From Child Theme Functions.php Plans For WordPress 3.2 Being Discussed →
183 thoughts on “How to Post From Your Front End With No Plugin”
1. stew March 22, 2011 at 11:26 am
Hi
your tutorial is awesome! thanks!
but i have question for you, if user is not log in how i can show to him login form in front end page?
you can see sample here: http://blogcastor.com/submitpostformforwordpresscustomposttype/
Reply ↓
1. Rev. Voodoo Post authorMarch 22, 2011 at 4:15 pm
I haven’t done that yet on the site, but I plan to. So I’ll cover it soon, but until then here is some links (The ones I’ll be looking at to develop my own)
http://www.wprecipes.com/addaloginformonyourwordpresstheme
http://wordpress.org/support/topic/frontendlogin1?replies=7
Reply ↓
2. stew March 22, 2011 at 2:23 pm
i need to add text area for insert URL, it’s possible?
Reply ↓
1. Rev. Voodoo Post authorMarch 22, 2011 at 4:17 pm
Yes, it should be quite simple. Are you familiar with custom meta boxes? Here’s a post I wrote before about them:
http://voodoopress.com/2011/03/addingmetaboxestoyourpostscreen/
You should be able to set up a meta box, and then call it from your post form on the frontend.
Again, I will be covering this in a new article this week if you can’t figure it out before that.
Reply ↓
3. stew March 22, 2011 at 4:34 pm
Thanks Voodoo all your help is very appreciated!!
But i have a small problem with my page template, because i need add only new field, where user that login, can add link of its site and after i will call it with
custom field in template (author post submissioni in home page). It’s possibile add it in this tutorial?
Thanks
Reply ↓
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
4/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
1. Rev. Voodoo Post authorMarch 22, 2011 at 4:46 pm
Yeah, that’s what I was talking about above. Meta boxes are used for displaying a text box. The info that the user put in the meta box goes into your
custom field. I need to set up a custom meta box for a website within the next couple days on a post from frontend form. Once I do that and test it out, I’ll
be putting a new tutorial up. Probably in 2 days.
The 3rd answer here (the short one) is how to add in the box…
http://wordpress.stackexchange.com/questions/7453/metaboxesinfrontendpostsubmissionform
Reply ↓
1. stew March 22, 2011 at 4:53 pm
O thanks a lot!! i will wait your next tut!!!
Bye
Stew
Reply ↓
4. stew March 23, 2011 at 12:39 pm
so i only add ‘siteurl’ => $siteurl, and how i can call it?
Reply ↓
1. Rev. Voodoo Post authorMarch 23, 2011 at 4:10 pm
I’m sorry, I don’t quite know what you mean? If you were referring to the link above, I haven’t gone over that code too much. I just provided that link as a
possible place to start. Tomorrow I will have a post on here about custom fields/meta boxes from the front end, if you are still looking for that info.
Reply ↓
1. Rev. Voodoo Post authorMarch 23, 2011 at 4:15 pm
Wait, I see what you are asking…. the $siteurl in the example. I would think in that situation, that person has something setup on their backend for
$siteurl in functions.php. http://voodoopress.com/2011/03/addingmetaboxestoyourpostscreen/
Some of that may be of help. You would need a function set up for $siteurl, so the data is collected and saved in a custom field. But yeah, I’ll cover it
tomorrow if you haven’t figured it out by then.
Reply ↓
5. Rev. Voodoo Post authorMarch 24, 2011 at 1:57 pm
This post was edited, I ran into a few issues. The redirect was iffy, and post tags didn’t work right. Everything is sorted out now, and very tested.
Reply ↓
6. fkrx April 13, 2011 at 5:23 am
thank you so much for sharing this!
btw, was wondering if its possible to give the user a preview page, before submitting the entry?
Reply ↓
1. Rev. Voodoo Post authorApril 13, 2011 at 7:10 am
Hmmm…. that would be pretty hard I would think…. I mean there isn’t a built in equivalent to wp_insert_post that I can think of which allows for
previews, or post editing. I’m sure it’s possible, but then you are really getting into pretty much rebuilding the WP backend for the frontend…..
Reply ↓
1. fkrx April 14, 2011 at 4:14 am
yeah thats what i thought too.. because you’d need to save the post as a draft (so the post exists) for it to be preview, i think thats the logic behind
WP’s postings…
good stuff anyways!
Reply ↓
7. Paolo April 21, 2011 at 12:00 pm
great tutorial, the script works like a charm!
Only one question, what if I needed to add extra category fields in the form?
If I just copy and paste another category fieldset, the post is saved under the category selected in the second select field. Can you help?
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
5/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Thanks in advance,
Paolo
Reply ↓
1. Rev. Voodoo Post authorApril 22, 2011 at 7:54 am
Ya know, it’s not something I’d ever considered. My form is for wine rating….. wine can only be one type really. But it’s an interesting question. You
can’t repeat dropdowns for multiple values, it’ll just keep the last value. So we need to use a multi select dropdown or something, but that’s not built in to
the normal dropdown. I’ll see what I can come up with when I have time!
Reply ↓
2. Rev. Voodoo Post authorApril 26, 2011 at 7:58 am
OK, I’m half way there. Maybe someone else can help, or I’ll try again when I have more time.
At the bottom of the post above, I added a working notes section. There I give code which allows your categories to be in a multi select field. It displays
and behaves properly. However something isnt working with the processing end of the equation. I can’t get the multi cats to save and display. So once we
get that part figured out, we are all set!
Reply ↓
3. Rev. Voodoo Post authorApril 26, 2011 at 8:14 am
Alright, I’ve edited my notes in the original post. I am now able to select and save multiple cats using the above mods to my form.
Reply ↓
8. Nick Budden April 25, 2011 at 9:50 pm
If I could give you a big hug I would…I have been looking for exactly something like this for a very long time.
Reply ↓
1. Rev. Voodoo Post authorApril 26, 2011 at 7:15 am
lol! Thanks for the awesome feedback, I’m glad you found this helpful! I wish I had more time to work on it further. I mean all the functionality is there and
it works great. I just want to be able to get some really cool validation working on it. If you’re handy with jquery I’m sure you can get that all sorted out.
Grad school and work leave me with no time to play!
Reply ↓
1. Nick Budden April 28, 2011 at 6:44 pm
Just a head’s up to everyone I’ve found that wp_set_post_tags(); is adding the tags a second time (but only does so when I have more than one tag,
with only one tag there are no duplicates). When I remove it and just stick with tags_input in my wp_insert_post array, I get my tags no prob.
Reply ↓
1. Rev. Voodoo Post authorApril 28, 2011 at 7:51 pm
I’d have to guess it’s something funny on your end. Quite a few people have used the above code, with no doubling of tags. That specific code
separates the tags. Without it, you can apply numerous comma separated tags and they are all saved as one tag. With that code, each tag
separates individually. It’s been tested a lot. I am using it on 2 sites currently. Absolutely no double tags. Let me know if you find the issue….
Reply ↓
9. Danko Dubajic July 1, 2011 at 10:02 am
Hi there,
for last few days I’ve been playing with your code and I really like how you explained everything…
I read somewhere that error checking is not doing good job. I’ve solved that checking every with just basic if =”" with jQuery (if someone needs a bit more
explanation feel free to ask).
Now actually a real question. I’ve been making front end post with some heavy visual customization so input type file is making my life a living hell. Every thing
I tried to do ends up as deadend.
Here’s what I want to do. I want to make form to create post as “draft”(easy enough) with some custom fields(also simple) and thumbnail(working). But there is
no way I can make on that page where I do frontend submit preview of that image. I’ve tried with invisible inputs, jQuery, ajax posting, php temp upload etc…
and God knows what else. I can make input with preview and form to send post to wp, but those 2 together no way. Any idea, suggestion ….. actually anything
is welcome about now because my brain can’t figure this out with all the frustration from last 3 days.
Keep the great work and I hope I’ll be doing some contribution to all this in the future.
Danko Dubajic.
Reply ↓
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
6/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
1. Rev. Voodoo Post authorJuly 1, 2011 at 12:36 pm
There’s a note at the bottom of the post now, with a possible solution to the error checking in php. But yeah, jQuery is a perfectly viable solution! That
preview business though…. that’s a tough one! I’m not sure how to go about that….. I’ll search around, but if you find something please report back!!
Maybe even make a guest post about it or something!
Reply ↓
1. Danko Dubajic July 1, 2011 at 3:36 pm
I’ll post some code about that jQuery…. on monday no codes for 2 day .
One thing I cant understand. This thing actually does work in wordpress backhand for logo, favicon… I even tried to copy that idea but wordpress
does some nasty things there and it’s almost impossible to fully copy all the things it does. Anyways I decided to avoid that preview thingy and
maybe if time lets to come back and figure that one out. Till then thanks for fast response and keep it good.
Reply ↓
1. Rev. Voodoo Post authorJuly 5, 2011 at 4:06 pm
Trying to grab onto WPs built in stuff from the front end seems pretty darned near impossible for some things. I had tried to bring the
WYSIWYG editor over, and that was a mess. I imaging trying to hook on the uploader/preview business would be just as messy!
Reply ↓
10. Danko Dubajic July 1, 2011 at 3:39 pm
One more thing I forgot to add…. About redirect I don’t know if you figured that one but wp_redirect actually doesn’t work if you have any sort of HTML in
front of it. Like when you echo that error from form check. I really don’t understand point of that redirect if you need to use it like on line 1…
Reply ↓
11. Danko Dubajic July 4, 2011 at 3:08 am
Ok so it’s monday morning, and back to coding…
So my error check looks something like this:
First you’ll need something like this included in your header:
<script src="” type=”text/javascript”>
<script type="text/javascript" src="”>
, where contact.js is some custom file that we’re add some code later on.
in line where you start form () change this:
into this:
and in contact.js you should have something like this:
function check_field(field,alerttxt,checktext){
with (field)
{ var checkfalse = 0;
if(field.value == “”){
$(‘#errormessage’).empty().append(alerttxt);
field.focus();checkfalse=1;}
if(field.value==checktext)
{ $(‘#errormessage’).empty().append(alerttxt);
field.focus();checkfalse=1;
}
if(checkfalse==1){return false;}else{return true;}
}
}
function checkFormz(thisform)
{
with (thisform)
{ var error = 0;
var siteurl = document.getElementById(‘siteurl’);
if(check_field(siteurl,”Please insert your site URL”,”Site URL”)==false){
error = 1;
} if(error == 0){
return true;
} return false;
}
}
To explain some more: #errormessage is some custom ‘div’ where I put my result, it should be somewhere in your form or after it and it’ll print your notification
about error occurred. siteurl is changeable and siteurl is ID of one of my fields inside form. This here is just simple code that check if field is empty or has some
default value (in my case field already have value “Site URL” because I use show/hide that when user clicks on that field, with another jQuery function and I
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
7/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
need to check for that too). You can use this to check something more and add as much fields as you want just by multiplying:
var XXXXX = document.getElementById(‘XXXX’);
if(check_field(XXXXX,”Custom error message”,”not needed but if field already have some value”)==false){
error = 1;
}
Voodoo plz check my code because it’s kinda hard to see all from this small box.
If I figure out some more thing, I’ll report back, until then c ya
Reply ↓
1. Rev. Voodoo Post authorJuly 5, 2011 at 4:03 pm
Wow, thanks for the fantastic post! I’ll have to play with that some. It might be better to drop giant blocks of code into a pastebin and then just give us a
link. Reason being, WP comment area seems to eat up the code that you worked so hard on! As you can probably see, I’ve been hard at work switching
VoodooPress (along with all my other sites) to WP 3.2. Which means a new child theme for VoodooPress. Once I get things decent, I’ll be able to play
around a bit.
Reply ↓
1. Danko Dubajic July 6, 2011 at 4:24 am
I’ll send you one example when I’m done so you can put it whole. It’s pointless to post it in chunks in comments. Your post really helped me to start
this whole thing, and although it’s really really hard to customize that whole frontend post form I’m almost done….
Still can’t make that preview to work, and because of deadline I abandoned that idea, I’ll probably come back to that later when I clear my mind from
this project, it’s been really frustrating week.
So thx again and be good…
Reply ↓
1. Rev. Voodoo Post authorJuly 6, 2011 at 7:07 am
Sure, I’m definitely interested in seeing your finished product!!
Reply ↓
12. Pierre July 5, 2011 at 3:25 pm
Fantastic code sample! Thanks!
For some reason I have to replace all tabs and spaces, cause it gives me errors.
Reply ↓
1. Rev. Voodoo Post authorJuly 5, 2011 at 4:07 pm
Probably has to do with the built in WP commenting system. It tends to do mean things to people’s code
Reply ↓
13. Pierre July 5, 2011 at 4:19 pm
I’m actually pasting it to coda, never experienced this problem before. Any how, does the fields in the page template have to match the fields in contact form 7.
name=”description” represents [description] in wpcf7?
It doesn’t post to a new entry..
Reply ↓
1. Pierre July 5, 2011 at 4:23 pm
Dont really see what wpcf7 has to do with this form except the css styling.
Reply ↓
1. Rev. Voodoo Post authorJuly 6, 2011 at 7:01 am
Yeah, that’s correct. I already had all my css set up from my contact form that I used CF7 for….. so I just copied/pasted the css and reused the cf7
selectors. It can be whatever you want, as long as that is reflected in the css.
Reply ↓
1. Pierre July 6, 2011 at 7:04 am
My bad! I totally misinterpreted your guide there, got confused with the cf7.
Thanks!
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
8/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Reply ↓
1. Rev. Voodoo Post authorJuly 6, 2011 at 7:06 am
No prob. I might not have been totally clear on why I kept the selectors in there.
2. Rev. Voodoo Post authorJuly 6, 2011 at 7:05 am
Nah, description is what I chose because in my form it is supposed to be a description of the wine. You can call that whatever you want, as long as in the
processing code, you assign whatever you call it to be post_content.
Reply ↓
1. skadnol November 7, 2012 at 5:31 am
Is it possible to have more than one field to be send in post_content? Great tutorial, I’ve been looking for this for a long time. Did you made a plugin
from that? Thanks
Reply ↓
14. Danko Dubajic July 6, 2011 at 4:18 am
I realized later that this box eat quite a lot of my code…. currently working on making custom reCaptcha on this form. It’ll be done today probably and I’ll try to
post the whole thing then and maybe even a demo of that form submit.
Reply ↓
1. Rev. Voodoo Post authorJuly 6, 2011 at 7:11 am
Yeah, I did get to see your code a little better in the email I got. However all the spaces and some of the characters got converted to html entities….. so it
was still hard to read. I would love to see the finished product.
Reply ↓
15. Pierre July 6, 2011 at 6:54 am
My form does not post to new entries, any knows reasons why?
I was prompted that the type=”submit” and id=”submit” cant be named the same so I changed the id.
Please help!
Reply ↓
1. Rev. Voodoo Post authorJuly 6, 2011 at 7:13 am
I’ve always had the type and ID match up. I was wondering if the form not submitting has to do with your field names. I’m not sure if you changed them or
not, per your previous comment. The field names can change, as long as the processing code also changes to match whatever you change things to.
Reply ↓
1. Pierre July 6, 2011 at 8:25 am
I actually didn’t change anything with the field names or css classes.
My method is to try the code from its origin and then change things from that. The only thing I changed was the ID of the submit button cause of the
prompt. I’m on a localhost and wp3.2 maybe I should try it on 3.1.4. Don’t really see that the wordpress version should be the problem.
Reply ↓
1. Rev. Voodoo Post authorJuly 6, 2011 at 8:35 am
I wouldn’t think the version change would do anything. I haven’t had time to look into it too much, but I don’t think anything changed with
wp_insert_post. My site with the form is not upgraded yet to test 3.2 (the theme isn’t compatible, and I have been to busy to apply a fix).
Reply ↓
1. Pierre July 6, 2011 at 8:38 am
Thanks anyways! I will post the solution as soon as I find it!
2. John November 13, 2011 at 12:37 pm
i’m also running into this problem. i can’t seem to get this form to work.
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
9/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
3. Rev. Voodoo Post authorNovember 14, 2011 at 7:09 am
John, are you having the exact same problem as Pierre? Only one thing I can think of, are you running Contact Form 7? One of our
readers had a conflict due to that. It was simple to fix really (as long as you aren’t using CF7 and this form on the same page). I have
another tutorial on VooooPress relating to CF7. In it, we stop CF7 from loading on any page where it isn’t needed.
4. John November 14, 2011 at 12:02 pm
yeah, i am running contact form 7. hmm i will take a look at the tutorial about loading contact form whenever its needed. do you mind
posting the link?
5. Rev. Voodoo Post authorNovember 14, 2011 at 12:08 pm
http://vudu.me/4o
Down towards the bottom is a bit of script to stop CF7 from loading unless on a certain page. For me it’s the contactus page. Obviously
that would change for you. It’s a good thing to use anyway, no reason to load scripts on every page when not needed!
16. Danko Dubajic July 8, 2011 at 3:36 am
So first tests are done and all seams to be working good.
Here’s a link just to see what I’ve done so far.
http://demo.themeskingdom.com/wds/submit/
I’ll set form to send post as published although my plan is to set it draft and it needs to be approved by admin.
This is form with fully customized google reCaptcha and it needs to have image in it png, jpg, jpeg, gif every other try should result some error.
It’s not all done so it could have some minor bugs…
Because of tight deadline I’ll send working code in a few days as soon as I clean it a bit so people can see it a bit better.
Danko Dubajic
Reply ↓
1. Rev. Voodoo Post authorJuly 8, 2011 at 7:09 am
Looks like I’ll have to wait until I’m home to look at the form. I’m stuck using IE7 at work, so I don’t think I’m seeing things as you designed them. But
from what I can see, looks fantastic. Definitely appreciate you sharing the code when you have time!
Reply ↓
1. Danko Dubajic July 8, 2011 at 7:25 am
hm, didn’t check all browsers tho. Lucky for me we don’t support IE7 anymore Reply ↓
1. Rev. Voodoo Post authorJuly 8, 2011 at 8:19 am
Yeah, IE7 is terrible. Unfortunately at my work I am stuck on Winows XP with IE7. I have no way to upgrade or use a different browser. It
makes tinkering with my own website a treat. I’ll do some work in IE7, then go home and see what it really looks like!
Reply ↓
17. Zakir July 9, 2011 at 7:57 am
Hi nice article.
I’m just wondering whether it is possible to use custom content type e.g. candidates lists where candidates will enter their personal details in form and it will create
a custom content type post, i dont’ want to create conventioanl wordpress post , i rather create a separate custom content type candidates. candidates who love to
apply for a job they will fill out the form and then a new post will be created under candidates list.
what do you think ? is it possible? any article you wrote about this , let me know plz.
Reply ↓
1. Zakir July 9, 2011 at 12:12 pm
Hi
I sorted out nicely. I created custom content type candiates and user can enter their details into the form and after submission it creates a new post of
candidates post type. Amazing. I also created thank you redirect page, works smoothly till now.
Now I have an issue, how to validate the form ?
currently I have 4 fields,
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
10/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
post title (as it is being used as candidate name)
email
telephone and
upload cv.
i followed your code and used
if ($_POST['title']!= ”) {
$title = $_POST['title'];
} else {
echo ‘Please enter your name’;
}
so it validates when post title field is empty, but f created another two validation rules
if ($_POST['cand_email']!= ”) {
$cand_email = $_POST['cand_email'];
} else {
echo ‘Please enter your email’;
}
if ($_POST['cand_phone']!= ”) {
$cand_phone = $_POST['cand_phone'];
} else {
echo ‘Please enter your Phone number’;
}
it sends an error after showing the message.
it says header already sent out type message.
let me know guys if you have similar issues.
Reply ↓
1. Danko Dubajic July 9, 2011 at 7:31 pm
Hi Zakir. I didn’t use validation as mentioned in this post. I used some small java script. Will send some code tomorrow it won’t be hard to
implement that in your code.
Reply ↓
1. Zakir July 9, 2011 at 8:19 pm
Thanks Danko. looking forward to your code.
Reply ↓
18. Danko Dubajic July 10, 2011 at 7:45 am
<?php session_start();
/*
Template Name: FULL FORM TEST
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11"><META CHARSET="UTF-8">
<title>Some test</title>
<script src="<?php echo get_template_directory_uri()."/script/jquery/jquery-1.5.1.min.js";?>"
type="text/javascript"></script>

<?php
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == "new_post") {
// Do some minor form validation to make sure there is content
if (isset ($_POST['site-title'])) {
$sitename = $_POST['site-title'];
}
if (isset ($_POST['site-link'])) {
$siteurl = $_POST['site-link'];
}
if (isset ($_POST['dev-name'])) {
$devname = $_POST['dev-name'];
}
if (isset ($_POST['dev-url'])) {
$devurl = $_POST['dev-url'];
}
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
11/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
if (isset ($_POST['dev-country'])) {
$devcountry = $_POST['dev-country'];
}
if (isset ($_POST['dev-twitter'])) {
$devtwitter = $_POST['dev-twitter'];
}
// ADD THE FORM INPUT TO $new_post ARRAY
$new_post = array(
'post_title' => $sitename,
'post_status' => 'publish',
// Choose: publish, preview, future, draft, etc.
'post_type' => 'post' //'post',page' or use a custom post type if you want to
);
//SAVE THE POST
$pid = wp_insert_post($new_post);
add_post_meta($pid, '01 Site URL', $siteurl, true);
add_post_meta($pid, '02 Developer Name', $devname, true);
add_post_meta($pid, '03 Developer URL', $devurl, true);
add_post_meta($pid, '04 Developer Country', $devcountry, true);
add_post_meta($pid, '05 Developer Twitter', $devtwitter, true);
}
if ($_FILES) {
foreach ($_FILES as $file => $array) {
$newupload = insert_attachment($file,$pid);
// $newupload returns the attachment id of the file that
// was just uploaded. Do whatever you want with that now.
}
} // END THE IF STATEMENT THAT STARTED THE WHOLE FORM
//POST THE POST YO
do_action('wp_insert_post', 'wp_insert_post');
?>

<?php wp_head(); ?>
</head>
<body <?php $class='body'; body_class( $class ); ?>>
<div class="front-end-holder">
<div class="front-end-left">
<form id="new_post" name="new_post" method="post" action="" class="front-end-form" enctype="multipart/form-data"
onsubmit="return checkFormx(this)">

<fieldset name="site-image" class="site-image">
<input type="file" name="image" class="file_input_hidden site-image file_upload" onchange="javascript:
document.getElementById('fileName').value = this.value" />
</fieldset>

<fieldset name="developer-name" class="fieldset-first">
<input type="text" id="dev-name" value="Developer Name" class="hideinput" tabindex="2" name="dev-name" />
</fieldset>
<fieldset name="developer-url" class="fieldset-first">
<input type="text" id="dev-url" value="Developer URL" class="hideinput" tabindex="3" name="dev-url" />
</fieldset>
<fieldset name="deveoper-country" class="fieldset-last">
<input type="text" id="dev-country" value="Country" class="hideinput" tabindex="4" name="dev-country" />
</fieldset>
<fieldset name="developer-twitter" class="fieldset-last">
<input type="text" id="dev-twitter" value="Twitter Username" class="hideinput" tabindex="5" name="devtwitter" />
</fieldset>
</div>
<!-left side-->
<div class="front-end-right">
<fieldset name="site-name">
<input type="text" id="site-name" value="Site Name" class="hideinput" tabindex="6" name="site-title" />
</fieldset>
<fieldset name="site-url">
<input type="text" id="site-url" value="Site URL" class="hideinput" tabindex="7" name="site-link" />
</fieldset>
<div class="clear-both"></div>
</div>

</div>
</div>
<div class="clear-both"></div
<div id="error-message"></div>
<fieldset class="submit">
<input type="submit" value="Preview" class="frontsubmit" tabindex="40" id="submit" name="submit" />
</fieldset>
<input type="hidden" name="action" value="new_post" />
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
12/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
<?php wp_nonce_field( 'new-post' ); ?>
</form>
<script type="text/javascript">
function check_field(field,alerttxt,checktext){
with (field)
{
var checkfalse = 0;
if(field.value == ""){
$('#error-message').empty().append(alerttxt);
field.focus();checkfalse=1;}
if(field.value==checktext)
{
$('#error-message').empty().append(alerttxt);
field.focus();checkfalse=1;
}
if(checkfalse==1){return false;}else{return true;}
}
}
function checkFormx(thisform)
{
with (thisform)
{
var error = 0;
var siteurl = document.getElementById('site-url');
if(check_field(siteurl,"Please insert your site URL","Site URL")==false){
error = 1;
}
var sitename = document.getElementById('site-name');
if(check_field(sitename,"Please insert your site name","Site Name")==false){
error = 1;
}
var devtwitter = document.getElementById('dev-twitter');
if(check_field(devtwitter,"Please insert your twitter username","Twitter Username")==false){
error = 1;
}
var country = document.getElementById('dev-country');
if(check_field(country,"Please insert your country","Country")==false){
error = 1;
}
var devurl = document.getElementById('dev-url');
if(check_field(devurl,"Please insert your URL","Developer URL")==false){
error = 1;
}
var devname = document.getElementById('dev-name');
if(check_field(devname,"Please insert your name","Developer Name")==false){
error = 1;
}
}
if(error == 0){
return true;
}
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.front-end-holder .hideinput').addClass("idleField");
$('.front-end-holder .hideinput').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('.front-end-holder .hideinput').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});
</script>
</body>
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
13/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
</html>
* This source code was highlighted with Source Code Highlighter.
Reply ↓
19. Danko Dubajic July 10, 2011 at 7:52 am
I hope now that wp didn’t eat my code.
This thing works as it is, just make .php file and add it to your wp root folder and make page with that template.
Only thing it needs is jQuery so change path to your jquery.js.
I used custom fields for post because I think it’s easier for admin to check post before approval. You can also add category, tags, etc just after inserting featured
image, and above “} // END THE IF STATEMENT THAT STARTED THE WHOLE FORM”.
Hope it helps you guys.
Reply ↓
1. Zakir July 10, 2011 at 2:17 pm
Thnx, it working smoothly mate.
Reply ↓
2. Rev. Voodoo Post authorJuly 11, 2011 at 7:38 am
That’s cool stuff! I very much appreciate you sharing it here! Thank you!
Reply ↓
1. Danko Dubajic July 11, 2011 at 10:21 am
Actually mate thank you. I had nice headstart because of this post, so that was at least I can do.
Keep up the good work
Reply ↓
3. kane2010 November 21, 2011 at 7:39 am
Hi Danko,
Cut and pasted your code above into a template. I cant seem to get it to work, the form displays okay but when i hit the display button I get the ‘The
website cannot display the page’ error.
Any ideas what I might be doing wrong, any feedback would be fantastic.
Kane2010
Reply ↓
20. Niek July 29, 2011 at 8:46 pm
Hi all,
Great tutorial, but I have been stumbling around with something and can’t get my head to it. I am using a plugin called wprecipes which creates a custom post
type in the backend, with some custom labels to input data. This is all fine and I have set up the form on the page with no problems, the only thing that I for some
reason don’t get done is saving those custom labels from the plugin. The title, tags and normal content saves no problem, but I just don’t get the custom labels to
show up on the page when posting from the front end. All help is welcome!!
Reply ↓
1. Niek August 1, 2011 at 5:50 am
Solved it by digging in the plugin and simply added the following lines to the code:
$meta = $_POST['_my_meta'];
add_post_meta($pid, '_my_meta', $meta, true);
Thanks for the tutorial Voodoo!!
Reply ↓
1. Rev. Voodoo Post authorAugust 1, 2011 at 6:56 am
I was tied up with school all weekend, but you got it all figured out! I was going to point you to another tutorial I had up here about working with
meta data from the front end…. but you did exactly what the tutorial would have shown, good job!
Reply ↓
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
14/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
21. Toure July 31, 2011 at 5:29 am
Is it fair to hope you will give us the chance to modify the post from the front end? Some clients should really be deprive from the excuse of modifying the post by
login in the admin area at all.
Reply ↓
1. Rev. Voodoo Post authorAugust 1, 2011 at 7:00 am
I would like to get that feature going…. but I don’t think I’ll have any time real soon. I’m super busy with school and work unfortunately. Have you tried
the edit from front end plugin? I’m not sure if that only allows admins to edit, or what…. I haven’t tried it. My main problem is that I allow anyone to post,
so how to control who can edit? Plus I use images on my form, and I haven’t been able to figure that part out, for previewing and editing. So yeah,
basically it is my goal to get front end editing up here, just not sure when I’ll have time.
Reply ↓
2. Danko Dubajic August 5, 2011 at 3:36 am
This is a tricky thing actually.
I haven’t tried much of that but there are some issues about that editing.
What kind of editing client wants, picture upload, ….
It’s fairly easy to create jQuery code that can change HTML inside tag, but if you want it to be serious editor you’ll have to enable shortcodes, picture
upload with preview, etc, etc, and that’s really really hard.
It’s something we just talked among us but no one actually started something more about that.
I’m sure we’ll have to make something like that and as soon as we start it I’ll make some posts about it.
Until then encourage your clients to learn WP admin Reply ↓
1. Rev. Voodoo Post authorAugust 5, 2011 at 7:18 am
For now, I just tell people if they make a mistake that they need fixed, just make a new post. I check my site frequently. If I see a dup, I delete the
first one. It’s not perfect, but it works fine. This works even better if the post submitted has to be moderated first.
Reply ↓
22. Eyal August 3, 2011 at 9:53 pm
Great job with this tutorial!! Now how about posting a form that edit posts? Reply ↓
1. Rev. Voodoo Post authorAugust 4, 2011 at 6:56 am
Yup, if you look through the comments here, it’s definitely something we’ve talked about. I would love to get edit capabilities going for sure. There are
some issues to work through with regards to permissions, images, etc. If I can get some spare time away from work and school, I definitely plan to work on
that, as I need that feature on one of my sites.
Reply ↓
23. Marj Wyatt August 5, 2011 at 5:05 pm
I was thrilled when I saw that you had written a tutorial on this topic, Rev Voodoo. Your other tutorial on adding widgets to posts was so good.
With a few tweaks and possibly one code correction, I got it to work and add images as attachments to posts. The possible code correction, by the way, was that
the function was adding the attachment to $post_id where the wp_insert_post function was adding attachments to a variable named $pid.
Once again, your generosity has gotten me over a hump. Thank you very much for sharing your WordPress schemes with us. Reply ↓
1. Rev. Voodoo Post authorAugust 8, 2011 at 7:14 am
Thanks, I’ll have to look in to that. The code I have up on here is a direct copy and paste from my form on my site, which is working great. But just
because it’s working doesn’t mean I haven’t made some mistakes in the code!
Reply ↓
24. Mr Beta August 31, 2011 at 3:27 am
Very nice tutorial. I have been working on this functionality for a while, you gave me just the things I was missing. My question is: is there a way to edit/delete a
post from the front end? Currently, I am using the front end code to allow users to manage their own coupons. I would like to allow them to edit/delete coupons
that are in the list.
Reply ↓
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
15/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
1. Rev. Voodoo Post authorAugust 31, 2011 at 6:03 am
If you look through the comments on this and related posts, we haven’t gotten there yet. It would definitely be a great feature. There are a few problems to
work through. Editing basic posts wouldn’t be too hard, but if post meta and images are involved it gets harder… at least for me. Some folks have had
success using jquery, and I hope to get to see some of that code, its not my strength.
Another major problem is that, at least for me, I allow not signed in users to post through the form. I don’t see how to handle permissions with an edit/delete
feature. If a not logged in user could edit or delete, then anyone could.
I do want to figure this out soon, just been real busy lately. But I’ll take another look at it
Reply ↓
25. Mr Beta August 31, 2011 at 10:20 am
I agree that jquery will probably be the best way to handle this. I’m going to work and see what I can come up with. As for permissions to edit or post, this is how
I am currently handling it:
<?php
// First check to see if this is the admin
if (!current_user_can('update_core')) {
echo 'You are not authorized to use this feature';
}
// I added a user capability so I check to see if the user has access
elseif (!current_user_can('add_coupon')) {
echo 'You are not authorized to use this feature';
}
// Put the form here
else { }
</php>
Reply ↓
1. Rev. Voodoo Post authorAugust 31, 2011 at 11:11 am
A good way to do it for people who sign in. My form is used by people who never sign in for the most part, which presents the bulk of my issue! If you
come up with a cool edit solution, I’d love to see it!
Reply ↓
2. Toure October 28, 2011 at 8:38 am
Did you guy ever figure out how to edit and delete existing post from the frontend. Actually I am looking for a way to let a post author edit or delete his
post from the frontend directly.
Thanks for any guidance.
What has been going on this section is one of the most important functionally of wordpress. If master, one could do everything with wordpress. This is the
basis of all social networking, the ease for user to edit his posts. It will be nice to have a complete recapitulative of this. Preferably on a pfd.
Reply ↓
1. Rev. Voodoo Post authorOctober 28, 2011 at 9:16 am
Man, I would love to get it going. I’ve only been frustrating myself! Thing is, I KNOW there has gotta be someone out there that could set this up in
a day!
My next goal, is to get the full editor involved. WP 3.3 is going to make that really easy to do. Once I get that going, it’s back to editor/delete. I think
the delete thing will be simple, so long as your form requires the user to be signed in. The edit part still throws me. I think the basic info will be easy,
probably meta won’t be hard too. Images have me a bit stumped…..
Reply ↓
2. Rev. Voodoo Post authorNovember 1, 2011 at 10:25 am
I think this may work for deleting posts on the front end….
<?php if (current_user_can('edit_post', $post->ID)) echo "<a href='" . wp_nonce_url("/wp-admin/post.php?action=delete&post
Reply ↓
3. Rev. Voodoo Post authorNovember 1, 2011 at 10:31 am
http://wordpress.stackexchange.com/questions/17400/howcanieditapostfromthefrontend
Is also a post about front end editing…. see if that gets you started!
Reply ↓
26. Maarten Lauwaert October 31, 2011 at 4:21 pm
Cool! Just what I needed. I was using gravity forms for this, but it was limiting me. Just one thing, do you have any idea how to add a “create new category” in
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
16/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
the form? This would be perfect for me!!
Reply ↓
1. Rev. Voodoo Post authorNovember 1, 2011 at 10:37 am
I have never done it…. so I’m not 100%, but I’m pretty sure you could just have a text field, and pass the value of that to
wp_create_category($category);
Reply ↓
1. Maarten Lauwaert November 1, 2011 at 12:37 pm
I’m not a wizz at forms, just starting out. Can you help me implement it in a form?
Reply ↓
1. Rev. Voodoo Post authorNovember 1, 2011 at 1:12 pm
I’ve never actually used it…. it just seems like it would work. If I get a chance, I’ll try to play around with it a bit….. I’m super tied up right
now unfortunately.
Reply ↓
27. Eyal November 1, 2011 at 12:54 pm
Hi guys,
thank to this tutorial I started my project using front end posting. Later I created a user page that when one is logged in it shows a list of his listings and two
buttons of edit and delete next to each listing. Both buttons are working in front end. User can delete his listings or edit them in front end same as creating a new
one. if you’d lik to, I can do some posting later on when I will be home in my computer.
Reply ↓
1. Rev. Voodoo Post authorNovember 1, 2011 at 1:13 pm
That would be absolutely fantastic!!
Reply ↓
1. Maarten Lauwaert November 1, 2011 at 3:11 pm
would be great indeed!
Reply ↓
2. Toure November 2, 2011 at 11:36 am
Did you help us with this already? I can’t wait to see how you did it. Please keep us updated.
Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 11:44 am
@fitoussi has a bunch of comments here on making the edit form. I’ve just promoted him to contributor, so we may have a full article coming up on
how to do it!
Reply ↓
2. fitoussi November 2, 2011 at 11:48 am
i posted two codes below so you can take a look. first one if for “mycoupons.php” file and the other one is for “editcoupons.php” file. however, i
posted the “editcoupon.php” code twice. the first one came out with an error so use the second post in the very bottom.
i will probably make an entire post later try to simplify things. but for now you can look at the codes and make it work with your project.
Reply ↓
28. Eyal November 1, 2011 at 6:57 pm
ok,
so this is a template file called “mycoupons.php”. this is how i use it in my project but you will have to change few things to make it work with your site. the
page should (it works for me) display the posts of a logged in user ( you can see at the top of the page there is a code checking if user is logged in or not) using a
query posts of the current logged in user. so it will not display any other post beside those that belong to the logged in user. first to be displayed are the approved
posts and below are the pending posts. the loop displays the title, the thumbnail, the content , the date the post was created and “edit” and “delete” buttons of each
post. once you click on delete button the post should be deleted and when click on edit you will be directed to a “editcoupon.php” file that i will post later. there
you will be able to edit your post.
in my site i create a button called ” My Coupons”. this button displays only when a user is logged in and when the user click on it he is being directed to the “my
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
17/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
coupons.php” file. that is how i created the button but of course you can do it however you want:
.
below is the entire code from my “mycoupons.php” file. i left it the way i use it. you will have to change in few places including the div ids and classes. i hope it
will come out ok in this comment. i guess you can copy and paste in into a code editor to see it better.
$current_user>ID,’post_status’ => ‘publish’ , ‘post_type’ => array( ‘coupons’ ) ) ); ?>
<div id="post” >
<a href="”>post_title; ?>
<input type="hidden" name="postid" value="” />
<input type="hidden" name="postid" value="” />
Pending Approval
$current_user>ID,’post_status’ => ‘pending’ , ‘post_type’ => array( ‘coupons’ ) ) ); ?>
<div id="post” >
<a href="”>post_title; ?>
<input type="hidden" name="postid" value="” />
<input type="hidden" name="postid" value="” />
Reply ↓
29. fitoussi November 1, 2011 at 7:03 pm
well, the code didn’t come out good.
<?php if ( !is_user_logged_in()) {
wp_redirect( 'www.site login page or home page' );
} else {
?>
<?php
/**
* template for displaying "My coupons" page.
* created by Eyal Fitoussi
*/
if( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
set_query_var( 'postid1', $_POST['postid'] );
////////// check if user is logged in, if not direct him to logi
wp_delete_post( get_query_var( 'postid1'), true ); ////////// delete choosen post
};
get_header(); ?>
<div id="content" class="cf-bp-wrap" role="main">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php query_posts( array( 'author' => $current_user->ID,'post_status' => 'publish' , 'post_type' => array( 'coupons' ) ) ); ?>
<?php if ( !have_posts() ): ?>
<br />
<div class="info" id="message">
<p><?php _e( 'No coupons found.', 'coupons' ); ?></p>
</div>
<?php endif; ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> 
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<div class="my-coupon-ad">
<div id="coupon-info">
<div id="coupon-header">
<div id="coupon-title"><a href="<?php the_permalink(); ?>"><?php echo $p
</div> 
<div id="info-holder">
<div class="coupon-image"><?php echo get_the_post_thumbnail( get_the_ID(
<div class="coupon-description"><?php the_content(); ?></div>
</div>
<div id="coupon-bottom">
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
18/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
<div id="creat-time">
<div><?php _e( 'Posted On - ', 'coupons' ); ?><?php the_date();
</div>
</div> 
<div id="coupon-buts">
<form id="edit-coupon" action="http:// Url to the file you create for editing po
<input type="hidden" name="postid" value="<?php the_ID(); ?>" />
<input type="submit" value="Edit" />
</form>
<form id="delete-coupon" action="" method="post"> 
<input type="hidden" name="postid" value="<?php the_ID(); ?>" />
<input type="submit" value="Delete" />
</form>
</div> 
</div>
</div> 
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<div class="clear"></div>
<h3>Pending Approval</h3>
<?php query_posts( array( 'author' => $current_user->ID,'post_status' => 'pending' , 'post_type' => array( 'coupons' ) ) ); ?>
<?php if ( !have_posts() ): ?> 
<br />
<div class="info" id="message">
<p><?php _e( 'No coupons found.', 'coupons' ); ?></p>
</div>
<?php endif; ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> 
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<div class="my-coupon-ad">
<div id="coupon-info">
<div id="coupon-header">
<div id="coupon-title"><a href="<?php the_permalink(); ?>"><?php echo $p
</div> 
<div id="info-holder">
<div class="coupon-image"><?php echo get_the_post_thumbnail( get_the_ID(
<div class="coupon-description"><?php the_content(); ?></div>
</div>
<div id="coupon-bottom">
<div id="create-time">
<div><?php _e( 'Posted On - ', 'coupons' ); ?><?php the_date();
</div>
</div> 
<div id="coupon-buts">
<form id="edit-coupon" action="http:// Url to the file you create for ed
<input type="hidden" name="postid" value="<?php the_ID(); ?>" />
<input type="submit" value="Edit" />
</form>
<form id="delete-coupon" action="" method="post"> 
</div>
</div> 
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
<?php locate_template( array( 'left-sidebar.php' ), true ); ?>
<?php get_footer(); ?>
<?php } ?> 
this is the “mycoupons.php” file
Reply ↓
30. fitoussi November 1, 2011 at 7:10 pm
in the code above you need to change the “post_type” in the query_posts to your post type.
<?php query_posts( array( 'author' => $current_user->ID,'post_status' => 'publish' , 'post_type' => array( 'coupons' ) ) ); ?>
you also need to add the url of the “editpost.php” file that you will create later to the form.
<form id="edit-coupon" action="http:// Url to the file you create for editing post" method="post">
and in the very top you add the url where you wont the user to be redirect if he is not logged in:
wp_redirect( 'www.site login page or home page' );
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
19/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Reply ↓
31. fitoussi November 1, 2011 at 8:39 pm
the code below is the file “editcoupon.php”. this is how i use it and it works perfect. it is very similar to the “front end post form” from the original tutorial by
voodoo. you will have to change things around to make it work with your site. i put comments next to some of the places that need to be changed. also look at the
fieldsets of the form and change them to your fieldsets .
when you edit a post all the fields of the form should be field with the current information of the post. categories should displayed by dropdown menu when the
current category is selected.
there is a small javascript that check if the image need to be change or not. that is how i use it , if you find a better way please let me know.
it will look pretty messy at first but if you open it in a code editor ( i like notepad++) it will be easier to look around. probably will not work at first shot but you
you guys have any questions you are more then welcome to ask me.
<?php if ( !is_user_logged_in()) {
wp_redirect( 'http://url to login page' ); // url to redirect user if he is not logged in
} else {
?>
<?php
/*
Template Name: new coupon form
*/
?>
<?php
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == "edit_post" && isset($_POST['postid']))
$post_to_edit = array();
$post_to_edit = get_post($_POST['postid']); // get the post id that we are editing. do not change it !!
// code below is to save the information that we entered in the form
// edit the names to your fields names, add or remove.
// need to match the names from your "new post" form
$title = $_POST['title'];
$description = $_POST['description'];
$street = $_POST['street'];
$apt = $_POST['apt'];
$city = $_POST['city'];
$state = $_POST['state'];
$zipcode = $_POST['zipcode'];
$phone = $_POST['phone'];
$tags = $_POST['post_tags'];
$image = $_POST['image'];
$post_to_edit->post_title = $title;
$post_to_edit->post_content = $description;
$pid = wp_update_post($post_to_edit);
// save taxonomies: post ID, form name, taxonomy name, if it appends(true) or rewrite(false)
wp_set_post_terms($pid, array($_POST['cat']),'coupons_categories',false); // change 'coupons_categories' to the name of your cat
wp_set_post_terms($pid, array($_POST['post_tags']),'coupons_tags',false); // change 'coupons_tags' to the name of your tags taxo
//UPDATE CUSTOM FIELDS change the custom fields names , street, apt ,city..... to your custom fileds name. you can add remove th
update_post_meta($pid, 'street', $street);
update_post_meta($pid, 'apt', $apt);
update_post_meta($pid, 'city', $city);
update_post_meta($pid, 'state', $state);
update_post_meta($pid, 'zipcode', $zipcode);
update_post_meta($pid, 'phone', $phone);
//REDIRECT
wp_redirect( 'www.url to "my-coupons.php" page' ); // will go to this page when doen editing
//INSERT OUR MEDIA ATTACHMENTS
if ( $_POST['change_image'] == 1) {
//this will check if need to change the image or not. dont change it!!
if ($_FILES) {
foreach ($_FILES as $file => $array) {
$newupload = insert_attachment($file,$pid);
// $newupload returns the attachment id of the file that
// was just uploaded. Do whatever you want with that now.
}
} // END THE IF STATEMENT FOR FILES
} // END THE IF STATEMENT FOR if to upload image
} // end check for errors
} // END THE IF STATEMENT THAT STARTED THE WHOLE FORM
?>
<?php get_header(); ?>
<script>
// this script check if user want to change the image or not. do not change nothing in here.
function showMe (it, box) {
var vis = (box.checked) ? "visible" : "hidden";
$img = (box.checked) ? document.edit_post.change_image.value = "1" : document.edit_post.change_image.value = "0" ; // send the right v
document.getElementById(it).style.visibility = vis;
;
}
</script>
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
20/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
<body onload="showMe('image', 'c1')">
<?php $post_to_edit = get_post($_POST['postid']); ?>
<?php $terms = get_the_terms($post_to_edit->ID, 'coupons_categories'); ?> 
<?php $term_name = strip_tags( get_the_term_list( $post_to_edit->ID, 'coupons_categories', '', ', ', '' ) ); ?> 
<?php $args = array(
'selected'
=> $term_id,
'name'
=> 'cat',
'class'
=> 'postform',
'tab_index'
=> 10,
'depth'
=> 2,
'hierarchical'
=> 1,
'taxonomy'
=> 'coupons_categories', // change 'coupons_categories' to the name of your taxonomy
'hide_empty'
=> false ); ?> <?php /* array for wp_dropdown_category to display with the current post category selected by defau
<div id="content" role="main">
<div class="new-coupon-form">

<form id="edit_post" name="edit_post" method="post" action="" enctype="multipart/form-data">

<fieldset name="name">
<label for="title">Business Name:</label><br />
<input type="text" id="title" value="<?php echo $post_to_edit->post_title; ?>" tabindex="5" name="title"
</fieldset>

<fieldset id="category">
<label for="cat" ><?php wp_dropdown_categories( $args ); ?></label> 
<fieldset class="content">
<label for="description">Description:</label><br />
<textarea id="description" tabindex="15" name="description" ><?php echo $post_to_edit->post_content; ?>
</fieldset>

<?php echo get_the_post_thumbnail( $post_to_edit->ID, array( 200, 150 ) ); ?><br />
<input type="checkbox" name="c1" onclick="showMe('image', this)" >Change Image
<fieldset id="image">
<label for="image">Choose Image:</label>
<input type="file" name="image" id="image" tabindex="30" value="" />
</fieldset>
<h3> business's full address: </h3>
<fieldset class="street">
<label for="street">Street:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'street', true); ?>" id="street" ta
</fieldset>
<fieldset class="apt">
<label for="apt">Apt/Suit Number:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'apt', true); ?>" id="apt" tabindex
</fieldset>
<fieldset class="city">
<label for="city">City:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'city', true); ?>" id="city" tabind
</fieldset>
<fieldset class="state">
<label for="winerating">State:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'state', true); ?>" id="state" tabi
</fieldset>
<fieldset class="zipcode">
<label for="zipcode">Zip Code:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'zipcode', true); ?>" id="zipdode"
</fieldset>
<fieldset class="phone">
<label for="phone">Phone Number:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'phone', true); ?>" id="phone" tabi
</fieldset>

<fieldset class="tags">
<label for="post_tags">Additional Keywords (comma separated):</label><br />
<input type="text" value="<?php echo $coupons_tags; ?>" tabindex="35" name="post_tags" id="post_tags" />
</fieldset>
<fieldset class="submit">
<input type="submit" value="Post Review" tabindex="40" id="submit" name="submit" />
</form>
</fieldset>
<input type="hidden" name="postid" value="<?php echo $post_to_edit->ID; ?>" />
<input type="hidden" name="action" value="edit_post" />
<input type="hidden" name="change_cat" value="" />
<input type="hidden" name="change_image" value="" />
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
21/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress

</div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php } ?> 
Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 9:15 am
Wow, I appreciate you sharing that code. I hope I find some time soon to work with it. And maybe make a proper post about it all. Very cool!
Reply ↓
1. fitoussi November 2, 2011 at 10:48 am
i thought that you might want to do it. i would have done it a little more organize but it is a little hard when i do it as a comment.
Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 11:05 am
I would love to make this out as a full post. But I’m not going to be able to play with the code for a while. School and work are killing me!
You are welcome to make a guest post if you’re ever in the mood!
Reply ↓
1. fitoussi November 2, 2011 at 11:13 am
that is a good idea. i think i will do it. for now i found that there is a small error in the editcoupon.php so ill post it below again.
2. Rev. Voodoo Post authorNovember 2, 2011 at 11:15 am
If you want to do a post here on VoodooPress, let me know. I’ll change you to a contributer so you can post. If not, I understand!
32. fitoussi November 2, 2011 at 11:22 am
there was a small error in the first post of the editcoupon.php. this is the fixed code (i hope it will come out with no errors this time).
<?php if ( !is_user_logged_in()) {
wp_redirect( 'http:// login page or any other page' ); // this will redirect user if not logged in.
} else {
?>
<?php
/*
Template Name: new coupon form
*/
?>
<?php
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == "edit_post" && isset($_POST['postid']))
$post_to_edit = array();
$post_to_edit = get_post($_POST['postid']); // get the post id that we are editing. do not change it !!
// code below is to save the information that we entered in the form
// edit the names to your fields names, add or remove.
// should match the names from your "new post" form
$title = $_POST['title'];
$description = $_POST['description'];
$street = $_POST['street'];
$apt = $_POST['apt'];
$city = $_POST['city'];
$state = $_POST['state'];
$zipcode = $_POST['zipcode'];
$phone = $_POST['phone'];
$tags = $_POST['post_tags'];
$image = $_POST['image'];
$post_to_edit->post_title = $title;
$post_to_edit->post_content = $description;
$pid = wp_update_post($post_to_edit);
// save taxonomies: post ID, form name, taxonomy name, if it appends(true) or rewrite(false)
wp_set_post_terms($pid, array($_POST['cat']),'coupons_categories',false); // change 'coupons_categories' to the name of your cat
wp_set_post_terms($pid, array($_POST['post_tags']),'coupons_tags',false); // change 'coupons_tags' to the name of your tags taxo
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
22/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
//UPDATE CUSTOM FIELDS change the custom fields names , street, apt ,city..... to your custom fileds name. you can add or remove
update_post_meta($pid, 'street', $street);
update_post_meta($pid, 'apt', $apt);
update_post_meta($pid, 'city', $city);
update_post_meta($pid, 'state', $state);
update_post_meta($pid, 'zipcode', $zipcode);
update_post_meta($pid, 'phone', $phone);
//REDIRECT
wp_redirect( 'www.url to "my-coupons.php" page' ); // will go to this page when doen editing
//INSERT OUR MEDIA ATTACHMENTS
if ( $_POST['change_image'] == 1) {
//this will check if need to upload new image or not. dont change it!!
if ($_FILES) {
foreach ($_FILES as $file => $array) {
$newupload = insert_attachment($file,$pid);
// $newupload returns the attachment id of the file that
// was just uploaded. Do whatever you want with that now.
}
} // END THE IF STATEMENT FOR FILES
} // END THE IF STATEMENT FOR if to upload image
} // end check for errors
} // END THE IF STATEMENT THAT STARTED THE WHOLE FORM
?>
<?php get_header(); ?>
<?php /* this script check if user want to change the image or not. do not change nothing in here. */ ?>
<script>
function showMe (it, box) {
var vis = (box.checked) ? "visible" : "hidden";
$img = (box.checked) ? document.edit_post.change_image.value = "1" : document.edit_post.change_image.value = "0" ; // send the right v
document.getElementById(it).style.visibility = vis;
;
}
</script>
<body onload="showMe('image', 'c1')">
<?php $post_to_edit = get_post($_POST['postid']); ?>
<?php $terms = get_the_terms($post_to_edit->ID, 'coupons_categories'); ?>
<?php /* change 'coupons_categories' to the name
<?php $coupons_tags = strip_tags( get_the_term_list( $post_to_edit->ID, 'coupons_tags', '', ', ', '' ) ); ?> <?php /* change 'coupons_ta

<?php $term_name = strip_tags( get_the_term_list( $post_to_edit->ID, 'coupons_categories', '', ', ', '' ) ); ?> <?php /* change 'coupons
<?php $term_obj = get_term_by('name', $term_name, 'coupons_categories'); ?> <?php /* change 'coupons_categories' to the name of your tax
<?php $term_id = $term_obj->term_id ;?> 
<?php $args = array(
'selected'
=> $term_id,
'name'
=> 'cat',
'class'
=> 'postform',
'tab_index'
=> 10,
'depth'
=> 2,
'hierarchical'
=> 1,
'taxonomy'
=> 'coupons_categories', // change 'coupons_categories' to the name of your taxonomy
'hide_empty'
=> false ); ?> <?php /* array for wp_dropdown_category to display with the current post category selected by defau
<div id="content" role="main">
<div class="new-coupon-form">

<form id="edit_post" name="edit_post" method="post" action="" enctype="multipart/form-data">

<fieldset name="name">
<label for="title">Business Name:</label><br />
<input type="text" id="title" value="<?php echo $post_to_edit->post_title; ?>" tabindex="5" name="title"
</fieldset>

<fieldset id="category">
<label for="cat" ><?php wp_dropdown_categories( $args ); ?></label> 
<fieldset class="content">
<label for="description">Description:</label><br />
<textarea id="description" tabindex="15" name="description" ><?php echo $post_to_edit->post_content; ?>
</fieldset>

<?php echo get_the_post_thumbnail( $post_to_edit->ID, array( 200, 150 ) ); ?><br />
<input type="checkbox" name="c1" onclick="showMe('image', this)" >Change Image
<fieldset id="image">
<label for="image">Choose Image:</label>
<input type="file" name="image" id="image" tabindex="30" value="" />
</fieldset>
<h3> business's full address: </h3>
<fieldset class="street">
<label for="street">Street:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'street', true); ?>" id="street" ta
</fieldset>
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
23/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
<fieldset class="apt">
<label for="apt">Apt/Suit Number:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'apt', true); ?>" id="apt" tabindex
</fieldset>
<fieldset class="city">
<label for="city">City:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'city', true); ?>" id="city" tabind
</fieldset>
<fieldset class="state">
<label for="winerating">State:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'state', true); ?>" id="state" tabi
</fieldset>
<fieldset class="zipcode">
<label for="zipcode">Zip Code:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'zipcode', true); ?>" id="zipdode"
</fieldset>
<fieldset class="phone">
<label for="phone">Phone Number:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'phone', true); ?>" id="phone" tabi
</fieldset>

<fieldset class="tags">
<label for="post_tags">Additional Keywords (comma separated):</label><br />
<input type="text" value="<?php echo $coupons_tags; ?>" tabindex="35" name="post_tags" id="post_tags" />
</fieldset>
<fieldset class="submit">
<input type="submit" value="Post Review" tabindex="40" id="submit" name="submit" />
</form>
</fieldset>
<input type="hidden" name="postid" value="<?php echo $post_to_edit->ID; ?>" />
<input type="hidden" name="action" value="edit_post" />
<input type="hidden" name="change_cat" value="" />
<input type="hidden" name="change_image" value="" />

</div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php } ?> 
also look at every fieldset. in the value of the textarea or the input filed there is a code that echo the current value of the post (custom field or text area) to the fields
before the user edit them. make sure you change the fields name to your name.
look at the value of the input field for example:
<fieldset class="street">
</fieldset>
<label for="street">Street:</label><br />
<input type="text" value="<?php echo get_post_meta($post_to_edit->ID,'street', true); ?>" id="street" ta
Reply ↓
33. fitoussi November 2, 2011 at 11:26 am
sure. i can give it a shot. i will defiantly try to make it as simple as i can.
Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 11:41 am
Alright, I made you a contributer…. o I would guess that means you can post now? I’ve honestly never done that before…. so have fun! Any questions,
shoot em my way rvoodoo (at) voodoopress (dot) com. Appreciate you trying to help all the folks out. Lots of people are interested in what you’ve got
going here!
Reply ↓
1. Maarten Lauwaert November 2, 2011 at 11:46 am
Gotta love the velocity in this post Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 12:38 pm
Your comment broke the 100 comment mark. That’s a VoodooPress first on a post! Cool. I’m just super happy a reader has offered a solution
to a problem so many people have been looking for help with. I personally wasn’t going to have time to ecen think about any coding for at
least a month.
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
24/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Reply ↓
2. fitoussi November 2, 2011 at 11:50 am
great! i will try to start tonight when i get home.
Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 12:40 pm
Very much appreciate your effort! As do many readers. I have had many, many comments asking for editing/deleting capabilities.
Reply ↓
34. Rev. Voodoo Post authorNovember 2, 2011 at 12:54 pm
http://vudu.me/2r3
Now, who is going to be the first to get the full WP editor going with this in WP 3.3? Looks really promising!
Reply ↓
1. fitoussi November 2, 2011 at 1:13 pm
this is a great plugin. actually i was using this plugin before i created the front end edit form. However, some things with the plugin didn’t go well with my
project and that is when i removed it.
Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 1:24 pm
Which plugin? The article I linked there is referring to the upcoming WP 3.3, which will simply allow us to use the backend WP editor on the
frontend. Simple code, no plugins required. I really want to play some more. It might make image uploads and everything so much easier! That
would be cool! Reply ↓
1. fitoussi November 2, 2011 at 1:45 pm
oh my bad. now i see…. i first thought you were talking about this plugin http://wordpress.org/extend/plugins/frontendeditor/ which is great.
well, looks like things are going to be much easier soon. do you still want me to post here my code ?
Reply ↓
1. Rev. Voodoo Post authorNovember 2, 2011 at 2:40 pm
If you would, yes please! WP 3.3 may not be out for a month or more. Also, what we have put together works now, for sure. I haven’t
even begun to mess with the 3.3 code yet, and it may not be as easy to use as it implies. Or be as flexible. I think between my posts, and
what you have, we have a functional and comprehensive solution that folks can use today.
35. Rev. Voodoo Post authorNovember 3, 2011 at 7:17 am
For everybody following along with this thread, you can now check out:
http://vudu.me/2r8
The first part of the front end editing / deleting posts is up, and it’s very well written.
Reply ↓
36. Josh Allen November 3, 2011 at 7:58 am
If you check out the plugin ‘WP User Frontend’ [http://wordpress.org/extend/plugins/wpuserfrontend/], you’ll see that most of the editing is completed. I used
this with a combo of Profile Builder and it’s working flawlessly. I’ve completely eliminated the need to see anything about WordPress on
[http://www.libertyguide.com].
For the editing, I hacked a form together for both jobs and opportunities, so the editing could be written a little better.
Reply ↓
1. Rev. Voodoo Post authorNovember 3, 2011 at 8:39 am
Oh there are several plugins that accomplish a variety of front end tasks. Personally, I am looking to accomplish the task without relying on a plugin, as this
is a core feature of a site, and I don’t want to rely on a plugin that may break on an update or no longer be supported. Plus, it’s plain fun to figure this stuff
out! But thanks for the link, some readers may find that quite useful.
Reply ↓
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
25/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
37. Lev November 13, 2011 at 11:40 am
you are a life saver! , i needed this, thanx. I just need to work on its validation.
Reply ↓
38. Lev November 13, 2011 at 11:43 am
and is there a way to assign a default user , because the posts have no writer when I log out of wordpress
Reply ↓
1. Rev. Voodoo Post authorNovember 14, 2011 at 7:00 am
You could register a default user, and pass the ID of that user to post_author I would think. Maybe conditionalize that on is_user_logged in, so if they are
logged in, we don’t assign a post_author, as it gets credited to them automagically, if not logged in assign post_author to your default.
Reply ↓
1. Lev November 14, 2011 at 7:26 am
thanks, i will give that a try.
Reply ↓
1. Jan September 1, 2012 at 6:34 pm
Hi all,
i have tried submit post by not registered user but without success. I used this:
‘post_author’ => $authorID,
This author is only for not registered user, but when i want to send post i always get
“Page not exist and post is not saved”. Do you have some idea?
Thanks a lot. Jan
Reply ↓
39. David November 13, 2011 at 10:38 pm
I have this working pretty well… Only question I have is..
I want each “poster” to be able to add their name (author) to the post they submit.
Adding ‘post_author’ into the new_post array doesn’t seem to work.
I don’t want them to have to create an account. I just want it so they can add their name into the submitted post and have it displayed somewhere on the post Is there a way to get that working?
Reply ↓
1. Rev. Voodoo Post authorNovember 14, 2011 at 7:02 am
I would probably just use a custom field for this. I don’t think we can use post_author, as that is expecting an ID of a registered user. Since they aren’t
registered, they wouldn’t have an ID. Maybe conditionalize that field to only show up for people who aren’t logged in.
Reply ↓
40. Josh Nikle November 23, 2011 at 10:30 am
Again, great work. Is there any way to add a default image to this? I’ve edited the ” if ( has_post_thumbnail() ) {…” function for my theme, and it works perfectly
if I create a post through the regular WordPress admin area and leave out the featured image. However, when I leave the image area of this form blank, no default
image displays. Any ideas? Thanks.
Reply ↓
1. Rev. Voodoo Post authorNovember 28, 2011 at 7:07 am
Maybe you could try echoing out the value of the thumbnail meta… to see if something is getting written to that field even when the form field is left blank.
Reply ↓
1. Josh Nikle November 28, 2011 at 1:15 pm
Thanks for the reply. I ended up just putting an “if ($_POST['ad_image'] != “”)” statement around the upload code. If there’s something in the file
upload field, run it. Else, skip it entirely. That way the “if ( has_post_thumbnail() ) ” function in function.php works as intended. Cheating I suppose,
but thems the skills I have. Thanks again for your help.
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
26/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Reply ↓
1. Rev. Voodoo Post authorNovember 28, 2011 at 2:38 pm
Thems good skills! Cool fix! Thanks for reporting back what worked
Reply ↓
41. Ed Nailor November 24, 2011 at 3:27 pm
Great post… I have added this to a project and love that it easily adds the post. I would like the ability to add images… any thoughts? Would actually prefer a
simple upload as I do not want the user to actually use the WP media uploader. The user will be a logged in Author, and will have the capability to upload media.
But I would rather keep the image uploads as simple as adding a few fields (specific number of images).
Any ideas would be great and definitely appreciated.
Ed
Reply ↓
1. Rev. Voodoo Post authorNovember 28, 2011 at 7:03 am
http://vudu.me/6n
Another part of this tutorial series covers simple uploads. It’s basic, and doesn’t do any validating or anything, but if your users are going to be Authors,
then you probably already trust them not to do anything evil.
Reply ↓
42. James December 23, 2011 at 9:31 am
I seem to be having problems with this.
When I try to select a category it will forward to a search page with the category I selected.
Any ideas?
Thanks In advanced
James
Reply ↓
1. Rev. Voodoo Post authorDecember 27, 2011 at 7:21 am
This happens as soon as you select the category, or when you try to hit submit? Do you have any special plugins or anything for search?
Reply ↓
1. James December 27, 2011 at 8:08 am
hey,
Once I select a category from the drop down menu (without clicking submit) it redirects to a list of posts from that category.
I believe I have 2 search plugins installed.
Thanks Reply ↓
1. Rev. Voodoo Post authorDecember 28, 2011 at 8:22 am
Oops. My last comment got lost. (I just transferred hosts). Anyway, deactivate the plugins and test. They must be hijacking the category code.
Absolutely nothing is this code would cause any actions to occur on cat selection.
Reply ↓
43. Pingback: Search web | Kitesurfing
44. geminorum January 1, 2012 at 12:37 pm
what about :
wp_verify_nonce( $_POST['newpost'], ‘newpost’ );
Reply ↓
1. Scott Fennell February 16, 2012 at 10:08 pm
I agree. Where’s the check against the nonce after the form is submitted?
Reply ↓
1. Rev. Voodoo Post authorFebruary 17, 2012 at 7:01 am
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
27/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
What I would love, is for someone to finish this whole project off! Here’s the gig, I figured this out for a specific need. There was almost nothing
around the web for this project at the time. Several things are missing… we don’t have functioning validation, we don’t run any sort of checks, and
on the media upload portion, we don’t check what’s being uploaded (the upload is a different portion).
I’m tied up like crazy with work and school, neither of which have anything to do with WordPress. So I get precious little time to do the fun stuff. I’d
love to teach myself some more… but I teach myself things that I need to learn for my sites. I’ve moved on to using Gravity Forms for my front end
posting. So this isn’t something I can afford to dive into rigt now.
We’ve got a great start here, we’ve recently had guest posts showing us how to delete and edit these posts from the front end. What would be
awesome is for someone to grab this, clean it up a little, get what’s missing in place, and have an awesome and useful tutorial that a tonne of people
are looking for.
If anyone gets around to putting it all together, it would be very helpful to the community I’m sure! Hell, I’d probably throw in a VoodooPress
hoodie or something for it! (I’m paying for school, so I’m broke! But I can do a little something right?)
Reply ↓
45. Max Grundell January 23, 2012 at 8:18 am
Hello,
Grate tutorial,
So i have some problems. First i tried to write my own code from the tutorial but that didn’t work out so what i did was just simply to copy al of the code and
from there tried to get it to work but i get the same error message: ” Error: Form elements must not have name or id of “submit”. ”
Hoped that some one where able to help me here.
Best.
Reply ↓
1. Rev. Voodoo Post authorJanuary 23, 2012 at 8:52 am
Yup, should be a simple fix. I assume you are using Contact Form 7 on your site? It conflicts with this code. The simple way to fix that is to only allow
CF7 to load on pages where you actually need it (ie. where you have a form displayed).
http://vudu.me/4o
Toward the bottom of that page you can see an example code for blocking CF7 when it isn’t needed.
Reply ↓
1. Max Grundell January 30, 2012 at 8:03 am
Hello, and thank you for answer.
Got it sorted quiet well.
So I have a fallow up question on this….
So now i need two fields in my wp_post table to post FB access_token and user_id. I simply went in to the DB and created two varchar(255) fields,
and added changed the post code to:
$new_post = array(
'post_title'
=>
$title,
'post_content' =>
$description,
'post_category' =>
array($_POST['cat']), // Usable for custom taxonomies too
'tags_input'
=>
array($tags),
'post_status' =>
'draft',
// Choose: publish, preview, future, draft, etc.
'post_type'
=>
'post', //'post',page' or use a custom post type if you want to
'user_id' => $user,
'access_token' => $access_token,
);
Though it seams like it doesn’t post it to the DB. Do you maybe know why ?
Anything you can help me with ?
Reply ↓
1. Rev. Voodoo Post authorJanuary 30, 2012 at 8:46 am
http://codex.wordpress.org/Function_Reference/wp_insert_post
THose fields don’t exist within wp_insert_Post, so nothing would happen. You could pass those items into a custom field, or do something
with wpdb I would think to get your info passed into the DB.
Reply ↓
1. Max Grundell January 30, 2012 at 9:00 am
Okay,
What you think would be the easiest way to go ?
How do I post it in to a custom field ?
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
28/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
2. Rev. Voodoo Post authorJanuary 30, 2012 at 9:19 am
Well, it’s a bit hard for me to fully qualify an answer without knowing what yer doing, where the data comes from, what it’s used for, etc. But
in general, custom fields are super simple to use.
http://vudu.me/69 is my article about using them with this front end post method
Reply ↓
1. Max Grundell January 30, 2012 at 9:35 am
Well to explain what I’m doing I’m building a facebook app which will post a text to our blog and we will translate it and send back a
link to our blog with the text.
so what have to do is store your facebook ID and your access_token (your allowance for us to post something on your wall) this
information is not to be seen by the viewer i just need to get it in to the database so i can fetch it for posting on your FB wall.
I assume that i have to have to store it together with the post since I’m sending back the url to that exact post to the Facebook wall.
But you think the meta box is the way to go ?
3. Rev. Voodoo Post authorJanuary 30, 2012 at 9:45 am
Yeah, I think custom fields is the way to go. The whole point of them really, is to store data associated with a post. They can be used for damn
near anything. http://vudu.me/gr Has a bit more info about custom fields in general
Reply ↓
46. Lewis February 2, 2012 at 9:56 am
Thank you! Very helpful tutorial!
Reply ↓
1. Rev. Voodoo Post authorFebruary 2, 2012 at 12:29 pm
Glad you found this helpful!
Reply ↓
47. Andrew February 6, 2012 at 12:35 pm
Hello. Thank you for this awsome tutorial. I have one question maybe you can help me.
After I hit post button everything works well except if I hit refresh on the page the form sends me the post again. If i refresh the page 10 times after posting I will
have 10 posts. Any ideas on how to fix that? Thanks
Reply ↓
1. Rev. Voodoo Post authorFebruary 6, 2012 at 1:43 pm
When you submit the post, you have it set up to stay on the same page? In my code above, I use a wp_redirect to go to the new post. Redirecting there, or
to a thank you page, or some other landing page would keep that from happening I would think. Or does your redirect just not work?
Reply ↓
48. Giovanni February 13, 2012 at 5:26 am
Hi Rev. Voodoo, thanks for this great tutorial! You make me really fast and easy adding this function to my site. I have just a question: I need to edit the date of
the post by the form, how can I do?
Reply ↓
1. Rev. Voodoo Post authorFebruary 14, 2012 at 8:11 am
http://codex.wordpress.org/Function_Reference/wp_insert_post#Parameters
If you check here, you’ll see what parameters you can set through a form using wp_insert_post. You would just need to collect the date in the proper
format, and set it it the array using post_date
Reply ↓
49. Bosse Kossa February 29, 2012 at 3:54 am
Yes this is much easier than using a plugin… voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
29/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Reply ↓
1. Rev. Voodoo Post authorFebruary 29, 2012 at 6:48 am
If you are comfortable with code it is probably easier. I actually switched over to using a plugin for doing this all… it was easier to maintain to me. I use
Gravity Forms, which I’ll admint is a bit expensive. There is another new plugin out for people to check out…. Ninja Forms I believe it’s called. I just saw
a writeup about it the other day. It’s a lot cheaper… like $30 I think. It also allows for front end posting. I haven’t tried it, but figured I’d post that here for
people looking for a plugin option!
Reply ↓
50. @TheLoneCuber April 27, 2012 at 8:36 pm
(This is a little off topic, but I figured some VoodooPress insight might guide my way).
Is it possible to have a comment form (displayed on a generic page) that allows the user to comment on ANY post?
The user would have to select which post to comment on (from a dropdown or checkbox or otherwise) and then that post ID is passed on Submit (ensuring the
comment relates to the selected post)? I’ve done much Googling with no success. Hope someone can help.
Reply ↓
1. Rev. Voodoo Post authorApril 30, 2012 at 7:16 am
Yeah, it would be possible for sure… I’m not sure it’s something I can come up with… I’m certain it would require some sort of jQuery magic, to be able
to list all the posts, and then feed the selected post ID in with the comment. jQuery isn’t my strength… yet…
Reply ↓
51. Joe May 27, 2012 at 10:39 pm
How am I able to display subcategories in a dropdown list that users can select? For example, say I have category Dog with Big and Small as subcategories and a
category Type with Fur and Hair as subcategories, how can I allow users to click the dropdown list Dog and have that display Big and Small as choices and
when one is selected that gets posted as the selected sub category, then also click the dropdown list Type and choose from Fur or Hair? So say you selected Big
and Hair in those two dropdown lists, that post should then be listed under Big and Hair subcategories.
Im noticing this line:
but my problem is I dont know how to edit that to display a dropdown of a certain category
Code would be much appreciated I thank you all in advance for this lovely post and especially for a response to this question
Reply ↓
1. Joe May 28, 2012 at 12:42 am
Here is my test site:
http://purposeinspiredmarketing.com/gc500/wordpress/?page_id=4
And here is the modified code:
http://codepad.org/0Xrn7JWg
As you can see it shows two dropdowns, but if i select the two categories (1 from each dropdown) the post will only be saved as Type2′s category, Type1
never gets added.
Any ideas? Thanks agian! Reply ↓
52. Joe May 29, 2012 at 12:17 am
Nevermind I figured it out.
Thanks for the tut!
Reply ↓
1. Rev. Voodoo Post authorJune 4, 2012 at 7:45 am
Glad you got it figured out! I was on vacation, so unable to reply.
Reply ↓
53. Bill Gilmore June 12, 2012 at 1:48 pm
Wow dude thanks, thats a pretty lengthy tutorial and exactly what i’m looking for. Can I ask how you manage to create such great content, reply to all the
comments and have a job? You must work like the Flash mate voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
30/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Reply ↓
1. Rev. Voodoo Post authorJune 13, 2012 at 6:51 am
Does it get even crazier if I mention I’m putting in a few hours a night working on my Master’s degree? ugh… Reply ↓
54. rogocal June 13, 2012 at 11:54 am
Great guide dude! adapted it to my site and works exactly as i need, ty ^^
Reply ↓
55. david July 8, 2012 at 9:19 pm
hey man! Great tutorial. I am a bit of a newbie to this. I have a nonprofit dedicated to the nearly 10,000 animal euthanized every day. What I want is for a user
(whos is not logged in or registerd) to be able to write their own post for an animals. Please check out my website. http://www.alovinggoodbye.org and the page I
am trying to create > http://alovinggoodbye.org/?page_id=480
If you could lead me in the right direction I would really really appreciate any assistance. I have spent the entire weekend trying to get this to work with no luck.
Thank you !
David Hendrickson
Reply ↓
1. Rev. Voodoo Post authorJuly 9, 2012 at 6:55 am
What problems are you running into with the code? It’s just not working? Any particular errors or anything? I’m personally not really able to support
anything right now – I’m working far more than full time, and attending school full time. It’s impossible for me to do just about anything right now. While I
love this code that I pieced together, I just haven’t been able to work on it any more… I personally use gravity forms to handle my posting from front end
functions on my other sites. If I get some spare time between classes anytime soon, I’d love to be able to run through this code and clean it up, add some
functionality, etc…. but I can’t really do any of that right now.
Reply ↓
56. Camilo July 11, 2012 at 2:00 pm
dude Thank’s, your post help me very much
Reply ↓
1. Rev. Voodoo Post authorJuly 12, 2012 at 7:15 am
Excellent stuff, glad I could help!
Reply ↓
57. Miles August 18, 2012 at 9:45 am
I have two questions:
1. The form is working properly, including the custom fields, but when the post is created it says “No Categories.” I am selecting the categories, but they are not
being added to the post when it is created. I am using a custom taxonomy, but I think I have made the necessary changes. What am I doing wrong?
2. Is there a way to use the rich text editor instead of textarea?
Help would be appreciated!
Reply ↓
1. Miles August 19, 2012 at 2:48 pm
Nevermind. I figured it out. Here is the code you need to be able to make the category and tags work for a custom taxonomy:
//SET OUR TAGS AND CATEGORIES UP PROPERLY
wp_set_post_terms( $pid, $_POST['post_tags'], 'listing_tag', false );
wp_set_post_terms( $pid, $_POST['cat'], 'listing_category', false );
Reply ↓
1. Scott Fennell August 19, 2012 at 4:31 pm
It would be a good idea to sanitize $_POST before updating the db.
Reply ↓
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
31/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
1. Rev. Voodoo Post authorAugust 29, 2012 at 11:59 am
It absolutely would! This series of posts has grown kind of convuluted. In a couple of the posts (or in the comments) I had mentioned that! I
was hoping to move further on this project, and just pretty much haven’t had time since I got started. It’s rough around the edges, and needs
finishing up!
Reply ↓
2. Rev. Voodoo Post authorAugust 29, 2012 at 12:10 pm
There is, theoretically, a way to add in the normal editor. You might want to do a bit of research on using wp_editor. They opened it to be used in core, I
just haven’t had a chance to get to using it yet. I do hope to get to playing with that soon, I’d like to figure out using it!
Reply ↓
58. Pingback: An alternative to TDO Mini Forms for Wordpress? | PinkishHue.com
59. Deep September 2, 2012 at 3:14 am
Hi Rev,
Found your site very informative, but i am looking for a php script which i can upload on my server and allow outsourced bloggers to submit their work direct
and get it posted(draft) to other self hosted wp blog without sending them to it. Any help would be highly appreciate.
Thanks
Deep
Reply ↓
60. Sadaf Chohan September 18, 2012 at 4:43 am
Thankx for such an helping effort …
Reply ↓
61. Pingback: Bringing a WordPress Directory to Life It Takes a Village | WP Axis
62. Pingback: How to Post From Your Front End With No Plugin | taikhoannacdanh
63. Lupo February 10, 2013 at 7:08 am
Thank you for the geat help !
It was not easy, but it works fine…
Kind regards from Germany…
Reply ↓
1. Rev. Voodoo Post authorFebruary 11, 2013 at 9:06 pm
I’m glad the code is still working. I have not been able to work on it or develop it any further in some time now – I’m just far too busy!
Reply ↓
64. livepositiveway February 19, 2013 at 6:44 am
Your tutorial series really helped me a lot in my project. Thanks for your time in creating the tutorials
Reply ↓
1. Rev. Voodoo Post authorFebruary 20, 2013 at 12:56 pm
I’m glad this information is still helpful!
Reply ↓
65. Pingback: Front End Post Submission | MicroMedia Design Studio
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
32/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Search for: Search
Popular Posts
Modify the Width of the New WordPress Twenty Twelve Theme 0 comment(s) | 216 view(s)
How to Post From Your Front End With No Plugin 0 comment(s) | 125 view(s)
Working With Featured Image in WordPress 0 comment(s) | 63 view(s)
I See get_template_part in my WordPress Theme. What’s it For? How Do I Use It? 0 comment(s) | 50 view(s)
Customizing Twentyeleven, Let’s Start With Width and Smaller Header 0 comment(s) | 48 view(s)
Add VoodooPress to your Circle!
Donate a Beer!
If I've helped you, and you're happy, feel free to buy me a beer! Click or scan the code and it'll be done in no time!
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
33/34
3/27/13
Adding a Post Form to WordPress Front End With no Plugin - VoodooPress
Tags
3.3 3.4 2012 add_action admin after_setup_theme bluehost child theme cloudflare Columbus contest css customize featured image front end function functionality
functions.php get_post_meta google gravity forms header hook hosting launch links logo plugins post formats posts register_sidebar release review shirt spam theme the_post_thumbnail
voodoopress vudu.me WordCamp wordpress
twentyeleven twentytwelve update upgrade Subscribe via Email
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
Join 27 other subscribers
Email Address
Subscribe
Proudly powered by WordPress
voodoopress.com/how-to-post-from-your-front-end-with-no-plugin/
34/34