Add the day of the week as a body class to your WordPress website.

I’m a regular in the GenesisWP Slack channel, and love tackling little code problems or offering support where I can. One such conundrum came from a question by Paul Smart, who had a client ask him to add different styling to elements on the website depending on the day of the week.

By filtering the body class, and using the PHP Date function, we can add the day of the week to the <body> tag, and then use it to style elements accordingly.

<?php
// Add the day of the week to the body classes.
add_filter( 'body_class', 'add_day_of_the_week_to_class_names' );
function add_day_of_the_week_to_class_names( $classes ) {
$classes[] = strtolower( date( 'l' ) );
return $classes;
}
view raw functions.php hosted with ❤ by GitHub

The PHP date function gives us the day of the week, and we can make use of the strtolower() function to make sure that it’s in lower case and follows the standard formatting of other body classes.

Once this snippet is in place, we can utilise it in our CSS file to change styling depending on the day of the week, like so:

.monday .entry-title {
color: red;
}
.tuesday .entry-title {
color: blue;
}
.wednesday .entry-title {
color: green;
}
view raw style.css hosted with ❤ by GitHub

Reader Interactions

Leave a Reply

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