Custom date box for WordPress


A customised date box can really make a difference in your blog's design.

WordPress has an easy way to make it add the date of your post automatically.

This is how I do it...

The image below is my example, you can use it or you can design your own.


First we'll start with some HTML:







For now I've put in the date myself, I'll show you how to automate it later.

Now let's add some CSS3 magic.

.datebox {

        width: 80px;

        height: 80px;

        background: #ff3300;

        -webkit-border-radius: 6px;

        -moz-border-radius: 6px;

        border-radius: 6px;


.datebox .month {

        padding: 4px;

        color: #fff;

        font-weight: 700;

        text-transform: uppercase;

        text-align: center;


.datebox .day {

        margin: 0 10px;

        padding: 5px;

        background: #fff;

        font-size: 24px;

        font-weight: 700;

        text-align: center;

        -webkit-border-radius: 4px;

        -moz-border-radius: 4px;

        border-radius: 4px;


The design is ready, now let's add the PHP and let WordPress do it's thing.






Now try it out yourself, take a look at the WordPress Codex for more information about the date formats. There are many ways to show them, so be creative.

You can add it to any template where you want to show posts, for example single.php or a category. And one more thing, don't forget to put it in the loop!

It's something simple, but it can give a nice extra touch to your design.

Good luck!

Bampslaan 21 box 3.01
3500 Hasselt
VAT: BE08 4029 5063
2021 © AppSaloon All Rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram