How to Make a Blog Post Have a Calendar for the Date in WordPress
Changing the post date on a typical WordPress theme, from the default text version into a graphical icon showing the month, day and year, can be quite challenging. It requires adding specific code to several .PHP files and more code to the .CSS stylesheet. You should be familiar with the file manager and the WordPress folder layout, so that you ensure the icon image file is stored in the right place.
Other People Are Reading
Instructions
-
-
1
Open your WordPress dashboard and navigate to the file "Editor" found under the "Appearance" section.
-
2
Upload the calendar icon image that you would like to use for your icon background. These can be found online by searching for "Calendar icons." .JPG and .PNG images work equally well.
-
-
3
Add the following code to your single.php and index.php files: 1 <div class="postdate">
2 <div class="postmonth"><?php the_time('M') ?></div>
3 <div class="postday"><?php the_time('d') ?></div>
4 <div class="postyear"><?php the_time('Y'); ?></div>
5 </div> -
4
Open your Stylesheet (style.css) and add the following (or similar) text:
1 .postdate {
2 float: left;
3 display: inline;
4 margin: 5px 10px 0 0;
5 padding: 2px 0 0 0;
6 background: url(img/date_img.png) no-repeat;
7 width: 60px;
8 height: 70px;
9 text-align: center;1 .postmonth {
2 color: #FFF;
3 font-size: 11px;
4 text-transform: uppercase;
5 font-family: Arial, Helvetica, sans-serif;
6 padding: 2px 0px;
7 }1 .postday {
2 color: #333;
3 font-size: 24px;
4 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
5 padding: 3px 0px;
6 }1 .postyear {
2 2 color: #333;
3 font-size: 11px;
4 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
5 padding: 2px 0px;
6 }
-
1
Tips & Warnings
As of this writing, there are few WordPress plug-ins that automate this change. Admin Management Xtended claims to do it, but it is unclear whether this is a frontend or backend calendar switch.
References
Resources
- Photo Credit Thinkstock/Comstock/Getty Images
