adding jquery to custom meta box

  • Hello there fellow WordPress Gurus.

    After hours of trying to figure this out I figured I would ask the community in hope for getting a quick response.

    My problem is fairly simple. All I am trying to do is add a custom meta box allowing someone creating a post to select a date.

    Because I know people will most likely enter the date field in the incorrect format I just wanted to add a slick jquery date picker to this form field.

    The one I wanted to use this is one:
    https://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

    Now my question is… how would I go about doing this?

    More specifically I also want to ensure that the applicable jquery code will only get called (loaded) when this specific event post type is loaded an not on any other screens in the admin area.

    Any help would greatly be appreciated.

    Here is what my functions.php file looks like currently:

    <?php
	add_action('init', 'events');
	function events() {
	register_post_type('events', array(
		'labels' => array(
			'name' 		=> __('Events'),
			'singular_label' 	=> __('Event'),
			'new_item' 		=> __('Add Events'),
			'add_new' 		=> __('Add Event'),
			'add_new_item' 	=> __('Add Event'),
			'edit' 		=> __('Edit Event'),
			'edit_item' 		=> __('Edit this Event'),
			'view' 		=> __('View Event'),
			'view_item' 		=> __('View Event'),
			'search_items' 	=> __('Search Events'),
			'not_found' 		=> __('No Events Found'),
			'not_found_in_trash'	=> __('No Event Found in Trash'),
			),
		'supports' => array(
			'title',
			'editor',
			'author',
			'revisions',
			'custom-fields',
			),
		'rewrite' => array(
			'slug' 		=> 'events',
			'with_front' 		=> false,
			),
		'can_export' 			=> true,
		'show_ui' 			=> true,
		'menu_position' 		=> 0-1,
		'public' 			=> true,
		'query_var' 			=> true,
		'publicly_queryable' 	=> true,
		'exclude_from_search' 	=> false,
		'capability_type' 		=> 'post',
		'hierarchical' 		=> false,
	));
	}

	add_filter('manage_edit-events_columns', 'add_new_events_columns');
	function add_new_events_columns($events_columns) {
		$new_columns['cb'] 				= '<input type="checkbox" />';
		$new_columns['title'] 			= _x('Event Title', 'column name');
		$new_columns['event_starts'] 		= _x('Event Starts', 'column name');
		$new_columns['event_ends'] 			= _x('Event Ends', 'column name');
		$new_columns['event_type'] 			= _x('Event Type', 'column name');
		$new_columns['author'] 			= __('Created by');
		$new_columns['date'] 			= _x('Last Action', 'column name');
		return $new_columns;
		}
	add_action('manage_posts_custom_column', 'manage_events_columns', 10, 2);
 	function manage_events_columns($column_name, $id) {
		global $wpdb;
		switch ($column_name) {
		case 'event_starts':
			$custom = get_post_custom();
			echo $custom['event_start_date'][0];
			echo ' @ ';
			echo $custom['event_start_time'][0];
			break;
		case 'event_ends':
			$custom = get_post_custom();
			echo $custom['event_end_date'][0];
			echo ' @ ';
			echo $custom['event_end_time'][0];
			break;
		case 'event_type':
			$custom = get_post_custom();
			echo $custom['event_type'][0];
			break;
		default:
			break;
		}
	}

	register_taxonomy("event_types", array("events"), array("hierarchical" => true, "label" => "Event Types", "singular_label" => "Event Type", "rewrite" => true));

	add_action("admin_init", "admin_init");

	function admin_init(){
	  add_meta_box("events_meta", "Event Details", "events_meta", "events", "normal", "high");
	}

	function events_meta() {
	  global $post;
	  $custom = get_post_custom($post->ID);
	  $event_start_date = $custom["event_start_date"][0];
	  $event_start_time = $custom["event_start_time"][0];
	  $event_end_time = $custom["event_end_time"][0];
	  $event_organizer = $custom["event_organizer"][0];
	  $event_contact_email = $custom["event_contact_email"][0];
	  $event_contact_phone = $custom["event_contact_phone"][0];
	  $event_registration_notes = $custom["event_registration_notes"][0];
	  ?>

	  <p><label>Event Date:</label>
	  <input type="date" autocomplete="off" id="datepicker" size="30" name="event_start_date" value="<?php echo $event_start_date; ?>"></p>
	  <p><label>Start Time:</label>
	  <input type="text" autocomplete="off" id="event-field-single" size="30" name="event_start_time" value="<?php echo $event_start_time; ?>"></p>
	  <p><label>Edn Time:</label>
	  <input type="text" autocomplete="off" id="event-field-single" size="30" name="event_end_time" value="<?php echo $event_end_time; ?>"></p>
	  <p><label>Event Organizer:</label>
	  <input type="text" autocomplete="off" id="event-field-single" size="30" name="event_organizer" value="<?php echo $event_organizer; ?>"></p>
	  <p><label>Contact Email:</label>
	  <input type="text" autocomplete="off" id="event-field-single" size="30" name="event_contact_email" value="<?php echo $event_contact_email; ?>"></p>
	  <p><label>Contact Phone #:</label>
	  <input type="text" autocomplete="off" id="event-field-single" size="30" name="event_contact_phone" value="<?php echo $event_contact_phone; ?>"></p>
	  <p><label>Important Notice:</label>
	  <textarea cols="50" rows="5" name="event_registration_notes"><?php echo $event_registration_notes; ?></textarea></p>
	  <?php
	}

