jQuery Countdown. A jQuery plugin by Keith Wood to show a countdown to a given time. The package contains the .js and .css file as well as several localization packages.
Any WordPress Theme. It’s your choice. But for this tutorial, I made a copy of the Twenty Ten theme for my sandbox.
Any text editor you prefer, but it would be great to have one that could show line numbers, as some of the instructions below would require you to go to certain line numbers.
Including the script
The Twenty Ten theme does not have a directory for javascript files. To make it a bit more organized, we’ll add a new directory into which we will put the javascript file from the package. How to? In the wordpress directory, go to wp-content > themes > twentyten. Create a folder and name it js. From the extracted jQuery Countdown package, copy the jquery.countdown.js into the js folder.
Load up
We’ll need to modify some lines of the header.php. The file would be inside your theme’s folder. So, open the file and proceed to line 45. Insert the following code in the succeeding line (code just after enqueuing the Comments Reply).
wp_enqueue_script('jquery-countdown', get_template_directory_uri() . '/js/jquery.countdown.js', array('jquery'), '1.5.11');
For those using a different theme, you may add the following line of code before the wp_head() function.
The Markup
We’re going to code the markup. Again, for those using a different theme, you will have to decide where you would want your countdown timer to appear. For this tutorial, we’ll display our timer directly below the banner. We’ll need to add some lines of code to the index.php file. So, go ahead and insert the following code after the get_header() function.
Now, we have our framework for the countdown. The php code ensures that the countdown will only be displayed when the page loaded is the front page.
Making it “Tick”
Where’s the timer? We’re getting there. This time we’ll need to add some codes to the header.php again. Just before the tag, add the following codes.
And, voila! A rather styleless timer below the banner appears! But it works, and counting down to 12-21-2012. In a nutshell, we have added a jQuery script – that which is responsible for creating the timer – that executes when the document has loaded. Observe the line where we declared a variable, myTime. The Date constructor expects the year, month, and day as parameters. But the month ranges from 0 to 11. So as not to add confusion, just specify the month as usual (from 1 to 12) then subtract 1. So, if you want the countdown to this year’s Independence Day, the parameters should be (2012, 7-1, 4). Kapeesh?
The jQuery Countdown has a number of possible settings. In our countdown timer, we set a different setting for format and until. The format setting sets the format for the countdown display Use the following characters (in order) to indicate which periods you want to display: Y for years, O for months, W for weeks, D for days, H for hours, M for minutes, S for seconds. Uppercase for mandatory, lowercase for optional. Meaning, if you don’t want it to display if the value is zero, use lowercase. The until setting sets the time at which the countdown expires.
If you want to have a countdown - technically, that would be count up – from last year’s Christmas to the present time, change the value of the parameters of the Date constructor and use the setting since instead of until. More information on how to use this nifty jquery plugin can be found here.
Beautify
What remains to be done now is to make it look cool. Enter styles. The jQuery Countdown package includes a stylesheet which you could use. If you want to do so, open the style.css of your theme and copy the contents of jquery.countdown.css at the end.
Or you can try and improve what I came up with for this tutorial.
/* jQuery Countdown styles 1.5.11. */
.hasCountdown {
display: block;
text-align: center;
}
.countdown_rtl {
direction: rtl;
}
.countdown_row {
display: block;
text-align: center;
}
.countdown_section {
display: inline-block;
width: 122px;
font-size: 16px;
line-height: 20px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,0.1);
margin: 0 4px;
padding: 0;
}
.countdown_section :first-child {
margin-left: 0;
}
.countdown_section :last-child {
margin-right: 0;
}
.countdown_section br {
display: none;
}
.countdown_amount {
background: #999 none;
margin: 0 0 10px;
font: normal 100px/127px 'Open Sans Condensed', Arial, Helvetica, sans-serif;
text-shadow: 0 1px #000;
display: block;
position: relative;
color: #fff;
border-radius: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.45);
}
.countdown_descr {
display: block;
}
You could try and be more creative with the styling to fit the theme you’re using. And that’s how you integrate a countdown timer into a WordPress Theme. Check out MightyLauncher WordPress theme.
0 comments:
Post a Comment