How to Style the Date in the Genesis Post Info

If you want to add some fancy styling to the post date to make it stand out, then there’s two things we need to do. The first is to alter the format of the date and add extra markup, and the second is to add some CSS to our stylesheet. Take a look at the following screenshot showing the post title and post info, and take note of the fairly bland appearance of the date:

The original date - fairly standard and non-interesting

That’s not doing it for me, so lets go and jazz it up a little.

The PHP Code

Open up your child theme’s functions.php file and add the following at the bottom, just before any closing ?> that might be there:

Explanation of the PHP Code

The first line is simply a comment, so we’ll know in the future what this bit of code does.

The add_filter() on the second line tells WordPress, that whenever the Genesis 2010-08-27 shortcode is used (as it is in some child theme bylines), we want to alter it with some of our own changes. We want it to run at normal (10) priority, and we’ll be passing in two variables to our custom function.

The rest of the code is the function – the long line is the markup we’ll be returning and outputting. The first value is the markup with a few placeholders (e.g. %1$s), and the next 4 values are the contents of those placeholders. There’s two main things we’re achieving here:

• We’re splitting the date into two bits, and formatting them as simply the day of the month (j), and the 3-letter month (M).
• We’re adding ... and ... around the date parts.

All of this gives us the following:

The altered date, with extra markup

It’s different, but not quite what we were after.

Suggested CSS

We need to add some styling to our child theme’s style.css to really make it effective. Here’s some suggested styles, but feel free to come up with your own variations.

Explanation of the CSS Code

Most of it should be fairly obvious, but there are a couple of things to note that highlights the technique we’re using here.

• The .post-info has a left padding of 60px, so that the “by Cheryl” bit is shifted over to the right and isn’t over the top of our date. The post title (whether it appears as a h1 or h2 level heading, so long as it’s for a post and not a page which has no date) has a margin of the same distance so it starts further right too.
• The .time element is made into a block, given a width, and positioned absolutely 10 pixels from the top and left of the relatively positioned .post element.
• The .day and .month elements are also made into block elements with a given width, then styled with a background and some text formatting to suit.

With all of that styling in place, our date now looks like this:

The finished styled date

By using absolute positioning, instead of negative margins to pull the date block left and up into position, then should the post title wrap around to the next line, the date block won't be forced down a line.

Conclusion

This is a great way of making your post date information stand out, yet still maintain aspects of your design. Instead of plain background colours, you could add a background image instead, add rounded corners, or incorporate the year. Now you know how to add additional markup, then the rest is up to you!