Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/wordpress-yorgo-nestoridis-development/how-to-add-the-date-to-the-wordpress-navigation/.
This post shows you how you can quickly add the date to your WordPress Navigation (Menu). This post is in line with the earlier tutorial about “How to add a search Box to the WordPress Navigation”.
WordPress Functions and Style
The procedure is simple: we just need to add the function and style it there after.
Add the Date Function
The following will work on any well designed WordPress theme. Add the following lines to your functions.php:
add_filter('wp_nav_menu_items','add_date', 20, 2);
function add_date($items, $args) {
$items .= '<li>' . date("l F jS, Y") . '</li>';
return $items;
}
If you wish to style the date independently from the navigation styles, you just need to add a div class, for example: ‘navdate’ like this:
add_filter('wp_nav_menu_items','add_date', 20, 2);
function add_date($items, $args) {
$items .= '<li class="navdate">' . date("l F jS, Y") . '</li>';
return $items;
}
Note on line 3 the inserted li class ‘navdate’; this link class allows us to style the date using our stylesheet (styles.css or custom.css as the case may be).
Add Style
To add style, we just create the new class in our style sheet, for example:
.navdate {
color: #fff;
float: right !important;
border: none !important;
padding: 10px;
font-size:10px;
}
Note: the date inherits the background from my navigation background (black), however I style the font color to white (line 2).
Then we position the Date on the right side of the navigation bar with the ‘float: right’; the ‘!important’ is needed here to impose this positioning against other rules prevailing for the main-navigation — it may not be needed on all themes. On Semiomantics XO you need to add it. (line 3)
On line 4 we set the border to 0 or none and impose that as well.
Line5: just some padding to get the date of the edges and borders and finally on line 6 I reduced the font size to set the date clearly apart from the other menu items.
Easy, wasn’t it?
Please post your links and show us your version of the date.
Incoming search terms:
- how to add posted date to wordpress theme
- how to style date function in wordpress
- wordpress menu date posted
Related posts:
