WordPress: Modify Native Calendar Widget for Event Post Types
Recently I was working on WordPress website and the client’s theme had an existing “Event” custom post type. The client wanted a way to calendarize the event start date and display with a widget.
There is a calendar widget built into WordPress; however, it has a couple shortcomings for what the client was trying to do. First, it calendarises all posts regardless of type (and in this case all we want is event posts). Secondly, it also calendarises posts based on date posted rather than a field such as event date. As an added constraint, the non-profit client did not have a budget for building a custom plugin from scratch to fill the need.
So I went digging through the PHP script that powers the native calendar widget and found a way to modify the plugin while only having to bill about a half hour of custom development. It actually took me longer to write this post!
It’s not the most ideal or elegant solution but it saved the client a bunch of money by spending almost no time on this. Couple drawbacks without further modifications 1) the widget won’t display multi-day events properly 2) The calendar widget now only works with event post types (i.e., can’t calendarize post dates of normal blog posts).
Here’s what it ends up looking like:
The Code
PHP
The file I had to modify is located in the Wordpress 3.5 installation in wordpressroot>wp-includes>general-template.php
In order to know which days on the calendar to highlight as links to posts, the WordPress devlopers built a query that pulls the day numbers of the posts that were posted in the current month.
<?php
// Get days with posts
$dayswithposts = $wpdb->get_results("SELECT DISTINCT DAYOFMONTH(post_date)
FROM $wpdb->posts WHERE post_date >= '{$thisyear}-{$thismonth}-01 00:00:00'
AND post_type = 'post' AND post_status = 'publish'
AND post_date <= '{$thisyear}-{$thismonth}-{$last_day} 23:59:59'", ARRAY_N);
if ( $dayswithposts ) {
foreach ( (array) $dayswithposts as $daywith ) {
$daywithpost[] = $daywith[0];
}
} else {
$daywithpost = array();There’s a couple issues here as it relates to getting this to work for events as opposed to regular posts. First, the query is pulling post_type equal to “post” so we’ll need to change that “event” so only events are being pulled. Secondly, the original query is selecting posts based on post date in the current month. For events, when we’re looking at a calendar, we don’t care when it was posted, but rather the start date of the event.
To deal with these issues, I had to rewrite the query. Unfortunately, the event start date field was one of the custom fields added for the event post type so it resides in the wp_postmeta table as opposed to wp_posts so you have to join the wp_postsandwp_postmeta` tables to get access to all the required fields. The query returns the event start day of the month (dom) , post id (post_id) , url of the event (guid) and event title (post_title). You’ll see soon why I pulled more fields than just the day numbers like before. Also, I changed the return value to an array of objects instead of numerical array per my own preferences. The new query looks something like this:
<?php
// Get days with posts
$dayswithposts = $wpdb->get_results("SELECT (FROM_UNIXTIME(`wp_postmeta`.`meta_value`,'%d')) as dom ,
`wp_postmeta`.`post_id` , `wp_posts`.`guid` , `wp_posts`.`post_title`
FROM $wpdb->postmeta
LEFT JOIN `wp_posts` ON `wp_postmeta`.`post_id` = `wp_posts`.`ID`
WHERE `wp_postmeta`.`meta_key` = 'event_startdate'
AND `wp_posts`.`post_status` = 'publish'
AND `wp_postmeta`.`meta_value` >= UNIX_TIMESTAMP( '{$thisyear}-{$thismonth}-01 00:00:00' )
AND `wp_postmeta`.`meta_value` <= UNIX_TIMESTAMP( '{$thisyear}-{$thismonth}-{$last_day} 23:59:59' )", OBJECT);The next block of the original code (see gist below) executes a second query almost identical to the first, but instead of pulling just day numbers like before, it pulls the post id, post titles and day numbers. The block following the query goes through each post and puts the titles into an associative array indexed by the day of the month. The array of post titles ($ak_titles_for_day) will used to display the post titles on their corresponding day cell in the calendar when it builds out the calendar table.
<?php
$ak_titles_for_day = array();
$ak_post_titles = $wpdb->get_results("SELECT ID, post_title, DAYOFMONTH(post_date) as dom "
."FROM $wpdb->posts "
."WHERE post_date >= '{$thisyear}-{$thismonth}-01 00:00:00' "
."AND post_date <= '{$thisyear}-{$thismonth}-{$last_day} 23:59:59' "
."AND post_type = 'post' AND post_status = 'publish'"
);
if ( $ak_post_titles ) {
foreach ( (array) $ak_post_titles as $ak_post_title ) {
$post_title = esc_attr( apply_filters( 'the_title', $ak_post_title->post_title, $ak_post_title->ID ) );
if ( empty($ak_titles_for_day['day_'.$ak_post_title->dom]) )
$ak_titles_for_day['day_'.$ak_post_title->dom] = '';
if ( empty($ak_titles_for_day["$ak_post_title->dom"]) ) // first one
$ak_titles_for_day["$ak_post_title->dom"] = $post_title;
else
$ak_titles_for_day["$ak_post_title->dom"] .= $ak_title_separator . $post_title;
}
}Use of two queries seemed a bit duplicative to me since they are so similar so I got rid of the second one and pulled the additional fields in the first query. Next I modified the foreach to record both the event title and event page url for every event post (this is so we can display a list of event links when a user hovers over a calendar day). I also consolidated the foreach code with the loop that follows the first query. Based on the results form the first query, two arrays are built. The first array, $dayswithpost, is simply an array containing all the day numbers of the month that have events to be used when building out the calendar table. The $ak_titles_for_day array, as mentioned above, is an associative array indexed by day numbers. It stores the event title and event url under the corresponding day number index and will be used to display to the user when they hover over a day number on the calendar that has event starting dates.
<?php
if ( $dayswithposts ) {
foreach ( $dayswithposts as $daywith ) {
$daywithpost[] = $daywith->dom;
$post_title = esc_attr( apply_filters( 'the_title', $daywith->post_title, $daywith->post_id ) );
if(empty($ak_titles_for_day)){
$ak_titles_for_day[$daywith->dom]= array ();
$ak_titles_for_day["$daywith->dom"][] = array('title'=>$daywith->post_title,'url'=>$daywith->guid);
}else{
$ak_titles_for_day["$daywith->dom"][] = array('title'=>$daywith->post_title,'url'=>$daywith->guid);
}
}
} else {
$daywithpost = array();
}Lastly, the code to build out the table/calendar had to be modified. The original block of code compares the day number of the calendar cell being generated to the $dayswithposts array to determine if any posts are listed for that day. If the day number has corresponding posts in the $dayswithposts array, an anchor tag is wrapped around the day number and href generated using the built in WordPress function get_day_link(). This function returns the url of an archive page for all posts on a given day. This works nicely for days with multiple posts because you can see all the posts by navigating to that daily archive url which is a built in WordPress template. The post title(s) for days with posts are also inserted into the title attribute of the day number link from the values stored in the $ak_titles_for_day array so the user will see the post titles when they hover over a calendar day link.
<?php
$calendar_output .= '<td>';
if ( in_array($day, $daywithpost) ) // any posts today?
$calendar_output .= '<a href="' . get_day_link( $thisyear, $thismonth, $day ) . '" title="' . esc_attr( $ak_titles_for_day[ $day ] ) . "\">$day</a>";
else
$calendar_output .= $day;
$calendar_output .= '</td>';For events, a single anchor wrapped around the calendar day number would not work because clicking on the day would just take you to the archive page for events posted on that day not the start date of actual event day. Therefore the code needs to be modified so that a user is able to click on each individual event title and have it link to the events page url instead of an archive page.
Instead of wrapping the day number in an anchor tag, I switched it to a span so it can be selected later by css/js. Also, I created a <div> containing event titles and links for all the events for a given day and inserted it after the calendar number </span>. In the CSS, I set the <div> to display:none, and position:absolute and positioned it relative to the <td> it resides in. Then using jQuery I set a hover on both the <span> and the <div> so when a user hovers over a day with posts, you can display the <div> with the event links and titles.
<?php
$calendar_output .= '<td>';
if ( in_array($day, $daywithpost) ){
$title_div = "<div>";
foreach($ak_titles_for_day[$day] as $ak_title){
$title_div .= "<a href='".$ak_title['url']."' title='".$ak_title['title']."'>".$ak_title['title']."</a><br/>";
}
$title_div .= "</div>";
$calendar_output .= "<span>$day</span>".$title_div;
}
else{
$calendar_output .= $day;
}
$calendar_output .= '</td>';JS and CSS
$('#wp-calendar span').hover( function () {
$(this).next().show();
},
function () {
$(this).next().hide();
});
$('#wp-calenda div').hover( function () {
$(this).show()
},
function () {
$(this).hide();
});
