How can I add meta boxes to the front end post submission form? Similar to front end post submission that creates new posts, the form replies should go directly into the post meta boxes.

Meta Boxes Code Example for post from back-end to front-end


function admin_init(){
    add_meta_box("mia_post_meta", "Information", "mia_post_meta", "post", "normal", "high");
add_action("admin_init", "admin_init");

function mia_post_meta($callback_args) {
    global $post;

    $post_type = $callback_args->post_type;
    $temp_array = array();

    $temp_array = maybe_unserialize(get_post_meta($post->ID,'mia_ev_settings',true));

    $mia_ev_bday = isset( $temp_array['mia_ev_bday'] ) ? $temp_array['mia_ev_bday'] : '';   
    echo '<script type="text/javascript">jQuery(document).ready(function(){jQuery("#mia_ev_bday").simpleDatepicker();});</script>';


    <div id="mia_custom_settings" style="margin: 13px 0 17px 4px;">

            <div class="mia_fs_setting" style="margin: 13px 0 26px 4px;">
                <label for="mia_ev_bday" style="color: #000; font-weight: bold;"> Birthday: </label>
                <input type="text" class="small-text" value="<?php echo $mia_ev_bday; ?>" id="mia_ev_bday" name="mia_ev_bday" size="67" />
                <br />
                <small style="position: relative; top: 8px;">ex: <code>13 Jan, 2011</code></small>



add_action('save_post', 'save_details');
function save_details($post_id){
    global $post;

    $temp_array = array();

    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) 
        return $post_id;

    $temp_array['mia_ev_bday'] = isset($_POST["mia_ev_bday"]) ? $_POST["mia_ev_bday"] : '';

    update_post_meta( $post->ID, "mia_ev_settings", $temp_array );

function mia_bday_scripts(){
    wp_register_script('datepicker', get_bloginfo('template_directory').'/js/date/datepicker.js', array('jquery'));

function mia_style_css(){
    wp_register_style( 'datepicker', get_bloginfo('template_directory').'/js/date/datepicker.css');

add_action('admin_print_scripts', 'mia_date_scripts');
add_action('admin_print_styles', 'mia_style_css');


The mia_ev_bday should be filled out by users on the front-end as well.

FORM EXAMPLE on Front-end see Image

The information added by users in the form should be displayed in the post and appear in the back-end meta box in the custom meta boxes.

  • You need this information to every post or user?
    – Philip
    Commented Jan 21, 2011 at 20:28
  • Can you show us your post submission form, and the code you're using to insert the post? It should be as simple as taking the post id after successfully inserting the new post and then calling update_post_meta with all your custom fields. But maybe I'm not sure what you're asking? Commented Jan 21, 2011 at 22:57
  • Thank you for your responses. Basically, what I am trying to do is to get the information from the front-end (edit area) to the back-end (edit area) to the front-end of the actual post. I have been playing around with ucan-post and wp-user-frontend plugins. The actual back-end meta to front-end works like a charm. But I can't figure out how to add the silly meta boxes to be filled out by users to the front-end edit area.
    – Mia
    Commented Jan 22, 2011 at 1:05
  • The templatic events theme has a add event page that is similar to what I'm trying to do. Link: templatic.com/demos/events/?ptype=post_event.
    – Mia
    Commented Jan 22, 2011 at 1:14

3 Answers 3


You can make a form that has an action of your form handling php script. In the php script, you can check if the form was submitted, and if there is an action, if so, then create variables for the form fields using the $_POST var. Then create the $post = array() to set up the post meta array, and use the wp_insert_post($post); to insert the post.

Here is an example of a form processing code I use for the frontend post form used on http://WPHonors.com. It works for the custom post type I created for it, which had a basic form set up, with a hidden post_type field with the post type as the value.

if( $_POST['post_type'] == 'site' ) {

    $title = $_POST['title'];
    $desc = $_POST['description'];
    $siteurl = $_POST['siteurl'];
    $cat = array( $_POST['cat'] );
    $tags = trim( $_POST['tags'] );

    if(!isset($title)) { echo '<div class="error">Title required.</div>'; }
    if(!isset($desc)) { echo '<div class="error">Description required.</div>'; }
    if(!isset($siteurl)) { echo '<div class="error">URL required.</div>'; }
    if($cat == -1) { echo '<div class="error">Select a category.</div>'; }
    if(!isset($tags)) { echo '<div class="error">Must use at least one tag.</div>'; }

    if (!current_user_can( 'publish_posts')) { $poststatus = 'draft'; } else { $poststatus = 'publish'; } 

    //$insert = new TypeSites();
    $post = array(
        'post_title'    => $title,
        'post_content'  => $desc,
        'siteurl'   => $siteurl,
        'post_category' => $cat,
        'tags_input'    => $tags,
        'post_status'   => $poststatus,
        'post_type' => 'site'
    wp_insert_post( $post );
  • the code is what i need!!! how i can use it in front.end form page in my site?
    – user4160
    Commented Mar 23, 2011 at 14:17
  • include it into a page template somewhere. thats all there is to it. just wrap this code in <?php ?> and change the form action to action="<?php $_SERVER['PHP_SELF']; ?>" should be it.
    – jaredwilli
    Commented Apr 1, 2011 at 12:31

After your wp_insert_post code use:

add_post_meta($post_id, 'name-of-custom-field', $customField, true);

change the 'name-of-custom-field' and add a form element $customField to put in the data of your form.

  • I can't get it to work. I have a feeling that you are right and I'm sure that I'm doing something wrong.
    – Mia
    Commented Jan 22, 2011 at 2:52
  • can you share here the form you have build?
    – Philip
    Commented Jan 22, 2011 at 7:46
  • I updated the meta box code from back to front above. I'm trying to use the ucan-post wordpress.org/extend/plugins/ucan-post or wp-user-frontend wordpress.org/extend/plugins/wp-user-frontend plugin, and integrate the custom fields in the post submission template. I have only added one additional test field to the form and then got stuck on making it work.
    – Mia
    Commented Jan 22, 2011 at 9:36
  • @Philip How do you pull the meta data after you add it? Commented Mar 7, 2013 at 15:55

The best solution is to pull the existing meta boxes onto your page on the front end without having to recreate them. No need to do any additional work, just use this code:

// Load necessary admin files
include( ABSPATH . 'wp-admin/includes/template.php' );
include( ABSPATH . 'wp-admin/includes/post.php' );
// Add meta boxes
do_action('add_meta_boxes', $post_type, $post);
do_action('add_meta_boxes_' . $post_type, $post);
// Show Meta Boxes
do_meta_boxes( $post_type, 'normal', $post );
do_meta_boxes( $post_type, 'advanced', $post );
do_meta_boxes( $post_type, 'side', $post );

As long has you have your other $_POST variables setup and are using wp_insert_post(), the 'save_post' action is called and the data in your metaboxes will be saved.

  • Where would i place that code
    – user19892
    Commented Aug 30, 2012 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.