WordPress.org

Forums

adding jquery to custom meta box (5 posts)

  1. binarybit
    Member
    Posted 5 years ago #

    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:
    http://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
    	}
    
    ?>
  2. binarybit
    Member
    Posted 5 years ago #

    bump...?

  3. Devin Price
    Inactive
    Posted 5 years ago #

    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.

  4. binarybit
    Member
    Posted 5 years ago #

    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.

  5. jprice
    Member
    Posted 5 years ago #

    @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!

Topic Closed

This topic has been closed to new replies.

About this Topic