Home > Help Center > Applications > WordPress > Jetpack > Jetpack Widgets: Milestone

Jetpack Widgets: Milestone

The Milestone Widget provides you with a simple way to create a countdown either to or from a given date.

Milestone widget is part of The Extra Sidebar Widgets module which is enabled by default. If you do not see the Milestone widget in the Appearance > Widgets please visit Control Jetpack's Modules on One Page to learn how to activate it.

jetpack widgets gallery

Go to Widgets screen and find the Milestone widget:

jetpack widgets gallery

Drag it to your desired widget area or click on it, select the widget area and click Add Widget:

jetpack widgets gallery

See what the basic widget interface looks like:

jetpack widgets gallery

Milestone settings

Title – Text to display as the Widget Title. This text will be styled like the titles of other widgets in your sidebar. If you prefer that no title be displayed, leave this field blank.

Event – Text entered in this field will display immediately above the date. If you prefer that no event be displayed, leave this field blank.

Date and Time – Set the date and time for this milestone. The fields are listed in the following order: month, day, year, hour, minute. Dates may not be later than December 31st, 2037. Hours are entered in 24 hour format.

Message – This message will be displayed after the countdown has ended. You may use the following html tags: <a>, <em> and <strong>. If you prefer that no message be displayed, leave this field blank.

Here's an example of what it looks like during the countdown:

jetpack widgets gallery

And after the countdown:

jetpack widgets gallery

If you select Since your milestone option the widget will count the time after the event has finished:

jetpack widgets gallery

You may need to change the content of Title and Description fields to keep the overall logic:

jetpack widgets gallery

You can also select different Time Unit options:

jetpack widgets gallery

We recommend that you test before choosing a Time Unit because, at certain values, the different options show either hours or days.

It is preferably countdown timer to display 33 days instead of 769 hours forcing users to make additional calculations.

Styling the Milestone widget

You can use Customize > Additional CSS to style the Milestone the way you like it. We are not going to give you any design ideas but we'll show you the HTML code:

<h3 class="widget-title">countdown</h3>
<div class="milestone-content">
<div class="milestone-header">
<strong class="event">John's Birthday</strong>
<span class="date">November 22nd, 2017</span>
</div>
<div class="milestone-countdown">
<span class="difference">33</span>
<span class="label">days</span> to go.
</div>
<div class="milestone-message">John got older (again)!</div>
</div>

and the corresponding CSS classes - enter valid CSS3 in the braces to change any element in the Milestone counter as color, font, or even layout:

aside#milestone_widget-2 h3.widget-title {}
.milestone-content {}
.milestone-header {}
.milestone-header .event {}
.milestone-header .date {}
.milestone-countdown span.difference {}
.milestone-countdown span.label {}
.milestone-countdown:not(span) {}
.milestone-message {}

Do not miss the opportunity to manage the widget visibility by clicking the Visibility button.

#jetpack #tools

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support