Over on the WordPress.org forum there was a topic where the user wanted to add a posted date image to the posts list for their theme, we were not able to help much but we though we would look at the twenty eleven default theme.

We wanted to have a solution as a child theme, we did not want the overhead of loading a background image, we had to consider if the function was deleted the theme would not break.

Lets look at how the default theme post title section looks now, we have the title block with the title, the post date and the author, if we are adding the date then we will not need the posted on, we will keep the Author, the date image we will insert in front of the title, and move the author along side.

In the spirit of the twenty eleven theme we will not use an image, we will use all CSS with borders and a gradient, we will return the month and day only, it is not always good to show the year, the gradient being in the stylesheet means it can be altered without the use of images or imaging software.

There we can see the child theme section with the date image, we are not going into the code, but a quick overview of the changes might help others understand what we have done in the download files.

style.css

We created a set of new styles for our date, we have not altered any of the existing theme style, if we wanted to change the gradient we would look for and change these lines, 31-33 and 47-49.

background: #f2f2f2;
background: -moz-linear-gradient(#E0EEEE, #FFFFFF) repeat scroll 0 0 transparent;

functions.php

There are two functions in this file the first is one we created to return the elements for div, spans, month text and day text for our date element.

if ( ! function_exists( 'raindrops_posted_date' ) ) :
function raindrops_posted_date() {
?>
<h2 class="title-date"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php
global $post;
$day = date( 'd',strtotime( esc_html( get_the_date() ) ) );
$month = date( 'M',strtotime( esc_html( get_the_date() )) );
?>
<div class="post-date">
<span class="post-month"><?php echo $month; ?></span>
<span class="post-day"><?php echo $day; ?></span>
</div>
<?php
}
endif;

The second function loads before the parents function with the same name, so WordPress will not load the parents function, here we have reduced six function variables to just three.

if (!function_exists( 'twentyeleven_posted_on' ) ) :
/**
* Create our own twentyeleven_posted_on to override parent function in our child theme
*/
function twentyeleven_posted_on() {
printf( __('<span class="by-author"> <span class="sep">Posted by </span> <span class="author vcard"><a href="%1$s" title="%2$s" rel="author">%3$s</a></span></span>', 'twentyeleven' ),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'twentyeleven' ), get_the_author() ) ),
get_the_author()
);
}
endif;

content.php

We copied this file from the parent and then made our changes, this file is like the old loop.php and renders the posts in the lists, notice that we do not delete code lines as this makes it hard to track changes.

We have added conditional code and remarks like in this example, for the title to render correctly we removed or replace some classes that exist in our style.css, we created our own blocks for this, the original ones are inside a conditional if else endif block.

<?php /* Digital Raindrops call our date function to return the Date Element */ ?>
<?php if(function_exists('raindrops_posted_date')) raindrops_posted_date(); ?>

We hope this will be of use, if you are merging the date element with your own theme we cannot offer help, please backup your theme before editing and test on a local server, we used the free InstantWp for Windows to create this theme