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; | |
| } |
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; | |
| } |