How to customize the appearance of datestamp in WordPress?

3 Views

Please check this website: http://vabbie.com/

The website is in WordPress. The datestamp at the left side of post is very generic looking. I want to convert it into the following style:

Read More

enter image description here

The numeric part is big and indendted on the left side. The “October” part is OCT and year 2012 below it.

I am using the following php code for datestamp: 

<div id="time"><?php the_time('F j, Y') ?></div>

But I am not sure how to style it.

Anyone with WordPress knowledge help please?

Thanks!!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. It uses the same format that the PHP date function uses:

    Check out the format table and choose the appropriate characters to get the desired output as documented.

    echo '<div id="time"><span>' . the_time('j') . '</span><span>' . the_time('M') . '<br />' . the_time('Y') . '</span></div>';

    To start you off =o) just style the SPAN so one floats to the side and then style the font etc all with CSS.

  2. here is the code, along with CSS

    <style>
.post-date {
    float:left;
    font-size: 30px;
    margin:5px;
    color: #999;
    font-weight:bold;
}
.post-monthyear {
    float:left;
    font-size: 14px;
    line-height:12px;
    color: #999;
    border-right: 1px solid #999;
    margin-right: 5px;
    padding-right: 10px;
}
</style>    
<div class="post-date"> <?php echo the_time('j') ?> </div>
<div class="post-monthyear"><?php echo the_time('M') ?> <br/><?php echo the_time('Y') ?> </div>

    Around the tag is the CSS, you can include on the index.php or you can paste to the css file. just play with the CSS for styling..

    Hope it help..