Home WordPress How to display a Customized Date Button on WordPress blog?

How to display a Customized Date Button on WordPress blog?

by Satish Kumar
GUTANN_How to display a Customized Date Button on WordPress blog

Most of the bloggers are using custom designed date on their blog and it looks good as well as make it different from others. The Bloggers want to use the format as per their desire design and it makes the eye catching for others.

Today, it this article I’ll show you how can you show the date on your blog with your designed button or format.

To do this first you need to create your design image as I show you a simple design in below:


Now I’ll make my above image as the below date button:


If you want, you can use my image for your site also, or you can create a different image you can create.

After creating the image, you need to add date style code in your “style.css” WordPress file.

The required code should something like below code:


background: url(images/datebg.gif) no-repeat;

height: 170px;

width: 170px;






The above code is sample code as per the mine design, you can change the code as per the your desired style.

Now you need to add some code to “index.php” and “single.php”  to display the date over the image.

You can use the code to display the date something like below code:

<div class=”date”>

<div class=”month”><?php the_time(‘M’)?></div>

<div class=”day”><?php the_time(‘d’)?></div>


If your style is different, you can change the code as per your style fits better. Now your website is ready to show the customized date image.

Don’t forget to subscribe to GUTANN email newsletter to keep update yourself with such posts in future.

Dear learners, if you need any help for your blog you can get the suggestion by commenting below or contact me by using the contact form.


You may also like

Leave a Comment

fourteen − seven =