Archive for php

How to Create an Automatically Updating Date Icon in WordPress

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'); ?>

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

//Render the Link
<div class="prayer-calendar" style="cursor: pointer;"
<?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

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=” makes this div clickable and opens the link in a new window (tab).
  • The link renders as 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;
	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;


  • 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.


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


Easy Random Background Images for WordPress

Here’s a fantastic little solution I found from Dan Benjamin that allows you to drop a simple php script in a folder of images to display them at random. This code is really light and works perfectly in all my tests.

I’m using it to randomize background images on the content module of an iThemes Builder site. You can also use it to display a random image from a folder in a post as well. Yes you can do this with something like NextGen Gallery, but a simple solution like this is better if you don’t need all the features of a full gallery plugin.

Here’s all you have to do…

  1. Save the code below or copy and paste it into your text editor of choice.
  2. Save it as rotate.php (or whatever you want to call it) into a folder of images on  your web site.
  3. Add the script like you would add an image.  <img src=”path-to-your-images/rotate.php”> or for a background in css, add this to the element background-image: url(path-to-your-images/rotate.php);

Here’s an Example:

The picture below is randomly generated from the images in an upload directory of this site. Hit refresh to see it randomize.

Now Here’s the Code…

Note: I’ve removed all the commenting to make the code shorter. If you want to see the comments, view Dan Benjamin’s original article here.


$folder = '.';

$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';

$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';

if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;

	if (count($fileList) > 0) {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];

if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
} else {
	if ( function_exists('imagecreate') ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100)
		    or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);