«

»

Add the date to Graphene top-bar and general settings in WordPress

 

A while ago I wanted to add the date to the top-bar on my site. This was easily accomplished using the graphene-theme and a very useful action hook, plus some markup to color and position it. My problem wasn’t displaying the date in the top-bar or styling it. I simply wanted to display the correct date locally, not in UTC format.

I added the date to the top-bar and noticed it was displaying as Mon, Nov 25th when it was still Sun, Nov 24th. I thought it was a misconfiguration with the server, but after finding out my host doesn’t support changing time zones on a shared plan, I was forced to look for a WordPress solution.

I’m sure there are a few ways to accomplish this, but you’ll need a text widget that can execute php code. You can modify the WordPress text widget or download a plugin like php code widget.

 

Add custom date to posts

Go to Dashboard, Settings, and scroll down to Date Format. Enter, l, F jS Y into the box next to Custom. The format will look like Monday, November 25th 2013. Setting the custom date in admin general settings is optional but I prefer to display the full day and month instead of the default format.

date-format1

 

Extract the date from WordPress

Add an action hook for the top-bar and the code below to your text widget. The difference between one and two is, #1 will extract the date we set in WordPress settings and #2 will add the date. Both produce the same result.

1. Extract the localized date

<p>
<?php echo date_i18n(get_option('date_format')); ?>
</p>

2. Add the localized date

<p>
<?php echo date_i18n("l, F jS Y"); ?>
</p>

 

You can style it by targeting the p id with the code below.

/** add to widget */

<p id="no-utc"><?php echo date_i18n(get_option('date_format')); ?></p>

 

/** add to style.css */
#no-utc {
text-align: center;
color: #FFF;
font: 14px Tahoma;
margin-top: 10px;
}