Working with the Thematic framework for WordPress can be really fun, especially when you have the freedom to use filters on the meta information for posts to style your post date to look like a calendar.

What it looks like originally:

The result after some filtering and styling:

Goal:

Modify a child-theme of Thematic to make posts display the meta like the following:

  • Remove reference to the author (single author blog)
  • Modify the date to display the Day of the week, Month, Day and Year
  • Display the post date floated to the left of the Post Title and Content and styled
  • Leave the Category, Tag, Comments and Edit listings/links under the post, as normal

Here’s what I came up with:

Researching the web, the Themeshaper forums, and especially this post –
http://a.parsons.edu/~zeravivm/f09/osd/12/15/how-to-display-thematic-postmeta-information-in-a-different-location/

First, you need to have the Thematic theme installed, and a Child Theme created. In your functions.php file inside your Child Theme’s folder, put this to filter the thematic_postheader*:

[sourcecode language=”php”]

// Pull the entry_meta into a calendar format</code>

function childtheme_postheader() {
global $id, $post, $authordata;

// Information in Post Header
if (is_front_page() || is_single() || is_page() || is_category() || is_tag() || is_author() || is_date() || is_archive() || is_preview()) {

$postmeta = ‘
<div class="entry-meta">’;
$postmeta .= ‘<span class="entry-date"><abbr class="published" title="’;<br /> $postmeta .= get_the_time(‘Y-m-dTH:i:sO’) . ‘">’;
$postmeta .= ‘<span class="post_date post_date_day_of_week">’ . get_the_time(‘D’) . ‘</span>’;
$postmeta .= ‘<span class="post_date post_date_month">’ . get_the_time(‘M’) . ‘</span>’;
$postmeta .= ‘<span class="post_date post_date_day">’ . get_the_time(‘j’) . ‘</span>’;
$postmeta .= ‘<span class="post_date post_date_year">’ . get_the_time(‘Y’) . ‘</span>’;
$postmeta .= ‘</abbr></span>’;
$postmeta .= "</div>
<!– .entry-meta –>n";

$posttitle = ‘?>
<div class="entry-title_box">
<pre class="entry-title">’ . get_the_title() . "</pre>
</div>
<pre class="entry-title">’ . __(‘Not Found’, ‘thematic’) . "</pre>
<pre class="entry-title"><a title="’;<br /><?php $posttitle .= __(‘Permalink to ‘, ‘thematic’) . the_title_attribute(‘echo=0’);<br /> $posttitle .= ‘" href="https://absolutemg.com/2010/08/05/post-date-calendar-style-for-wordpress-thematic-child-theme/" rel="bookmark">’;
$posttitle .= get_the_title();
$posttitle .= "?></a>
<!–?php
n";
}</pre>
if ($post->post_type == ‘page’ || is_404()) {
$postheader = $posttitle;
} else {
$postheader = $postmeta . $posttitle;
}
echo $postheader;
}

add_filter( ‘thematic_postheader’, ‘childtheme_postheader’ );
[/sourcecode]

and in your style.css file in your Child Theme’s folder, put this (or modify your existing css if you need to):

[sourcecode language=”css”]

body {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}</code>

#blog-title, .entry-title {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
}

/* Post entry_meta date and title in calendar format */

.entry-meta {
float:left;
display:inline;
width: 60px;
text-align:right;
line-height:.95;
border:1px solid #eee;
margin:0 15px 20px 0;
}

.entry-meta span{
display:block;
}

.post_date_day_of_week {
font-size:150%;
color:#ccc;
padding:3px;
}

.post_date_day_of_week {
font-size:110%;
color:#aaa;
}

.post_date_month {
font-size:175%;
padding:0 3px;
}

.post_date_day {
font-size:450%;
font-weight:700;
padding:0 3px;
}

.post_date_year {
font-size:150%;
background:#999;
color:#eee;
margin:2px 0 0 0;
padding:3px;
}

.entry-title_box, .entry-content, .entry-utility {
float:right;
display:inline;
width: 450px;
}
[/sourcecode]

*Note: If you use this in your own Child-Theme, consider this code Alpha and modify as you need.