Modifying the Thematic Date Format

While helping someone recently with the Thematic Theme Framework for WordPress, I finally took the extra step and modified the date format (better known as postmeta_entrydate) to be easier to work with. Essentially all I did was modify the date for Thematic to include a few extra span tags that can easily be targeted with CSS. While this is a highly requested feature, I just haven’t had to implement it yet, so after putting it off for long enough, here it is in 3 default styles.

With the current setup, it is intended to be a copy paste solution for starting a Thematic Child Theme and the styling is by no means mandatory. With a little CSS love, you could easily achieve tons of variations since the PHP is all that is required to give you the needed hooks for styling the date.

PHP for Modifications to Thematic’s Date

Insert into your functions.php in your child theme folder.

function childtheme_override_postmeta_entrydate() {
	$entrydate = '<span class="meta-prep meta-prep-entry-date">' . __('', 'thematic') . '</span>';
	$entrydate .= '<span class="entry-date"><abbr class="published" title="' . get_the_time(thematic_time_title()) . '">';
	$entrydate .= '<span class="month">' . get_the_time('M ') . '</span>';
	$entrydate .= '<span class="day">' . get_the_time('d') . '<span class="sep">, </span></span>';
	$entrydate .= '<span class="year">' . get_the_time('Y') . '</span>';
	$entrydate .= '</abbr></span>';

	return apply_filters('thematic_post_meta_entrydate', $entrydate);
}

With the code inserted you won’t see any changes, remember all we are doing here is inserting span tags to style the date and give it some life. The code does not pull the date out of the .entry-meta div tag, it will remain in the markup right where it is intended which is the default setup, shown below.

Styling your Thematic Date

I chose as a default to set the date on the outside of the post off to the left, to do this you will need to remove the overflow: hidden; out of the CSS, or override it using overflow: visible;. This is already included in the snippets below, but be sure to check out the examples below for some different styling techniques. Currently there are no images used, all the styling is done through CSS alone.

Custom Thematic Date Style 1

Insert into your style.css in your child theme.

#main, #content { overflow: visible; }
.entry-meta { position: relative; }
.entry-date { position: absolute; top: 0; right: 100%; width: 100px; background: #ccc; border: 1px solid #ccc; margin-right: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(100, 100, 100, 0.2); background-clip: padding-box; }
.entry-date span { display: block; font: 18px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; text-align: center; }
.entry-date .month { background: #ccc; border-radius: 10px; }
.entry-date .day { font-size: 44px; line-height: 50px; background: #333; color: #eee; text-shadow: 2px 2px 2px #888; }
.entry-date .year { background: #ccc; border-radius: 10px; }
.entry-date .sep { display: none; }

I would refer to this example as a Calender Style Date format, it is pretty common and can easily be modified if you choose to use a little more robust graphic.

Custom Thematic Date Style 2

Insert into your style.css in your child theme.

#main, #content { overflow: visible; }
.entry-meta { position: relative; }
.entry-date { position: absolute; top: 0; right: 100%; width: 75px; height: 75px; margin-right: 20px; border-radius: 40px; background: #ccc; box-shadow: 2px 2px 3px rgba(100, 100, 100, 0.2), 2px -2px 3px rgba(100, 100, 100, 0.2); border: 5px solid #f6f6f6; }
.entry-date span { display: block; font: 16px/22px Verdana, Arial, Helvetica, sans-serif; color: #666; text-align: center; }
.entry-date .month { margin-top: 5px; }
.entry-date .day { font-size: 30px; color: #eee; font-weight: bold; text-shadow: 1px 1px #333; }
.entry-date .year {  }
.entry-date .sep { display: none; }

This circle is created through CSS, I would highly recommend checking all the available shapes you could change this to by looking into The Shapes of CSS by CSSTricks.com.

Custom Thematic Date Style 3

Insert into your style.css in your child theme.

#main, #content { overflow: visible; }
.entry-meta { position: relative; }
.entry-date { position: absolute; top: 0; right: 100%; width:100px; margin-right: 20px; border:1px solid #e6e6e6; border-bottom:1px solid #e3e3e3; padding:10px 0; text-align:center; letter-spacing: 1px; box-shadow: inset 0 8px 30px 8px rgba(0, 0, 0, 0.25); margin-bottom:20px; text-shadow: 0 1px rgba(255, 255, 255, 0.8); }
.entry-date span { display: block; font-size: 18px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; color: #666; font-style: normal; text-align: center; }
.entry-date .month { }
.entry-date .day { font-size:40px; line-height:48px; }
.entry-date .year { }
.entry-date .sep { display: none; }

This style is modeled after the Foghorn WordPress Theme, you may have noticed that Foghorn is the base my current child theme is set up on. So really the credit for this style goes to Devin Price who produced the heart of the theme I use, be sure to check out his site, he does have some awesome WordPress Plugins, like the Options Framework Plugin.

Finishing off customizing the Thematic Meta

In the images, you may notice after the Author section there is now an extra | in the code. This is just the way the Thematic PHP is setup, you can either modify the postheader_postmeta function to remove it through PHP. Or just just set the .meta-sep-entry-date class to display: none;. If you need copy and paste solutions, choose one or the other below. I would recommended the CSS way just because it is by far easiest.

Remove meta separation from PHP

function childtheme_override_postheader_postmeta() {
  $postmeta = '<div class="entry-meta">';
  $postmeta .= thematic_postmeta_authorlink();
  $postmeta .= thematic_postmeta_entrydate();
  $postmeta .= thematic_postmeta_editlink();
  $postmeta .= "</div><!-- .entry-meta -->\n";
  return apply_filters('thematic_postheader_postmeta',$postmeta);
}

Or, remove meta separation through CSS

.meta-sep-entry-date { display: none; }

Any questions, just leave a comment. You can also find more information for Thematic Resources and Thematic Snippets, although both are still under construction and need some TLC, but are very useful nonetheless.