Meta Boxes in Front End Post Submission Form

3 Views

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

Read More
<?php 

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>
            </div>

    </div>

    <?php
}

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'));
    wp_enqueue_script('datepicker');
}

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

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.

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. 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 );
}

  2. 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.

  3. 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.