2

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.

My Events 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.

1

@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

  • Thanks for the information. I just started to use the free version of metabox and it seems to be more up to date and maintained. – Vemuez Aug 1 '18 at 13:38
0

With the help of sunil, I figured out exactly what I needed to do.

I went and downloaded the free version of Metabox at https://wordpress.org/plugins/meta-box/

Once i downloaded it, I've placed it in child-theme/external/metaboxand 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,
        'excluse_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';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.