1

I have added a current date item successfully to my menu via functions.php (Wordpress 4.7) using:

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'header-menu')  {

        $todaysdate = date('l jS F Y');
        $items .=  '<li class="menu-item">' . $todaysdate .  '</li>';

    }
    return $items;
}

My problem is, that the styling is different to those item added in the wp-admin backend. I have tried a few things according to WP Menu Item CSS Classes, but still got problems with the classes. Help would be great. Thank you very much!

2

Normally, menu items are rendered as an <li> tag with an <a> tag inside. You could simply wrap $todaysdate in an anchor so that this item will be styled like the others:

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'header-menu')  {

        $todaysdate = date('l jS F Y');
        $items .=  '<li class="menu-item menu-item-date"><a>' . $todaysdate .  '</a></li>';

    }
    return $items;
}

To keep the item from showing a hand cursor when hovering, add this CSS:

.menu-item-date a:hover {
    cursor: default;
    /* Other styles for hovered date item */
}

Alternatively, you could leave out the <a> tag wrapper and create styles for .menu-item-date to make this item look like the others, but that might be more work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.