So far this week, we have learned how to post from the front end. And we’ve expanded on that by allowing image uploads from the front end. We are going to go one step further today and add a meta box to our form. This way we can use the meta box to gather data and feed it into a custom field so we can use that data. The data can be just about anything, really use your imagination here. I’ll give some examples of stuff I’m thinking of, let’s get into it!
So I’m still going to be working on my wine rating form. My idea is to set up a 5 star type system. I’m going to offer radio checkboxes where the user picks 1-5 stars. The value of that selection will be fed into the custom field, and then depending on what is picked, an image depicting 1-5 stars will be displayed on the rating post. But that is coming soon. Today I will just use a text field that will take a standard text input. You could use this to gather a site url, a sub-title, anything you can think of. Time to get into some code.
The first thing we need to do is set up the text box. Like I said, mine will be to collect a rating. Here’s my form field:
<!-- wine Rating -->
<fieldset class="winerating">
<label for="winerating">Your Rating</label>
<input type="text" value="" id="winerating" size="60" tabindex="20" name="winerating">
</fieldset>
Obviously you can customize this however you want. The main part here is that I’m calling this winerating. We will be using that in the rest of the code to gather our data and feed it into a custom field. Next up we need to tweak our existing processing code to handle the custom field. Remember I’m working on the form we set up here and here, if your’s is different, you’ll have to accomodate that.
So back on our form, the top bit of code looks like:
// 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'];
And I added in my new form field to a variable, which you’ll recall is winerating. I just added it after the last line above, like this:
$tags = $_POST['post_tags']; $winerating = $_POST['winerating'];
Next up, I tweaked our existing array which looked like this:
// Add the content of the form to $post as an 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
);
Again right at the bottom I added my code. Don’t forget to add a comma to ‘post’ when adding a new line. So the bottom of that now looks like: This step is not necessary, I’ll explain after the code.
'post_type' => 'post', //'post',page' or use a custom post type if you want to 'winerating' => $winerating );
When I wrote this tutorial, I didn’t have a full understanding of how everything fit together. I got it working and was happy with that. But here’s one update. This particular step is unnecessary, it doesn’t do a thing! What we can add into the array are parameters used by wp_insert_post. Anything else doesn’t do anything! The rest of this tut works great, I just wanted to update this one misunderstanding I had.
And finally, just after the wp_insert_post line we add some code. If you followed yesterdays tutorial about adding images, I put this line of code after the wp_insert_post and above the foreach loop for the images. Here’s the existing code with the new line added for our meta box.
//save the new post $pid = wp_insert_post($new_post); add_post_meta($pid, 'rating', $winerating, true);
And that is all the code you need! Notice in the add_post_meta line above, the second parameter is rating. That is what we call to display our meta box/custom field value. So to display the value in your theme somewhere you just use:
<div class="wineRating"> <?php if( get_post_meta($post->ID, "rating", true) ): ?> <?php echo get_post_meta($post->ID, "rating", true); ?> <?php endif; ?> </div>
There you have it. Now that you have the basics all figured out, you can make a front-end post form, you can allow image uploads, and now you can use meta boxes to gather and display all sorts of other information. Time to go make some sort of fancy post form. Let me know what you come up with!
Tomorrow I will do a quick recap of the past three tutorials, and display my full code for this post form page template from top to bottom for review.