Media Planning and Buying Project Management Graphic Design Interactive Commercial Printing Public Relations Writing
Why Hire Us? Testimonials Philosophy Our Team Career Opportunities Contact Us
Home     Contact     Support
5
Aug
10

Post Date Calendar Style for WordPress Thematic Child Theme

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 original, unstyled post with the date and author showing up under the post's title.


The result after some filtering and styling:

Our post date nicely styled into a date calendar to the left of the post title, content and meta info.



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*:


// Pull the entry_meta into a calendar format

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="';
$postmeta .= get_the_time('Y-m-d\TH: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"><h1 class="entry-title">' . get_the_title() . "</h1></div>\n";
} elseif (is_404()) {
$posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>\n";
} else {
$posttitle = '<h2 class="entry-title"><a href="';
$posttitle .= get_permalink();
$posttitle .= '" title="';
$posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
$posttitle .= '" rel="bookmark">';
$posttitle .= get_the_title();
$posttitle .= "</h2>\n";
}

if ($post->post_type == 'page' || is_404()) {
$postheader = $posttitle;
} else {
$postheader = $postmeta . $posttitle;
}
echo $postheader;
}

add_filter( 'thematic_postheader', 'childtheme_postheader' );

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

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;
}

#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;
}

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

If you enjoyed this post, make sure you subscribe to my RSS feed!
Cas Johnson is the Lead Web Developer at Absolute Marketing Group in Moorhead, Minnesota. She volunteers her time for the FMVA, enjoys being a wife and mom, and attempts to keep edible plants alive through the short Northern summer.

5 Comments

  1. Isaac Williams
    Posted July 10, 2011 at 10:13 pm | Permalink

    After the first post of every page it shows up to the date starts at the beginning of the ending tag of the previous post. What could be causing this?

  2. Cas Johnson, Lead Web Developer
    Posted July 11, 2011 at 7:36 am | Permalink

    You might need to put a clear somewhere to make sure your next post block isn’t floating.

  3. Isaac Williams
    Posted July 14, 2011 at 9:56 pm | Permalink

    That was it. Thanks.

  4. Posted August 1, 2011 at 11:01 pm | Permalink

    Is the post title intended to no longer have an active hyperlink? I like the title to be able to like to the post, but something in the code turns it off cannot find where. My post on http://www.isimonmarketing.com is a good example of how the title does not have an active link no longer.

  5. Cas Johnson, Lead Web Developer
    Posted August 3, 2011 at 1:18 pm | Permalink

    Well, let’s try that again:

    Ah – yes, I did remove the hyperlink on the Post Title on purpose. If you want to put it back on there, all you need to do is copy some of the code up from the 3rd posttitle if statement like so:

    Replace:

    $posttitle = '<div class="entry-title_box"><h1 class="entry-title">' . get_the_title() . "</h1></div>\n";

    which doesn’t have any hyperlink in it with:

    $posttitle = '<div class="entry-title_box"><h1 class="entry-title"><a href="';
      $posttitle .= get_permalink();
      $posttitle .= '" title="';
      $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
      $posttitle .= '" rel="bookmark">';
      $posttitle .= get_the_title();
      $posttitle .= "</a></h1></div>\n";

Post a Comment

Your email is never shared. Required fields are marked *

*
*

Client Login






Go to login

Absolute Truth

Sign up for our newsletter






Read the absolute truth online

Learn more about the absolute truth