WordPress Custom Date and Time Formats Tutorial

How to manage custom date and time formats in WordPress

From the general settings in your WordPress admin panel you can set/change the date and the time formats. To do this, after you log in go to Settings menu>General sub-menu. There you'll see a group of radio buttons labeled Date Format and another one labeled Time Format. For each there are some preconfigured formats that you can select. You can also create a custom date and a custom time format by using the respective radio button:

After you mark the radio button you can configure the format in the text field that's next to the button. The format itself is a pattern that corresponds to the actual date or time. Basically, upper and lower case letters are used to represent the different parts of the date or time. For example, F stands for the month represented with letters (e.g. August, September, October, etc.), while m stands for the month represented with digits (e.g. 08, 09, 10, etc.).

The combination of letters that you type in the Custom text field determines what will be included in the date and time and how it will be ordered. Other symbols are interpreted literally, so a comma is just a comma in the resulting date or time that's displayed.

Remember that these date and time formats are used on the frontend, they will not affect how the date and time are shown in the various sections in the admin panel.

In the next two sections of this tutorial we'll review what the different letters in the custom pattern represent in the date and time that are shown on the frontend.

Custom Date Format

In this section we'll go over the characters used to represent the various components of the date (day of the week, day of the month, month, year). First we'll list the letter that you can put in the field for custom format, then we'll include an explanation of what it stands for and then we'll give examples of how this will look in the resulting date on the frontend.

We'll start with the day of the week:

l (lowercase L)       the full name of the day in letters       e.g. Monday, Tuesday, etc.

D                     a three-letter abbreviation               e.g. Mon, Fri etc.

Here's how to format the day of the month:

d       day of the month in digits with a zero    01, 02, 03, 10, 11, etc.

j       day of the month in digits with no zero   1, 2, 3, 10, 11 etc.

S       adds a suffix for the day of the month    st, nd, th as in 1st, 2nd, 10th, etc.

The basic format characters for the month are:

F       the full name of the month in letters     January, February, etc.

M       a three-letter abbreviation of the month  Jan, Feb, Nov etc.

m       the month in numbers with a zero          01, 02, 03, 10, 11, etc.

n       the month in numbers without a            1, 2, 3, 10, 11, etc. 
        leading zero

To format the year use the following characters:

Y       the year represented with 4 digits        2013, 2014, 2016, etc.

y       the year represented with 2 digits        13, 14, 16, etc.

Let's give some examples. For instance, the following string will result in date formats that look like these examples below it:

l, F d, Y

Friday, September 20, 2013
Wednesday, May 14, 2014
Tuesday, November 5, 2015

While the following string will display the dates in a different way (using the same example dates):

D d/m/y

Fri 20/09/13
Wed 14/05/14
Tue 05/11/15

As we mentioned, other symbols are interpreted literally so you can use commas and forward slashes in formatting the date (and the time).

The S character that's used to add a suffix to the day of the month makes a good combination with the j character. For example, the following string will result in dates formatted like the ones below it:

M jS, Y

Sep 20th, 2013
May 14th, 2014
Nov 5th, 2015

Custom Time Format

You can use the following characters to format the time. As with the characters for the date, we'll list first the character itself, followed by an explanation and examples how the character is actually represented in the time shown on the frontend:

g       shows the hours in a 12-hour format with no     from 1 to 12
        zero at the beginning

h       shows the hours using a 12-hour format with     from 01 to 12
        a zero at the beginning

G       shows the hours in a 24-hour format with        from 0 to 23
        no zero at the beginning

H       shows the hours in a 24-hour format             from 00 to 23
        with a zero at the beginning

i       shows the minutes with a leading zero           from 00 to 59

s       shows the seconds with a leading zero           from 00 to 59

a       shows lowercase am and pm                       am, pm

A       shows uppercase AM and PM                       AM, PM

In the character strings that you use to format the time you can include colons. The colons are interpreted literally. Here is one example of a time format and what it results in:

g:i a

1:26 pm
12:53 am
3:07 pm

Another example format:

H:i:s

13:26:42
00:53:12
15:07:32

If you make any changes don't forget to click on the Save Changes button at the bottom of the page.