Hello can anyone please give me the code, and tell me where to put it, for how to the change the first letter or the active menu item to red?

thank you

  • Welcome to WordPress Stack Exchange! We love to help. But tutorial requests are nothing we fulfill here. Please update your question and tell us what exactly you've tried yourself so far and where exactly you are currently stuck to provide a narrowly-scoped and detailed question. Many thanks
    – leymannx
    May 4 '19 at 20:38

1. CSS ::first-letter

The first option is selector CSS ::first-letter.

li.menu-item.active a::first-letter {
  color: red;

The a tag inside menu should have display: block / display: inline-block.

Note: The ::first-letter selector can only be used with block-level elements.

2. Filter nav_menu_item_title

Another way is to use nav_menu_item_title filter and surround the first letter with an tag with CSS class.

add_filter( 'nav_menu_item_title', 'se337090_first_letter', 30, 4 );
function se337090_first_letter( $title, $item, $args, $depth )
    if ( $item->current )
        // after application of this filter, there is the concatenation:
        //   $item_output .= $args->link_before . $title . $args->link_after;
        $first_letter = substr( $title, 0, 1);
        $title = substr($title, 1);
        $args->link_before .= sprintf( '<span class="menu-item-first-letter">%s</span>', $first_letter );

        // but you can also add changes to the title:
        //   $title_end = substr($title, 1);
        //   $title = sprintf( '<span class="menu-item-first-letter">%s</span>%s', $first_letter, $title_end )
    return $title;

You can use CSS to change the first letter of a 'div' (class or element). See https://www.w3schools.com/cssref/sel_firstletter.asp .

That link (and others found with a simple googles of 'CSS change first letter of div' ) will get you started.

CSS stuff is not really a type of question that is supported here. But the googles/bings/ducks are your friend...

  • Rick, humbly, please flag this question and move on. Providing comments as answers to off-topic questions really shouldn't be the thing to do here.
    – leymannx
    May 4 '19 at 20:43
  • Not a comment. An answer. And, based on the other answer provided (and also upvoted), it can be done via WP functions/filters. I prefer to help people. And my 'rep' shows that's what I do. May 4 '19 at 23:34

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.