Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Create a Customized Date Button for WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Create a Customized Date Button for WordPress

When making your blog stand out, one thing that bloggers often ignore is the date button. Something as simple as a customized date button can really make a difference in your blog’s design. Therefore in this article we will show you how you can create a customized date button for WordPress.

Custom Date Button for WordPress

We will start out from the image shown in the left, and will make it look like the one in the right.

You can use the image that we are using above if you so desire for your use, or create your own one.

First thing you need to do is open your style.css file and add something like below:

background: url(images/datebg.gif) no-repeat;
height: 173px;
width: 173px;

Now you may style it however you like, and you can also change the name of the class. Then you would need to open your index.php and single.php. And add the following code where your template fits.

<div class="datebg">
<div class="month"><?php the_time(’M’) ?></div>
<div class="day"><?php the_time(’d’) ?></div>

Make sure you change the styling to fit your needs. Now you should have a customized date image. You can also refer to WordPress Codex for more information.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. iamskyemedia says:

    This tutorial is just what I was looking for but my background picture won’t show up in the blog. I am not sure what I’m doing wrong. The margins and such have been added but that picture won’t show up. Is there a key to that?

  2. Allen Varney says:

    The custom button looks like nothing but a patch of overlapping gray rectangles in Firefox 3.0.11. I had to look at the page in IE to see what you meant. Perhaps we need a blog entry on checking your CSS in different browsers.

    • Editorial Staff says:

      If you just copied and pasted the codes, then you obviously didn’t read the article. No where in there, we have set the paddings, margins, or any other styling. The ones there were just basis. No styling was done. But if you mean that our site is having issues in browsers, please send us a screenshot last time we checked, this site was cross-browser compatible.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.