I'm fairly new to wordpress and the content management system. I've been following a couple of tutorials to get started. I've been searching for specifically how to include a date picker in the add new custom post type.
I want to add an extra field in here for the user to select a date to specify when the event will take place. I don't want the user to manually type out the date through text but want to use a date picker, whether it be a normal html5 datepicker or a jquery one.
The code i used to generate this is within the functions.php, I understand that this is probably not the best place to put all my code but i'm currently just experimenting for now but can't seem to find a solution to my problem.
/*
Custom post types
*/
function awesome_custom_post_type ()
{
$labels = array(
'name' => 'Events',
'singular_name' => 'Event',
'add_new' => 'Add Event',
'all_items' => 'All Events',
'add_new_item' => 'Add Event',
'edit_item' => 'Edit Event',
'new_item' => 'New Event',
'view_item' => 'View Event',
'search_item_label' => 'Search Events',
'not_found' => 'No Events Found',
'not_found_in_trash' => 'No Events Found in Trash',
'parent_item_colon' => 'Parent Event'
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => false,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => true,
'supports' => array(
'title',
'editor',
'thumbnail',
),
'menu_icon' => 'dashicons-calendar-alt',
'menu_position' => 5,
'excluse_from_search' => true
);
register_post_type( 'awesome_events', $args );
}
add_action( 'init', 'awesome_custom_post_type' );
Thanks in advance.
I'm fairly new to wordpress and the content management system. I've been following a couple of tutorials to get started. I've been searching for specifically how to include a date picker in the add new custom post type.
I want to add an extra field in here for the user to select a date to specify when the event will take place. I don't want the user to manually type out the date through text but want to use a date picker, whether it be a normal html5 datepicker or a jquery one.
The code i used to generate this is within the functions.php, I understand that this is probably not the best place to put all my code but i'm currently just experimenting for now but can't seem to find a solution to my problem.
/*
Custom post types
*/
function awesome_custom_post_type ()
{
$labels = array(
'name' => 'Events',
'singular_name' => 'Event',
'add_new' => 'Add Event',
'all_items' => 'All Events',
'add_new_item' => 'Add Event',
'edit_item' => 'Edit Event',
'new_item' => 'New Event',
'view_item' => 'View Event',
'search_item_label' => 'Search Events',
'not_found' => 'No Events Found',
'not_found_in_trash' => 'No Events Found in Trash',
'parent_item_colon' => 'Parent Event'
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => false,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => true,
'supports' => array(
'title',
'editor',
'thumbnail',
),
'menu_icon' => 'dashicons-calendar-alt',
'menu_position' => 5,
'excluse_from_search' => true
);
register_post_type( 'awesome_events', $args );
}
add_action( 'init', 'awesome_custom_post_type' );
Thanks in advance.
@vemuez
you need to enqueue js and css files to admin_print_script and admin_print_style
here is the example to how to do it
// Register datepicker ui for properties
function admin_homes_for_sale_javascript()
{
global $post;
if($post->post_type == 'homes-for-sale' && is_admin()) {
wp_enqueue_script('jquery-ui-datepicker', WP_CONTENT_URL . '/themes/yourthemename/js/jquery-ui-datepicker.min.js');
}
}
add_action('admin_print_scripts', 'admin_homes_for_sale_javascript');
// Register ui styles for properties
function admin_homes_for_sale_styles(){
global $post;
if($post->post_type == 'homes-for-sale' && is_admin()) {
wp_enqueue_style('jquery-ui', WP_CONTENT_URL . '/themes/yourthemename/css/jquery-ui-1.8.11.custom.css');
}
}
add_action('admin_print_styles', 'admin_homes_for_sale_styles');
or try this https://en.bainternet.info/how-i-add-a-wordpress-metabox/#toc-dn
With the help of sunil's answer I figured out exactly what I needed to do.
I went and downloaded the free version of Metabox at https://wordpress/plugins/meta-box/
Once I downloaded it, I've placed it in child-theme/external/meta-boxand referenced it from child-theme/inc/events-custom-post-type.php.
events-custom-post-type.php looks like this.
require_once(get_stylesheet_directory() . '/external/meta-box/meta-box.php');
function custom_events ()
{
$labels = array(
'name' => 'Events',
'singular_name' => 'Event',
'add_new' => 'Add Event',
'all_items' => 'All Events',
'add_new_item' => 'Add Event',
'edit_item' => 'Edit Event',
'new_item' => 'New Event',
'view_item' => 'View Event',
'search_item_label' => 'Search Events',
'not_found' => 'No Events Found',
'not_found_in_trash' => 'No Events Found in Trash',
'parent_item_colon' => 'Parent Event'
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => false,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => true,
'supports' => array(
'title',
'editor',
),
'menu_icon' => 'dashicons-calendar-alt',
'menu_position' => 5,
'exclude_from_search' => true
);
register_post_type( 'custom_events_post_type', $args );
}
function prefix_register_meta_boxes_events( $meta_boxes ) {
$prefix = 'custom_event_';
$meta_boxes[] = array(
'id' => $prefix . 'details',
'title' => 'Event details',
'post_types' => 'custom_events_post_type',
'context' => 'normal',
'priority' => 'high',
'fields' => array(
array(
'name' => 'Event date',
'desc' => 'Select event date',
'id' => $prefix . 'date',
'type' => 'date',
),
array (
'name' => 'Event location',
'desc' => 'Location of the event',
'id' => $prefix . 'location',
'type' => 'text'
)
)
);
return $meta_boxes;
}
add_action( 'init', 'custom_events' );
add_filter( 'rwmb_meta_boxes', 'prefix_register_meta_boxes_events' );
The custom_events function sets up the custom post type while the prefix_register_meta_boxes_events function sets up the custom field date picker.
You just have to make sure that in prefix_register_meta_boxes_events function, where it says post_types to add what your own custom post type is registered as.
After that, I just referenced this file in child-theme/functions.php like so.
require get_stylesheet_directory() . '/inc/events-custom-post-type.php';