The Countdown Timer

In my last post, I discussed my efforts now to explain some of the work I’ve done, partly so that others might benefit from it and partly so that I can develop an even better grasp on it. In this post, I want to talk about something I’m downright proud of: the countdown timer.

I’ve already talked about the plugin that powers the countdown itself. That was a very lucky find, one that saved me a lot of work in the end. I’m a big believer in not reinventing the wheel, so I looked specifically for a plugin that would support multiple events. The one I found did exactly that, but the visual output was nowhere near what I needed for the site. It listed however many events you wanted to display in bulleted list form, with the title of the event followed by the time left until that event written out as “4 months, 3 weeks, 5 days, 22 hours” and so on.

I knew exactly what I wanted the timer to look like, and it was a far cry from all that, so I did a little searching in the files (with the help of my trusty Google Developer Tools to figure out what I was looking for), and I found the PHP file responsible for the plugin’s output. Once I had that open, I looked for some of the countdown-specific CSS classes I’d seen in the page. That led me to the functions responsible for the output. From there, it was a matter of modifying the code to do what I wanted it to do.

I didn’t bother messing with the ul/li HTML, mostly because I didn’t really need to. I could use CSS to eliminate the bullet and get the spacing I wanted. I did need to move the event title, though.

The function used $content .= to add HTML to the output, so I strung together the title as I wanted it to appear, and I tacked that on to the end of the output. I also included the RSVP badge in that bit of code. I actually had to create a variable for the URL of the image and then use conditional statements to get the correct path on certain pages, depending on where they fell in the directory. I also found a way to use the getURL() method to fill in the link for that badge so that it automatically pulled the event URL supplied by the webmaster in the plugin GUI. Here’s a bit of the work I did on this front:

$eventRsvpImage = "";

if(is_page('Home')) {
	$eventRsvpImage = '../wiefinal/wp-content/uploads/2013/04/rsvp-logo.png';
} elseif (is_page('Investors')) {
	$eventRsvpImage = '../../../wiefinal/wp-content/uploads/2013/04/rsvp-logo.png';
} else {
	$eventRsvpImage = '../../wiefinal/wp-content/uploads/2013/04/rsvp-logo.png';

$content .= '<a href="'.$thisEvent->getURL().'" target="_blank"><img src="'.$eventRsvpImage.'" alt="RSVP" id="rsvp"></a>
	<div id="next-fp">
		<span id="next-fp-intro">Next fastpitch: </span><span id="next-fp-date">'.$eventTitle.'</span>

I wrapped the countdown itself–the numbers–in a div so I could apply the green box just to that part of the countdown. Finally, I had to change the way each unit of time was displayed so that colons appeared between the units, instead of words and commas.

The modifications I made to this plugin seem relatively simple, looking back, but I’d never done such extensive PHP modification/writing before. I’m pretty proud that I worked it all out to be as automated as possible.

Share your thoughts