I was going through the list of unanswered posts in Genesis forum and came across this topic in which the user asked:
I saw some themes online with a post stamp placed outside the content post box.. I tried to move around the .date with some css (position absolute) but it still remains in the post-info div. I was wondering if it would be possible to hook, or code, the .date like standalone outside the post info div and let it float on the right?
I gave this is a shot and ended with a cool circular date that can be floated left or right (or any other position for that matter) for each article.
Here’s how this can be done:
Note: I tested this with Genesis Sample theme and the code may have to be tweaked to look good for other themes.
1) Add the following in child theme’s functions.php:
The reason why I have split the date into month and year is because it makes it easy to style them separately if needed.
2) Add the following at the end of child theme’s style.css (WP dashboard -> Appearance -> Editor):
Mobile view:
Tablet view:
Generated HTML screenshot:
References:
http://my.studiopress.com/docs/hook-reference/
http://my.studiopress.com/snippets/post-info/
http://php.net/manual/en/function.date.php
http://obharath.net/blog/
Note: If copy pasting from the above does not work and introduces invalid characters, use the following