{"id":4145,"date":"2014-01-26T23:32:50","date_gmt":"2014-01-27T07:32:50","guid":{"rendered":"http:\/\/g-liu.com\/blog\/?p=4145"},"modified":"2014-01-26T23:34:17","modified_gmt":"2014-01-27T07:34:17","slug":"how-to-add-a-mini-calendar-next-to-your-wordpress-post","status":"publish","type":"post","link":"https:\/\/g-liu.com\/blog\/2014\/01\/how-to-add-a-mini-calendar-next-to-your-wordpress-post\/","title":{"rendered":"How to add a mini-calendar next to your WordPress post"},"content":{"rendered":"

When I installed the Iconic One<\/a> theme to this blog, I knew at once that it would need some important customizations. One of the most important that I added, was a little calendar beside each post title. Many great WordPress themes have a calendar to display the date of a post. Why not give the same touch to Iconic One?<\/p>\n

This tutorial will assume basic familiarity with HTML and CSS. Programming skills, especially PHP, are a plus.<\/p>\n

\"Example<\/a>
Example of a post title with calendar. Appears on the post archive pages.<\/figcaption><\/figure>\n

<\/p>\n

Getting started: Theme inspection<\/h1>\n

First, we have to understand how WordPress puts a page together. When you go to a URL on your blog, WordPress is putting together several PHP files and delivering them to you in one big file. To give you a picture of the parts, TutsPlus has put together a nice visualization:<\/p>\n

\"WP_CheatSheet_ThemeAnatomy\"<\/a><\/p>\n

From this, we can be sure that we’re editing the right theme files. Our calendar will probably appear in files like search.php<\/code> or archive.php<\/code>, and not in the footer.php<\/code>.<\/p>\n

Finding the files<\/h1>\n

You’ll need an FTP client for this step, if you already have one. I recommend FileZilla <\/a>for Windows\/Linux, and Cyberduck <\/a>for Mac.<\/p>\n

    \n
  1. Navigate to your public_html<\/code> folder. Your webhost should have the details on where this is<\/li>\n
  2. Now, go to your blog directory, which should be on the same folder as in the URL. For example, if your blog was at example.com\/blog<\/code>, there should be\u00a0a blog\/<\/code> folder in public_html.
    \nIf you see three folders wp-content<\/code>, wp-admin<\/code>, and wp-includes<\/code>, then you should be in the right place.
    \nIf you’re not sure where your WordPress blog folder is, contact your webhost.<\/li>\n
  3. Navigate to: wp-content\/themes\/[your-theme]<\/code>. [Your-theme]<\/code> should be similar to the name of your theme. This is where all the theme files are stored.<\/li>\n
  4. Now for the most challenging part: Finding out where exactly to put the calendar. Since each theme is a bit different, the exact file in which you put the calendar code can vary. Try looking first in single.php<\/code>, which represents a single blog post. Then\u00a0try looking for the line of code: <?php the_title(); ?><\/code>, as this displays the post title.
    \nIf you don’t see it, then chances are that the post title could be in a different theme file.<\/li>\n<\/ol>\n

    Putting in the code<\/h1>\n

    The code in itself is pretty compact. Figuring out where exactly to put it is the hard part. I like to put my code right before the div<\/code> where <?php the_title(); ?><\/code> appears. I’ve commented the code below so that you can see exactly what’s going on.<\/p>\n

    \r\n<?php \r\n\t$df = 'd M Y'; \/\/ e.g '09 Dec 2013'. Date format\r\n\t$date = get_the_date($df); \/\/ gets the date of the post\r\n\tlist($day, $month, $year) = explode(' ',$date); \/\/ sets day, month, and year of the post\r\n?>\r\n<div class="entry-date"><!-- begins the calendar -->\r\n\t<span class="month"><?php echo $month; ?><\/span>\r\n\t<span class="day"><?php echo $day; ?><\/span>\r\n\t<?php if($year != date('Y')) : \/\/ shows year if post year is not the current year ?>\r\n\t<span class="year"><?php echo $year; ?><\/span>\r\n\t<?php endif; ?>\r\n<\/div>\r\n<!-- This concludes the mini calendar -->\r\n<\/pre>\n
    We’re not quite done yet. This code by itself won’t by any means look pretty. In order to make it look like a calendar we’re going to need some CSS.<\/p>\n
    Copy and paste the following CSS into your theme’s stylesheet, usually style.css<\/code><\/p>\n
    \r\ndiv.entry-date {\r\n\tfloat: left;\r\n\twidth: 64px;\r\n\tborder: 1px solid #16A1E7;\r\n\tbackground-color: #ededed;\r\n\tmargin: -1px 19px -1px -1px;\r\n}\r\ndiv.entry-date .month {\r\n\tbackground-color: #16A1E7;\r\n\tdisplay: block;\r\n\ttext-align: center;\r\n\tfont-weight: bold;\r\n\tpadding: 2px;\r\n\tcolor: white;\r\n}\r\ndiv.entry-date .day {\r\n\tfont-size: 36px;\r\n\ttext-align: center;\r\n\tbackground-color: #ededed;\r\n\tdisplay: block;\r\n\tpadding: 3px 0px;\r\n\tcolor: rgb(68, 68, 68);\r\n}\r\ndiv.entry-date .year {\r\n\ttext-align: center;\r\n\tfont-size: 11px;\r\n\tdisplay: block;\r\n\tpadding: 2px 0px;\r\n\tmargin-top: -2px;\r\n\tborder-top: 1px dotted rgba(22, 163, 233, 0.50);\r\n\tbackground-color: #e6e6e6;\r\n}\r\n<\/pre>\n
    You are encouraged to tweak this to your liking, but be careful not to change any of the display:<\/code> properties. These are what keeps the HTML in line and looking like a calendar.<\/p>\n
    Testing the theme<\/h1>\n
    Upload your changes via FTP, and hit Refresh. You should now have a beautiful, simple calendar right next to your posts.<\/p>\n","protected":false},"excerpt":{"rendered":"
    When I installed the Iconic One theme to this blog, I knew at once that it would need some important customizations. One of the most important that I added, was a little calendar beside each post title. Many great WordPress themes have a calendar to display the date of a post. Why not give the same touch to Iconic One? …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"How to add a mini-calendar next to your #WordPress post http:\/\/wp.me\/p2Zt3y-14R","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[830,58],"tags":[],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Zt3y-14R","_links":{"self":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/4145"}],"collection":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/comments?post=4145"}],"version-history":[{"count":6,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/4145\/revisions"}],"predecessor-version":[{"id":4165,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/4145\/revisions\/4165"}],"wp:attachment":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/media?parent=4145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/categories?post=4145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/tags?post=4145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}