A Date Badge for Thematic Theme

A PHP and CSS Tutorial

Create a date badge for WordPress

Thematic is a great theme and I’ve been using it for about a month now on this blog and I love it. I’m slowly designing a child theme for it and I thought I’d share the code for the date badge I’ve create for my posts.

Because Thematic uses lots of filter-hooks it’s possible to create the badge without editing any of the template files. We can just add a filter function and some CSS.

First we need to make a copy of the thematic_post_header function. This can be found in the Thematic template folder library/extensions/filter-hooks.php and looks like this.

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

    // Create $posteditlink
    $posteditlink .= '<a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $posteditlink .= '" title="' . __('Edit post', 'thematic') .'">';
    $posteditlink .= __('Edit', 'thematic') . '</a>';
    $posteditlink = apply_filters('thematic_postheader_posteditlink',$posteditlink);

    if (is_single() || is_page()) {
        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>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 .= "</a></h2>n";
    }
    $posttitle = apply_filters('thematic_postheader_posttitle',$posttitle);

    $postmeta = '<div class="entry-meta">';
    $postmeta .= '<span class="author vcard">';
    $postmeta .= __('By ', 'thematic') . '<a class="url fn n" href="';
    $postmeta .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postmeta .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postmeta .= get_the_author();
    $postmeta .= '</a></span><span class="meta-sep"> | </span>';
    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta .= ' <span class="meta-sep">|</span> ' . $posteditlink;
    }
    $postmeta .= "</div><!-- .entry-meta -->n";
    $postmeta = apply_filters('thematic_postheader_postmeta',$postmeta);

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

    echo apply_filters( 'thematic_postheader', $postheader ); // Filter to override default post header
}

Copy and paste this code into your child theme’s functions.php file, of course it has to go between the php open and close tags (i.e. <?php  code goes here ?>). Next we need to change the name of the function to make it our own. You only need to make a couple of changes to the first and last line like this:

The first line, change from this.

function thematic_postheader() {

to this.

function wpdc_postheader() {

and the last line, change from this.

echo apply_filters( 'thematic_postheader', $postheader ); // Filter to override default post header

to this.

echo apply_filters( 'wpdc_postheader', $postheader ); // Filter to override default post header

Basically I’ve just changed  ‘thematic’ to ‘wpdc’ but you can change it to anything you want, I’ve just used wpdc because it’s the initials to this blog.

Next we need to find these lines.

    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';

Cut them and move them up and past them underneath this line.

   $postmeta = '<div class="entry-meta">';

So after that, this area of code should look like this.

    $postmeta = '<div class="entry-meta">';
    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    $postmeta .= '<span class="author vcard">';

We then need to change it to this.

    $postmeta = '<div class="entry-meta">';
    //$postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= '<span class="month">' . get_the_time('M') . '</span>';
    $postmeta .= '<span class="day">' . get_the_time('d') . '</span>';
    $postmeta .= '<span class="year">' . get_the_time('Y') . '</span>';
    $postmeta .= '</abbr></span>';
    $postmeta .= '<span class="author vcard">';

What we’ve done there is to comment out the ‘published’ line because we don’t need it for our date badge. Then we’ve removed the ‘get_the_time(thematic_time_display());’ and broken it up into ‘get_the_time(‘M’)’ the month, ‘get_the_time(‘d’)’ the day and ‘get_the_time(‘Y’)’ the year and we’ve wrapped it in some span tags so we can select it with some css.

Finally we need to add the actual filter which replaces the Thematic header with our header, like this.

add_filter('thematic_postheader','wpdc_postheader');

Paste that code into your functions file directly underneath your header function. All we have left to do is save function.php and add the css code to you style.css file.

.entry-date{
 border:1px solid;
 display:block;
 font-family:georgia;
 margin-bottom:10px;
 text-align:center;
 width:60px;
 float:left;
 margin:10px 15px 20px 0;
}
.entry-date span{
 display:block;
}
.entry-date .month{
 font-size:12pt;
 padding-top:3px;
 text-transform:uppercase;
}
.entry-date .year{
 background-color:#666666;
 color:#FFFFFF;
 font-size:12pt;
 line-height:1em;
 margin:10px 0 0;
 padding:3px;
}
.entry-date .day{
 font-size:24pt;
 line-height:.8em;
 font-weight:bold;
}
.post .entry-title{
  float:right;
  width:460px;
}

So That’s it all done. You can download the full code if you want and just copy and paste it into your files. You may have to adjust the css depending on what changes you’ve made to your styles already.