WordPress WP Nav Menu Custom HTML ID Based on Page or Category Titles

/ Published in: PHP
Save to your folder(s)

This function, when placed in a theme's 'functions.php' file will insert a custom id attribute into the '<li>' elements generated by a 'wp_nav_menu' function based on the title of the element. It will make a WordPress page or category into a hyphen separated string for CSS styling.

For example, if a post category has the name "This & That", it will generate an HTML id attribute as "this-that".

This version replaces spaces and ampersands - other characters can be added to the "str_replace" functions to filter out other characters that may exist in the "$item_details>title" property.

Copy this code and paste it in your HTML
  1. add_filter('nav_menu_item_id','change_nav_menu_id',10,2);
  2. function change_nav_menu_id($current_id,$item_details){
  3. global $menu_counter;
  5. $id_slug = strtolower(str_replace(' ', '-', $item_details->title));
  6. $id_slug = strtolower(str_replace('&', '',$id_slug ));
  7. $id_slug = strtolower(str_replace('--', '-',$id_slug ));
  9. return $id_slug;
  10. }

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.