Add a Custom Metabox 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.

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

Line 8 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.

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