In the previous two days of this tutorial series we focused on setting up the plugin and creating the table in our database. This tutorial we are going to create our custom post type that will be for our events and create a meta box to contain the start and end times. Okay, maybe still a bit of overlap from previous posts, but we need to set these up before we can more forward.
Creating the Event Post Type
If you haven’t read our tutorial on creating a custom post type class, we are going to use this class to do the work. It is pretty simple, but if you are not up to speed on how to use this class, just read that post. It is pretty detailed and if you have any questions just post them in the comments.
The first thing we need to do is to create a file to hold our class and add it to our plugin folder. I called our new file event_post_type.php and I also renamed the custom post type class to event_post_type. So not to go back through the previous tutorial on this here is the code below:
include(EVENT_CALENDAR_DIR . 'event_post_type.php');
$config = array(
'single' => 'Event',
'plural' => 'Events',
'type' => 'event',
'supports' => array('title', 'editor', 'excerpt')
);
$event_post_type = new Event_post_type;
$event_post_type->init($config);
add_action('init', array(&$event_post_type, 'add_post_type'));
add_filter('post_update_messages', array(&$event_post_type, 'add_messages'));You can see that we did use our constant, EVENT_CALENDAR_DIR, to include our file via the absolute path. We then created an options array and created a varible representing a new instance our class. Since I wanted to use a title, the editor, and an excerpt, I passed each of those to ‘support’ in the config array. I then took the $config array and passed it to the init method of the class. Then the add_action function was called to hook onto the ‘init’ hook. A reference was use with our class variable and the method we wanted to call, add_post_type. The same was done with add_filter to call the method ‘add_messages’.
After this is complete you can go to the admin and see the post type has been added. And it will look like this:
Adding a Meta Box to Our Event Post Type
To add a meta box to our event post type we need to create two user defined functions. The first will be used to just register the meta box and the second will be the actual content in the meta box. If you have never used the add_meta_box function here is a breakdown the function and the parameters it will accept:
add_meta_box($id, $title, $callback, $page, $context, $priority, $callback_agrs);
- $id – this simply represents the id that you would like to assign to your meta box, maybe for CSS purposes or whatever.
- $title – this is the displayed title of your meta box. For example, the meta box for your excerpt has the title of “Excerpt”.
- $callback – This is the function that will be called with when the meta box is displayed. It will contain all the content that you want in your meta box. And in this case will be the event start and end times and dates.
- $page – this is the post type that we want our meta box to be displayed in. For this we are going to input ‘event’.
- $context – context is where one the page your meta box will be displayed. We are going to display it in the right side bar so ‘side’.
- $priority – this can be used to determine how high on the page the meta box will be displayed. We won’t even include this so it will default to last.
- $callback_agrs – these are arguments that you want to pass to your callback function. We won’t use this since we will just call in the global $post variable into our function, but we could pass the variable here if we wanted.
So here is the first part:
add_action("admin_init", "event_fields");
function event_fields(){
add_meta_box('event_meta', 'Event Options', "event_meta_options", "event", "side");
}
Above we just hooked into the admin_init hook to then call our user defined function event_fields which will add the meta box to the events page. The meta box will have the title of “Event Options” and the callback function that will contain the content is another user define function which is below. Also, notice the context is ‘event’, the post type.
Here is our call back function event_meta_options:
function event_meta_options(){
global $post;
$table = "<table>";
$table .= "<tr><td><label for='start_date'>Start Date</label></td><td><input class='date_field' type='text' name='start_date' value='' /></td></tr>";
$table .= "<tr><td><label for='end_date'>End Date</label></td><td><input class='date_field' type='text' name='end_date' value='' /></td></tr>";
$table .= "<tr><td><label for='start_time'>Start Time</label></td><td><input class='time_field' type='text' name='start_time' value='' /></td></tr>";
$table .= "<tr><td><label for='end_time'>End Time</label></td><td><input class='time_field' type='text' name='end_time' value='' /></td></tr>";
$table .= "<tr><td><label for='event_visible'>Show Event:</label></td><td><select name='event_visible'><option value='1'>Yes</option><option value='0'>No</option></select></td></tr>";
$table .= "</table>";
echo $table;
}
You notice that I first called in the global post variable, we won’t use this now but in a future tutorial. Also you see that I created a table that holds the fields and labels.
So far this is what you would get:
What’s next?
A meta box is just great and maybe I just repeat myself a bit. But next time we will focus on adding JavaScript to the inputs of our meta box.
