Add a Custom Metabox and Input Fields to Your Event Registration Pages

This tutorial forms part of our series of tutorials for creating an custom add-on for Events Manager called “Styles”, where we will be able to select from a list of styles during event registration.

In our previous tutorial, we created a custom event admin page for managing our styles.

It's quite a common situation where you may want to add some more form items to event registration pages. This is entirely possible through the use of special hooks and filters called by Events Manager and WordPress itself.

Adding meta boxes to the admin area

In this case we need a list of selectable styles as a group of checkboxes inside a WordPress meta box.

function my_em_styles_meta_boxes(){
    add_meta_box('em-event-styles', 'Styles', 'my_em_styles_metabox',EM_POST_TYPE_EVENT, 'side','low');
    add_meta_box('em-event-styles', 'Styles', 'my_em_styles_metabox','event-recurring', 'side','low');
}
add_action('add_meta_boxes', 'my_em_styles_meta_boxes');
 
function my_em_styles_metabox(){
    global $EM_Event;
    $my_em_styles = (is_array(get_option('my_em_styles'))) ? get_option('my_em_styles'):array();
    foreach( $my_em_styles as $style_id => $style ){ 
        ?>
        <label>
        <input type="checkbox" name="event_styles[]" value="<?php echo $style_id; ?>" <?php if(in_array($style_id, $EM_Event->styles)) echo 'checked="checked"'; ?> /> 
        <?php echo $style ?>
        </label><br />          
        <?php
    }
}

The first function is called during the WordPress generation of the Events editor. Since events are custom post types, it's just like adding a meta box to the post or page edit screens. The add_meta_box function will register the Styles meta box and call the my_em_styles_metabox function to generate content.

Since we also want to have support for recurring events, we add a second function on line 3 so that the meta box is added to the recurring-event custom post type (CPT). Recurring events are a different CPT because it is a template for defining patterns of recurrences, which are individual events of the regular 'event' custom post type that are linked to the group of recurring events defined by the 'recurring-event' CPT.

Line 9 obtains our custom array of styles from wp_options using the get_option function, and if empty, a new array is created.

The following lines output the necessary HTML and loops through the array we just obtained, creating a list of checkboxes for the user to select.

Adding this to the front-end submission form

The above snippet will add a meta box to the admin area, but will not add a field to the front-end submission form, so we'll add another function that hooks into the front-end submission form template, and injects the same input as we see in the meta box, but wraps it with some extra HTML so it looks good on the form:

function my_em_styles_frontend_form_input(){
    ?>
    <fieldset>
        <legend>Styles</legend>
        <?php my_em_styles_metabox(); ?>
    </div>
    <?php
}
add_action('em_front_event_form_footer', 'my_em_styles_frontend_form_input');

Next Step...

In the next tutorial, we'll discover how to save custom event information from this meta box when the event is added or updated.