Custom Post Types - How to include custom fields

Question

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.

Answer 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

Answer 2

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.org/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';