Creating a Date Box for WordPress

In the world of web design, WordPress is becoming increasingly more pivotal, whether for blogging, content management or now even for ecommerce, WordPress is robust, flexlible and performs very well in major search engines.

One of the key strengths of WordPress is its shear flexibility and ease of integration with your web design.
I will be working through a quick how-to on creating a visual date box for your blog posts, like the one to the right.
When you are viewing a post in wordpress, as default, the date of the post is shown under the post title. We can inject a bit more style by formatting the date to look more like a graphic.

Firstly, the HTML / PHP

All we will be doing here, is quite simply using a container div, which will display the background image, and three subsequent divs to contain each of the month, day and year. In order to display the correct value, we will be using a line of PHP to print the date.

We will use the PHP function to print the date of when the post was created. For each statement we only require one actual part of the date to be printed, therefore we are basically using the same piece code three times, but printing either the day month or year depending on requirements.

Here is the code

This code should be inserted into wp-content/themes/your_theme/single.php (The page for displaying a single blog post when clicked from the category menu) as the first element inside the post container.

In my theme, the above code is inserted after the following line

div class="post" id="post-">


Secondly, Styling with CSS

Now that we have code sorted, I will quite simply be styling each of the div classes and displaying a background on the container div.

Finally, We will be using CSS to ensure that box sits correctly on the page.

Here is the CSS


.post-date{
float: left;
display: inline;
margin: 0 10px 0 0;
width:60px;
height:68px;
background: url(images/datebg.jpg) no-repeat;
}

.month {text-align:center; text-transform:uppercase; font-size:1.4em; color:#FFF; font-weight:bold; margin:0; padding:0; padding-top:3px; line-height:100%;}

.day {text-align:center; font-size:2.5em; color:#FFF; font-weight:bold; margin:0; padding:0;line-height:100%;}

.year {text-align:center; margin:0; padding:0;line-height:100%;}

I would like to point out that the CSS which is styling the ‘datebox’ container is set to ‘float:left’ and ‘display:inline’. This means that the box will sit to the left and the rest of the post will flow around accordingly.

Now… Include this in your web design

Here’s the fun part, trying it yourself. It is really simple to put this technique into practice, so why not have a go yourself. Let me know how you get on, and please feel free to comment with examples of your web design and date boxes.