0

I just have one custom field (from metabox.io) that I need added to the front end of an existing form. Can someone just clarify the steps. I tried following this tutorial: https://voodoopress.com/add-a-meta-box-to-use-custom-fields-on-front-end-post-form/ but am confused with the steps such as adding the input fields into an array. Do we only need to do this if we're creating a form from scratch? Will this array already exist if I'm using an existing form?

I just need someone to clarify how to get the values of the metabox into an input field on the form and saving the data if the user edits the page and also if they submit.

**UPDATE

Admin code:

function get_dates( $meta_boxes ) {
$prefix = 'prefix-';

$meta_boxes[] = array(
    'id' => 'mydates',
    'title' => esc_html__( 'Dates Available', 'mydates' ),
    'post_types' => array( 'listing', 'page' ),
    'context' => 'side',
    'priority' => 'low',
    'autosave' => false,
    'fields' => array(
        array(
            'id' => $prefix . 'mydates',
            'type' => 'date',
            'name' => esc_html__( 'Date Picker', 'mydates' ),
            'desc' => esc_html__( 'Select multiple dates', 'mydates' ),
            'clone' => true,
            'sort_clone' => true,
        ),
    ),
);

return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'get_dates' );

Front end form (editing and submitting the form)

$mydates = if(isset($_POST['prefix-mydates'])) echo $_POST['prefix-mydates'];


<fieldset>
<input type="text" value=""  id="prefix-mydates" class="rwmb-date hasDatepicker" size="60" tabindex="20" name="prefix-mydates">
</fieldset>
  • Try the generator or see this sample on manually creating custom fields. On the front-end, you can use rwmb_meta() to display the field value. – Sally CJ Apr 14 '18 at 0:55
  • But how do you add the Metabox fields to a front end form that already exists. I already have the admin Metabox with the custom field and I also have a page that displays the value of the Metabox on the front end. How do I get the custom field on the back end to appear on a front end form. I know there’s the frontend form extension for mb but I just have one custom field I need to add. – abc0213 Apr 14 '18 at 13:37
  • Can you share your code? The admin meta box and the existing front-end form. – Sally CJ Apr 15 '18 at 1:10
  • just added the code – abc0213 Apr 17 '18 at 13:35
  • Check my answer. Hopefully that's what you wanted, and that it works for you, too. – Sally CJ Apr 18 '18 at 5:32
0

This worked for me:

In the template file (used with that existing form), before the get_header(); call/line, add this code:

global $my_dates_MB;

// If you changed the meta box ID (i.e. mydates), change it also below.
add_filter( 'rwmb_show_mydates', '__return_false' );

$meta_boxes = get_dates( [] );
$my_dates_MB = rwmb_get_meta_box( $meta_boxes[0] );

if ( isset( $_POST['my_dates_post_ID'] ) ) {
    // Save the meta data.
    $my_dates_MB->save_post( $_POST['my_dates_post_ID'] );
}

// Enqueue styles and scripts.
add_action( 'wp_enqueue_scripts', [ $my_dates_MB, 'enqueue' ] );
//$my_dates_MB->enqueue();

Then replace this:

$mydates = if(isset($_POST['prefix-mydates'])) echo $_POST['prefix-mydates'];


<fieldset>
<input type="text" value=""  id="prefix-mydates" class="rwmb-date hasDatepicker" size="60" tabindex="20" name="prefix-mydates">
</fieldset>

..with this: (UPDATED; May 02 2018)

<?php
global $my_dates_MB;

// Get the current post ID.
$post_id = get_the_ID();

// Set the post ID for the "meta box".
$my_dates_MB->set_object_id( $post_id );

// Show the meta box.
$my_dates_MB->show();
?>

<input type="hidden" name="my_dates_post_ID" value="<?php echo $post_id; ?>" />

That will print the whole "meta box" as defined in your custom get_dates() function (btw, change its name to something unique), but that should not be an issue since the meta box has just one field.

You'd get something like this: (not including the "Submit" button)

enter image description here

  • It still seems to not be working for me. It displays it on the page now, but the input field isn't using the date picker and when I click +add more, it doesn't do anything. Not sure if this could be why, but it won't place itself within the div even though I've placed the code within a div. – abc0213 Apr 18 '18 at 13:36
  • Sounds to me like a jQuery/JS/scripts conflict(s). Did you try to view the browser console, to see if there are errors related to the date picker script or library? – Sally CJ Apr 18 '18 at 13:49
  • Just checked, there's no errors about the datepicker or library. – abc0213 Apr 18 '18 at 14:09
  • Did you add/use the exact code in my answer, or did you alter it in any way? The Meta Box stylesheet and script files may not be loaded on the page. – Sally CJ Apr 19 '18 at 1:39
  • 1
    Yep, used the same code. This form is part of another plugin by the way, so I'm not sure if that's why the scripts and styles aren't loading? – abc0213 Apr 23 '18 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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