Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

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

share|improve this question
    
You need this information to every post or user? –  Philip Jan 21 '11 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? –  goldenapples Jan 21 '11 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 Jan 22 '11 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 Jan 22 '11 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 );
}
share|improve this answer
    
the code is what i need!!! how i can use it in front.end form page in my site? –  user4160 Mar 23 '11 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 Apr 1 '11 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.

share|improve this answer
    
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 Jan 22 '11 at 2:52
    
can you share here the form you have build? –  Philip Jan 22 '11 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 Jan 22 '11 at 9:36
    
@Philip How do you pull the meta data after you add it? –  hitautodestruct Mar 7 '13 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.

share|improve this answer
    
Where would i place that code –  user19892 Aug 30 '12 at 20:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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