The Hayloft

If you have business hours listed on your website, highlighting the hours for the current day is a nice finishing touch that makes it just a little easier for your visitors to find the information they’re looking for. To set that up, all we need is some beginner-level PHP and a little CSS for styling.

The Goal

We’re going to end up with something like this, although I’m sure you can make it look much better than my demo.

Getting Started

We’ll start by creating a list with the hours for our business. We’ll also add a class to each list item with a three letter abbreviation for that day.

<ul>
    <li class="mon">Monday: 8am - 5pm</li>
    <li class="tue">Tuesday: 10am - 5pm</li>
    <li class="wed">Wednesday: 8am - 5pm</li>
    <li class="thu">Thursday: 11am - 6pm</li>
    <li class="fri">Friday: 1pm - 4pm</li>
    <li class="sat">Saturday: 2pm - 5pm</li>
    <li class="sun">Sunday: closed</li>
</ul>

The date() Function

The real magic is done by PHP’s date() function. It holds all kinds of information about the current time and can display it in many different formats. Here’s an example:

<?php echo "Today is " . date('l, F jS, Y') . "."; ?>

Would output: Today is Friday, July 30th, 2010 (or whatever date you happen to run the code). You can read about all the possible parameters for date() in the PHP manual.

The parameter we’re interested in is D, which returns the current day of the week expressed as a three letter abbreviation.

We’re going to use this to write a class name for the ul element that corresponds to the current day:

<ul class="today-is-<?php echo date('D'); ?>">
    <li class="mon">Monday: 8am - 5pm</li>
    <li class="tue">Tuesday: 10am - 5pm</li>
    <li class="wed">Wednesday: 8am - 5pm</li>
    <li class="thu">Thursday: 11am - 6pm</li>
    <li class="fri">Friday: 1pm - 4pm</li>
    <li class="sat">Saturday: 2pm - 5pm</li>
    <li class="sun">Sunday: closed</li>
</ul>

So on a Friday, our class name will be today-is-Fri, but on a Saturday, it will be today-is-Sat.

Highlighting the Current Day

Now that we have PHP filling in an appropriate class name for our ul, it’s up to CSS to do the rest. We’ll combine each of the possible outputs of date() with the corresponding classes on our list items for each day.

.today-is-Mon .mon,
.today-is-Tue .tue,
.today-is-Wed .wed,
.today-is-Thu .thu,
.today-is-Fri .fri,
.today-is-Sat .sat,
.today-is-Sun .sun {
	background-color: #ee7e1a;
	color: #fff4ea;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

By using descendant selectors in CSS we guarantee that only the current day will match our CSS rules.

Tidying Up

If we want adhere to best practices (and we do!), we should prefer to use an all lower case value for our ul class name. Unfortunately, the date function doesn’t have a parameter for a three letter lower case version of the day. However, we can easily make one ourselves by using the strtolower() function, which converts an input string to all lower case. To use it, all we have to do is wrap it around our date() function when we echo it.

<?php echo strtolower( date('D') ); ?>

Now instead of being mixed case, as in today-is-Fri, it will read today-is-fri, which looks much neater and was hardly any trouble to do. Remember to edit the CSS to reflect the new lower case selectors as well.

The Result

View live demo

Now our hours for the current day are a little easier to find. And best of all, it changes automatically every day.

Takeaways

• PHP’s date() function is a quick and easy way to get all sorts of information about the current date and time.
• Using PHP to write class names dynamically is a powerful technique for styling your pages.
• Using strtolower() to filter the output of other PHP functions can help keep our markup consistent and readable.

One Last Thing

No discussion of business hours would be complete without this video (slightly NSFW-ish):