This is the first of several How To posts based on features of the World Reach web site I released in June 2012.

At the top of the sidebar of most pages of the site is a link to download the mission organization’s monthly prayer calendar. This link does a number of interesting things thanks to some nifty php code. First it shows the current date in the time zone of the organization’s headquarters. Second, it actively links to the correct month’s PDF calendar without any intervention on the part of their office staff.

Here’s how to create it.

Step One: Install the PHP Code Widget

Since PHP code will not execute in the standard WordPress text widget (which will only render HTML), you’ll need to install a widget that will allow it. I like Otto’s tried and true PHP Code Widget in the WordPress Plugin Repository.

Step Two: Insert the PHP Code in the Widget

Below is the code I’ve used to render the calendar icon and below that will be the explanation of what the various parts of the code mean.

//Render the Month
<div class="prayer-calendar-month">
<?php date_default_timezone_set('America/Chicago');   echo date('M'); ?>
</div>

//Render the Day
<div class="prayer-calendar-day">
<?php date_default_timezone_set('America/Chicago'); echo date('j'); ?>
</div>

//Render the Link
<div class="prayer-calendar" style="cursor: pointer;"
onclick="Javascript:window.open('http://world-reach.org/pdf/Prayer-Guide/
<?php date_default_timezone_set('America/Chicago');  echo date('m'); ?>-
<?php date_default_timezone_set('America/Chicago');  echo date('Y'); ?>.pdf');">

//Render the Text
<div class="prayer-calendar-text">Download the<br />
<?php date_default_timezone_set('America/Chicago');  echo date('F Y'); ?>
<br />Prayer Calendar
</div>
</div>

Render the Month

• The div class prayer-calendar-month is important because we will use it to style and position the month text on the calendar icon with CSS.
• date_default_timezone_set(‘America/Chicago’) is present to set the time zone of the date the code will render to central time. That’s important because PHP will use GMT unless you tell it otherwise. For a complete list of php time zone codes, click here.
• echo date(‘M’) renders the current month in its 3 letter abbreviation. You can also render months in full (like January) or as its numerical equivalent (like 1 or 01). A letter code (like the j used here) tells PHP how you want the date to render. Here is a page that explains the letter codes and what they mean.

Render the Day

• Again, the div class prayer-calendar-day is important for styling and positioning in the CSS that we’ll do in a moment.
• Again, the date_default_timezone_set makes the date render in central time.
• echo date(‘j’) renders the day of the month as a digit.

Render the Link

• To make management of the Prayer Calendar easier for the office staff, I have set up the link to automatically update to the current month and year. The staff simply uploads a PDF named month-year.pdf (like 06-2012.pdf) to a specific location and the sidebar calendar will automatically link to the correct PDF. Also, this allows the staff to upload calendars months in advance and the link will always give the correct month.
• The div class prayer-calendar will allow us to make the entire div clickable to the PDF link.
• style=”cursor: pointer;” makes the mouse pointer change from an arrow to a finger when over the clickable div. Otherwise, the mouse will stay an arrow and users will not know the area is clickable.
• onclick=”Javascript:window.open makes this div clickable and opens the link in a new window (tab).
• The link renders as http://world-reach.org/pdf/Prayer-Guide/(month)-(year).pdf. We get the current month and date with the same echo date functions used earlier.

Render the Text

• Again the div prayer-calendar-text will be used to help position and style the text for the sidebar widget.
• The text has PHP that echos the current month and year: Download the (Month) (Year) Prayer Calendar. The F and Y are php date letter codes for the full month name and 4 digit year.

Step Three: Style the Output with CSS

The CSS for the date icon is below with explanations of some of the more important parts below. In order to make this work, you’ll need a calendar background icon. I have placed the icon I used for the World Reach site here to the left. Many others can be found with a Google images search like this one.

.prayer-calendar {
	border: 1px #3A5275 solid;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	width: 135px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -60px;
	background-color: #F9F9F9;
	background-image: url(/icons/Calendar2.png);
	background-repeat: no-repeat;
	background-position: 8px 8px;
	padding-left:65px;
	box-shadow: 0 0 4px 2px #DEDEDE;
	height: 65px;
}

.prayer-calendar-month {
	position: relative;
	font-size: .65em;
	font-weight: bold;
	color: #fff;
	top: 12px;
	left: 23px;
	text-transform: uppercase;
	text-align: center;
	width: 50px;
}

.prayer-calendar-day {
	position: relative;
	font-size: 2em;
	font-weight: bold;
	color: #000;
	top: 3px;
	left: 23px;
	text-align: center;
	width: 50px;
	letter-spacing: -2px;
}

.prayer-calendar-text {
	line-height: 1.2em;
	font-size: .75em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
}

.prayer-calendar

• background-image: This places the calendar icon as a background image for the div
• no-repeat: insures that the calendar icon displays only once and does not repeat across the div
• background position: pushes the calendar icon 8px down and 8px to the right to give it a little spacing from the border
• padding-left: pushes the rest of the contents of the div 65 px to the right so that the calendar icon is not covered up

.prayer-calendar-month and .prayer-calendar-day

• position relative:basically allows us to do the specific positioning top and left we’re going to do below. If you don’t set position to relative, the top and left won’t work.
• top and left:pushes the month text 12px down and 23px to the left of where it would have been rendered. This places the month text exactly in the blue strip of the calendar icon. I found that position by (lots of) trial and error.
• width: this sets the width of the div for the month and day to the same width as the icon so we can center the text on the icon itself with text-align center.

.prayer-calendar-text

• Nothing special here. This just styles the appearance of the “Click here to download…” text.

More How To’s from the World Reach Site

Over the next weeks, I’ll be publishing more of these tutorials based on features from the World Reach web site. Click here to see which are currently available (tagged World Reach).

Related Posts:

• Fixing the iPhone 3194 Restore Error
• The Anatomy of a Perfect Web Site
• How to Make a Scrolling Back to Top Link in WordPress
• How to Automatically Update Premium Themes with InfiniteWP