You may (or may not) have noticed that today I added a new feature to my blog, a desktop calendar-style date display for each post (the ¡°May 28¡å to the left of the post title!). Obviously this not a new idea and can be found on many, many blogs around the Internet, but what is not known is how easy it is to implement this little enhancement. First I will show you how to make one using JavaScript to find today¡¯s date, and I will then show how I customized it for my WordPress blog.
Right, well the first thing you¡¯ll want to do is display today¡¯s date. In my calendar I am only interested in the month and day of the month, so I will retrieve this info first:
<html>
<head>
<title>Calendar Page example</title>
<script type="text/javascript" language="JavaScript">
<!¨C
var days = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("JAN", "FEB", "MAR", "APR", "MAY",
"JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC");
var today = new Date();
var thisMonth = months[today.getMonth()];
var thisDate = today.getDate();
//¨C>
</script>
<style type="text/css">
#mon {
font-family: Arial; Verdana;
font-size: 10px;
color: white;
background-color: maroon;
width: 30px;
text-align: center;
font-weight: bold;
border: 1px solid black;
}
#day {
font-family: Arial, Verdana;
font-size: 18px;
background-color: #FFFFAA;
width: 30px;
text-align: center;
font-weight: bold;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
</style>
</head>
<body>
<div id="mon">
<script type="text/javascript" language="JavaScript">
document.write(thisMonth);
</script>
</div>
<div id="day">
<script type="text/javascript" language="JavaScript">
document.write(thisDate);
</script>
</div>
</body>
</html>
This code will basically output the following:
So now that we have the basic date display working for today¡¯s date using JavaScript, it¡¯s time to show how I put it into my WordPress blog. From here on is only relevant to you if you have a WordPress blog. First, log into your blog and go to the Site Admin area. In here, click on the Presentation tab, and then go to the ¡°Theme Editor¡± subsection. This is where you can edit the appearance of your blog, and if you have done much customization with your blog in the past you should be familiar with this page.
Because we want the date display to show up for every blog post, we need to put our code in the theme file ¡°Main Index Template¡±. Click on the link to this file, which should be located to the right of the large textarea with code in it. This file basically specifies how each and every blog post is displayed to the visitor. It is imperative that you follow these directions exactly, as if you put the code in the wrong place, it could have unpredictable results. Firstly, copy the following code:
<style type="text/css">
#mon {
font-family: Arial, sans-serif;
font-size: 10px;
color: white;
background-color: #1C1C1C;
width: 30px;
text-align: center;
font-weight: bold;
border: 1px solid black;
}
#day {
font-family: "Trebuchet MS", sans-serif;
font-size: 18px;
background-color: #DBF1FC;
width: 30px;
text-align: center;
font-weight: bold;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
#date {
float: left;
margin-right: 10px;
}
</style>
You might notice a couple of changes to the JavaScript example. I have made some basic cosmetic changes such as font and color so the date display fits in with my blog, but the major change is the #date section, which will be used to tell the browser to wrap the post title and other information around the date display to the right of it, rather than put them below it like it would by default. It will also space the display 10px to the left of the other header info (otherwise it would be squished right up next to it). Now find the line in the Main Index Template that looks something like the following, and paste the code you copied immediately above this line:
<?php if (have_posts()) : while (have_posts()) : the_post();?>
Basically, this line checks to see if there are posts, and while there are a post, it will read in the contents of each post in a loop. You must put the following code BELOW this line, otherwise the display will show up the same date for all posts on the page, regardless of when they were posted. Now immediately below the above line, paste the following code:
<script type="text/javascript" language="JavaScript">
<!¨C
var days = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("JAN", "FEB", "MAR", "APR", "MAY",
"JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC");
var thisMonth = months[<?php the_time(¡¯n¡¯); ?> - 1];
var thisDate = <?php the_time(¡¯j¡¯); ?>;
var thisDay = days[today.getDay()];
//¨C>
</script>
Basically this builds on the JavaScript example we looked at earlier, and uses the ¡°the_time()¡± function to retrieve the date of the post. It then finds the shorthand month format for the month (we subtract by 1 because JavaScript month indexes start at zero). Next find the line that looks similar to the following:
<div class="post" id="post-<?php the_ID(); ?>">
Basically, this indicates the start of a post, and we want to put our date display here, so below this line, paste the following code:
<div id="date"> <div id="mon"> <script type="text/javascript" language="JavaScript"> document.write(thisMonth); </script> </div> <div id="day"> <script type="text/javascript" language="JavaScript"> document.write(thisDate); </script> </div> </div>
The above code will output the date of the post in a nice, desktop-calendar style format. Of course you may wish to change the colors and fonts used to suit your website, or you could even expand on this to use a nice desktop calendar image rather than using background colors. I hope you found this post helpful, and if you¡¯ve used the code on your site, please share the link to it in a comment.
discuss this topic to 