Print this Post

How to add date to Graphene Theme Top Bar

If you look at top bar of my website, you can see the current date in red text. Date and time gives a dynamic look for any websites. You too can show current date/time on your website. In this post, I’m gonna show you how to add date to Graphene Theme Top Bar.

Date in Graphene top bar on my site

Date in Graphene top bar on my site

There are two ways to add date to Graphene Theme Top Bar. First one needs a plugin, but it is easy to work with. The second one doesn’t need any plugins, but requires some coding skills.

1st method:

In this method, we are using Graphene Action Hooks Widget Areas and WP PHP widget plugin. This plugin lets you run PHP code in widgetized areas. So, first install this plugin.

Then go to Graphene Options –> Advanced –> Action Hooks Widget Areas and click on header.php. Select graphene_top_bar and save option.

Now go to Appearance –> Widgets and add a PHP Widget to Graphene Top Bar widget area. Then Put the below code in it.

echo date("l, dS M Y"); 
PHP Widget with date code

PHP Widget with date code

Now visit any page on your site to see the date on top bar. It will output the date in Thursday, 20th Sep 2012 format. You can change the date format. I’ll tell about this later.

Date in Graphene Top Bar

Date in Graphene Top Bar

The date is there on top bar. But it is not yet convincing. Right? Let’s style it a bit. Find out it’s unique ID using firebug, a firefox extension.

Finding Date Widget ID using firebug

Finding Date Widget ID using firebug

Here the ID is php_widget-15 in my site. It will be different on your case. Find it using firebug. Let’s style it now. Add the below code to Graphene Options –> Display –> Custom CSS or in child theme style.css

#php_widget-15 p {
    text-align: center;
    font: 16px/21px Georgia;
    color: #FF0000;
    margin-top: 15px;

This will give the date widget this shape. You can add some additional CSS as well.

Date in Top Bar after styling

Date in Top Bar after styling

2nd Method:

This method requires no plugin, but involves editing child theme’s functions.php file. So, if you’re not using child theme yet, go get it!

Now, edit graphene child theme style.css file and add this code anywhere between opening and closing PHP tags. i.e between <?php and ?>.

function graphene_top_bar_date() {
echo '<p id="top-bar-date">'.date('l, dS M Y').'</p>';

Then you can style it using #top-bar-date CSS rule.

More date formats

You can show date in other formats as well.
Replace date("l, dS M Y") with date(get_option('date_format')) to show date in the format that you’ve set in WordPress General Settings.

date("l, dS F Y") will give Thursday, 20th September 2012 format.

date("F j, Y") will give September 20, 2012 date format.

date("l, F jS, Y") will give Thursday, September 20th, 2012 format.

date("d/m/Y") will give 20/09/2012 date format.

You can read more about date formats here and here.

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

Permanent link to this article: http://www.prasannasp.net/how-to-add-date-to-graphene-theme-top-bar/


Skip to comment form

  1. sajjad

    thank you for this post
    Worked very nice 🙂

    can you help me in this topic:

  2. Andrea155

    hy Prasanna, i have follow method 1, plugin php; the date is created, but the alignement and colors doesn’t work, and for me is possible to see the date only evidence it by mouse.
    i had pasted your stile css in options from graphene : doesn’t work; after delete from here and paste directly in css child: same problem: theme dosn’ t follow colours and aligment.

    do you have idea?

    1. Prasanna SP

      Hi Andrea!
      The ID of your date widget in top-bar is #php_widget-2. So, you’ve to use this code instead,

      #php_widget-2 p {
          font: 16px/21px Georgia;
          color: #FF0000;
          text-align: center;
          margin-top: 15px;
  3. Andrea155

    You are right and i’m a dummy.. many thanks Prasanna not it works!
    Only anotherr little questions: my site is http://www.salvatoristudioingegneria.com; this page appears empty, and not editable for admin. I don’t like it much
    I’d prefer that principal page would be: http://www.salvatoristudioingegneria.com/home/

    with permalinks? and how?
    Thanks Prasanna!

  4. Kız Oyunları

    thank you for this post
    Worked very nice

  5. Daniel

    Thank you very much for all your excellent tutorials and ideas!

  6. Egidio

    Thanks for this wonderful tip! I got it on my site. I have it centered horizontally, but cannot find a way or code to make it center vertically, too. From the graphic shown here it appears that your date is centered both vertically and horizontally in the image shown. How did you accomplish that? Here’s my code:

    #php_widget-2 p {
    text-align: center;
    font: 16px/21px Tahoma;
    color: #FFFFFF ;
    margin-top: 15px;

    Thanks again for a great tip!


  7. kev

    Great tut i have managed to do this but i don’t know how to center the text in the middle of the bar, if you look at my site you will see what i mean

    1. Prasanna SP

      Hi kev! Add this to Custom CSS to vertically center the text.

      #php_widget-2 {
          padding-top: 15px;
  8. kev

    Brilliant perfect fix thank you and great tuts on here i am enjoying looking and experimenting with them 🙂

  9. Egidio

    The padding addition worked perfectly on my site. Thanks for that!

    I noticed that the date seems to be off by 5-6 hours. I think it has something to do with the time zone. Even though my php.ini has the correct date and timezone set, this widget does not seem to be picking that up. Is there any additional code I need to add in order to make the date displayed match my time zone? What gave this away for me was that I was home in the evening working on some site changes and noticed the date in the top bar was already displaying the next day.

    Thanks again for your help and great widget!


Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.