Calendar icons for your WordPress blog

Written by Krzysztof Dryja on October 6, 2012, updated on January 26, 2013 in IT Stuff, Wordpress

Do you like calendar icons that you can see on my site? It’s easy to implement in your WordPress site. Here what you need to do:

1. Go to your active template directory (via FTP or SSH), find style.css or default CSS file location, create calendar directory in the same directory as this CSS file.

2. Download icons and extract to calendar directory just created.

3. Edit your default CSS file and add this code (you can modify it later):

/* Calendar icons, more dryja.info */
.calendar {
  float: left;
  margin-right: 6px;
  width: 42px;
  height: 42px;
  margin-bottom:10px;
}

#content .calendar-icon-1 {
  background: url('calendar/1.gif');
}

#content .calendar-icon-2 {
  background: url('calendar/2.gif');
}

#content .calendar-icon-3 {
  background: url('calendar/3.gif');
}

#content .calendar-icon-4 {
  background: url('calendar/4.gif');
}

#content .calendar-icon-5 {
  background: url('calendar/5.gif');
}

#content .calendar-icon-6 {
  background: url('calendar/6.gif');
}

#content .calendar-icon-7 {
  background: url('calendar/7.gif');
}

#content .calendar-icon-8 {
  background: url('calendar/8.gif');
}

#content .calendar-icon-9 {
  background: url('calendar/9.gif');
}

#content .calendar-icon-10 {
  background: url('calendar/10.gif');
}

#content .calendar-icon-11 {
  background: url('calendar/11.gif');
}

#content .calendar-icon-12 {
  background: url('calendar/12.gif');
}

.calendar-day {
  font-weight: bold;
  font-size: 0.6em;
  color: #000;
  width: 42px;
  text-align:center;
  padding-top: 14px;
}

/* Calendar icons, more dryja.info */

.calendar {

float: left;

margin-right: 6px;

width: 42px;

height: 42px;

margin-bottom:10px;

}

#content .calendar-icon-1 {

background: url('calendar/1.gif');

}

#content .calendar-icon-2 {

background: url('calendar/2.gif');

}

#content .calendar-icon-3 {

background: url('calendar/3.gif');

}

#content .calendar-icon-4 {

background: url('calendar/4.gif');

}

#content .calendar-icon-5 {

background: url('calendar/5.gif');

}

#content .calendar-icon-6 {

background: url('calendar/6.gif');

}

#content .calendar-icon-7 {

background: url('calendar/7.gif');

}

#content .calendar-icon-8 {

background: url('calendar/8.gif');

}

#content .calendar-icon-9 {

background: url('calendar/9.gif');

}

#content .calendar-icon-10 {

background: url('calendar/10.gif');

}

#content .calendar-icon-11 {

background: url('calendar/11.gif');

}

#content .calendar-icon-12 {

background: url('calendar/12.gif');

}

.calendar-day {

font-weight: bold;

font-size: 0.6em;

color: #000;

width: 42px;

text-align:center;

padding-top: 14px;

}

4. Edit functions.php file in your active template directory and paste this code at the end of file:

// Calendar icons, dryja.info
function cal_icons( $title ) {
	if( in_the_loop() && ('post'==get_post_type() /*|| 'page'==get_post_type()*/ ) ) {
		$ex = '<div class="calendar calendar-icon-'.get_the_time('n').'">
  				<div class="calendar-day">'.get_the_time('j').'</div>
			</div>'; 

		return $ex.$title;
	} else return $title;
}
add_action('the_title', 'cal_icons');

// Calendar icons, dryja.info

function cal_icons( $title ) {

if( in_the_loop() && ('post'==get_post_type() /*|| 'page'==get_post_type()*/ ) ) {

$ex = '<div class="calendar calendar-icon-'.get_the_time('n').'">

</div>';

return $ex.$title;

} else return $title;

}

add_action('the_title', 'cal_icons');

Above code add calendar icon into all post. If you want to add calendar icon also to page just uncomment this code:

|| 'page'==get_post_type()

1	\|\| 'page'==get_post_type()

That’s all calendar icons for WordPress.