Creating a “tell your story” page

In the past month I got 3 or 4 RFPs to wordpress projects that required a “Client stories” section – which can be achieved in one of three ways.
1. Allow user registration as contributers and let them write in the admin.
2. Create a form, mail the data to yourself and create posts later-own the copy-paste way.
3. Use a guest writer and wordpress functions to create a form automatically.

The problem with the first way is that the user is given access to the admin panel and can see / read pending posts and comments. This can be problematic though can be hacked (at least the post reading, not sure about the comments), and yet – if you want to keep your slick look, you’ll need to theme your admin.
The second solution is much simpler but can be very annoying, especially if you receive a lot of stories on weekly base.
The Third option, which is my favorite actually combines the first and the second solutions into a nice and elegant way – no more copy-paste and no need to provide anyone with access to your admin.

Preparations

First you need to create your guest user – So in your admin panel go to Users–>Add New and add a new user. Set the user Role to “contributer”. The name is not really important because we won’t be using that, but we do need the User_id value.

Because we are using only one guest user for all the stories, we can add a custom meta field for the person name. open a post and add a new meta field, lets call it “storyteller”.

The last task is to create a category for the user submitted stories, its not a “Must” because we can always use the author page to index all the stories, but I prefer a category.

Let the coding begin

The form

<form id="tellastory" method="post" action="">
<label for="fullname">Full Name </label>
<input id="fullname" name="fullname" type="text" maxlength="255" value=""/> 
<label for="title">Title </label>
<input id="title" name="title" type="text" maxlength="255" value=""/>
<textarea id="editor" name="editor" rows="20" cols="50">
</textarea>
<input type="hidden" name="form_id" value="123456" />		
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>

This gives us a very basic form with 3 fields – the storyteller’s name, the story title and the story content. also notice the hidden field called “form_id” with the value of “123456″.

$storyteller_user_id = "2";  //your guest user id here
$stories_category = "3";  //your stories category id here
$key = "storyteller";

if($_POST['form_id']=="123456"){
  $my_post = array(); 
  $my_post['post_title'] =$_POST['title'];
  $my_post['post_content'] = $_POST['fullname'];
  $my_post['post_status'] = 'draft';
  $my_post['post_author'] = $storyteller_user_id;
  $my_post['post_category'] = array($stories_category);
  $post_Num = wp_insert_post( $my_post );
  add_post_meta($post_Num, $key, $_POST['fullname']);
}

The code is pretty straight forward – we check if we got a post request and if so we create a new post using the “wp_insert_post” function. The variable $post_num should get the id of the new post if all went well.
Now that we know the post ID we can add the meta field with the storyteller’s name with add_post_meta.

IMPORTANT
Pleas notice that for the example I did not sanitize the received Post data. If you do use this code, please remember to do so.

Category listing
Copy your category.php (or index.php if no category.php file) file to a new file and name it category-X.php (X stands for your stories category number). Edit the file and replace “the_author()” call with these lines:

$key= "storyteller";   
if($storyteller = get_post_meta($post->ID, $key, true))
           echo $storyteller; 

Here we took the teller name from the meta field and placed it in the Author position so instead of getting a list of stories from “guest” we can display the full name.

Post listing

The code is very similar to the category code, with a tiny difference. because all the stories are actually posts they use the single.php template file. so we will check if the post has a meta author field and decide by that.

$key= "storyteller";   
if($storyteller = get_post_meta($post->ID, $key, true))
           echo $storyteller; 
else
           the_author();

7 Responses to Creating a “tell your story” page

  1. e-sushi™ GERMANY Windows 7 Mozilla Firefox 3.6.6 says:

    So far the best “howto” I found. I wonder why no one posted a “thank you” yet, so here goes: “thank you for this post”! It sure helps me create something alike… and now I know where to start the whole thing.

  2. hannit ISRAEL Windows XP Mozilla Firefox 3.6.7 says:

    Did you happen to add a rich editor to the form ?

  3. Nitzan ISRAEL SymbianOS 9.4 says:

    I used yui simple editor.

  4. hannit ISRAEL Windows XP Mozilla Firefox 3.6.8 says:

    hmm ? don’t know that one ….

  5. Nitzan ISRAEL Ubuntu Linux Mozilla Firefox 3.6.8 says:

    Yui simple editor is a Javascript editor from the Yahoo library you can read about it here

  6. fct Mac OS X Safari 533.19.4 says:

    This is definitely a great hack, I did not wanted to use a plugin at all. Thanks.
    But, where should I put these codes to make it work?
    A submit page I suppose. How about inserting a way to add users’ tags and category options incase I wanna have different categories like in pleasefixtheiphone.com
    thank you for this great tutorial

  7. fct Mac OS X Safari 533.19.4 says:

    This is definitely a great hack, I did not wanted to use a plugin at all. Thanks.
    But, where should I put these codes to make it work?
    A submit page I suppose. How about inserting a way to add users’ tags and category options incase I wanna have different categories like in http://pleasefixtheiphone.com/
    thank you for this great tutorial

Leave a Reply

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

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