?>
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter binarybit

    (@binarybit)

    bump…?

    This is not exactly what you asked for, but could be solution for someone. It sets up metabox items with a date prepopulated, much like how the “publish date” works.

    Callback:

    // Add the Events Meta Boxes

function add_events_metaboxes() {
	add_meta_box('wpt_events_date', 'Event Date', 'wpt_events_date', 'events', 'side', 'default');
}

    Build the metabox:

    // The Event Date Metabox

function wpt_events_date() {
	global $post, $wp_locale;

	// Use nonce for verification ... ONLY USE ONCE!
	echo '<input type="hidden" name="ac_noncename" id="ac_noncename" value="' .
	wp_create_nonce( plugin_basename(__FILE__) ) . '" />';

	$time_adj = current_time('timestamp');

	$month = get_post_meta($post->ID, '_month', true);

	if ( empty($month) ) {
		$month = gmdate( 'm', $time_adj );
	}

	$day = get_post_meta($post->ID, '_day', true);

	if ( empty($day) ) {
		$day = gmdate( 'd', $time_adj );
	}

	$year = get_post_meta($post->ID, '_year', true);

	if ( empty($year) ) {
		$year = gmdate( 'Y', $time_adj );
	}

	$hour = get_post_meta($post->ID, '_hour', true);

	if ( empty($hour) ) {
		$hour = gmdate( 'H', $time_adj );
	}

	$min = get_post_meta($post->ID, '_minute', true);

	if ( empty($min) ) {
		$min = '00';
	}

	$month_s = "<select name=\"_month\">\n";
	for ( $i = 1; $i < 13; $i = $i +1 ) {
		$month_s .= "\t\t\t" . '<option value="' . zeroise($i, 2) . '"';
		if ( $i == $month )
			$month_s .= ' selected="selected"';
		$month_s .= '>' . $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) ) . "</option>\n";
	}
	$month_s .= '</select>';

	echo $month_s;

	echo '<input type="text" name="_day" value="' . $day  . '" size="2" maxlength="2" />';
	echo '<input type="text" name="_year" value="' . $year . '" size="4" maxlength="4" /> @ ';
	echo '<input type="text" name="_hour" value="' . $hour . '" size="2" maxlength="2"/>:';
	echo '<input type="text" name="_minute" value="' . $min . '" size="2" maxlength="2" />';

}

    Save the data:

    // Save the Metabox Data

function wpt_save_events_meta($post_id, $post) {

	// verify this came from the our screen and with proper authorization,
	// because save_post can be triggered at other times
	if ( !wp_verify_nonce( $_POST['ac_noncename'], plugin_basename(__FILE__) )) {
	return $post->ID;
	}

	// Is the user allowed to edit the post or page?
	if ( 'page' == $_POST['post_type'] ) {
		if ( !current_user_can( 'edit_page', $post->ID ))
		return $post->ID;
	} else {
		if ( !current_user_can( 'edit_post', $post->ID ))
		return $post->ID;
	}

	// OK, we're authenticated: we need to find and save the data
	// We'll put it into an array to make it easier to loop though.

	$events_meta['_month'] = $_POST['_month'];
	$events_meta['_day'] = $_POST['_day'];
	$events_meta['_year'] = $_POST['_year'];
	$events_meta['_hour'] = $_POST['_hour'];
	$events_meta['_minute'] = $_POST['_minute'];

	$events_meta['_location'] = $_POST['_location'];

	// Add values of $events_meta as custom fields

	foreach ($events_meta as $key => $value) { // Cycle through the $events_meta array!
		if( $post->post_type == 'revision' ) return; // Don't store custom data twice
		$value = implode(',', (array)$value); // If $value is an array, make it a CSV (unlikely)
		if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
			update_post_meta($post->ID, $key, $value);
		} else { // If the custom field doesn't have a value
			add_post_meta($post->ID, $key, $value);
		}
		if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
	}

}

add_action('save_post', 'wpt_save_events_meta', 1, 2); // save the custom fields

    The data should be checked a bit further to make sure each item is an integer, etc- but this works for now.

    Thread Starter binarybit

    (@binarybit)

    thanks for your suggestions. I will give this a try as well but I ended up going with a jquery plugin which simplified things for my needs.

    @devin,

    I am wondering if it is possible to use your code, and when pulling it out have the month be the abbr. rather than the month’s number.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘adding jquery to custom meta box’ is closed to new replies.