Skip to content

Instantly share code, notes, and snippets.

@GaryJones
Created January 31, 2012 01:35
Show Gist options
  • Save GaryJones/1708107 to your computer and use it in GitHub Desktop.
Save GaryJones/1708107 to your computer and use it in GitHub Desktop.
Style the post date on the Genesis post info line
<?php
add_filter( 'genesis_post_date_shortcode', 'child_post_date_shortcode', 10, 2 );
/**
* Customize Post Date format and add extra markup for CSS targeting.
*
* @author Gary Jones
* @link http://code.garyjones.co.uk/style-post-info/
*
* @param string $output Current HTML markup.
* @param array $atts Attributes.
*
* @return string HTML markup.
*/
function child_post_date_shortcode( $output, $atts ) {
return sprintf(
'<span class="date time published" title="%4$s">%1$s<span class="day">%2$s</span> <span class="month">%3$s</span></span>',
$atts['label'],
get_the_time( 'j' ),
get_the_time( 'M' ),
get_the_time( 'Y-m-d\TH:i:sO' )
);
}
.post-info {
border-bottom: 1px solid #e1e1e1;
font-family: Georgia, sans-serif;
font-size: 12px;
font-style: italic;
margin: 0 0 5px;
padding: 5px 0 15px 60px;
}
.post-info .time,
.post-info .time span {
color: #fff;
display: block;
text-align: center;
width: 42px;
}
.post-info .time {
left: 10px;
position: absolute;
top: 10px;
}
.post-info .day {
background: #8ab6d9;
font-size: 26px;
font-weight: bold;
height: 29px;
line-height: 1em;
}
.post-info .month {
background: #6c8fac;
height: 18px;
line-height: 1.33333;
text-transform: uppercase;
}
#content .post {
position: relative;
}
#content .post h1 {
margin-left: 60px;
}
#content .post h2 {
font-size: 18px;
margin: 10px 10px 0 60px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment