WordPress.org

Ready to get started?Download WordPress

Forums

Remove all Menu Li Classes, Replace with first, last, active (9 posts)

  1. nixonelliott
    Member
    Posted 2 years ago #

    I've been having a hell of a time removing all of word-presses default menu classes from the li's while keeping first and last and replacing current-menu-item with active, the standard for css. I have played around with the walker and found it to be far over my head. I am instead using the following custom filter

    add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
    
    function my_css_attributes_filter($var) {
    
    //return in_array('current-menu-item', $var) ? $temp = 'active' : '';
    
    if (in_array('current-menu-item', $var)){
    	$var = 'active';
    	return $var;
    }else{
    	return '';
    }

    This will replace current-menu-item with 'active' when it's found. This code does not stop the 'last' class from being displayed in the last li of the menu which is being displayed by this function

    //Adds first and last classes to the first and last menu items
    function add_first_and_last($output) {
    	$output = preg_replace('/class="menu-item/', 'class="first', $output, 1);
    	$output = substr_replace($output, '<li class="last"', strripos($output, '<li'), strlen('class="menu-item-----"'));
      return $output;
    }
    add_filter('wp_nav_menu', 'add_first_and_last');

    To spite this the first li will not show the 'first' class when not active. I would simply like the following.

      <li class='first active'><!--Shows active too if on current page -->

    • <li class="last">

    I'm not looking for a hand out only to be pointed in the correct direction. What methodology should I go about to try and fix this sense I'm clearly lost. Any help would be greatly appreciated.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    I've been having a hell of a time removing all of word-presses default menu classes from the li's while keeping first and last

    Can I ask... why?

    and replacing current-menu-item with active, the standard for css.

    No - that's completely incorrect. For a start, there's no standard for class names in CSS. And the current-menu-item class is not the same as the :active pseudo class. Those two classes are used for entirely different things.

  3. RevelationTravis
    Member
    Posted 2 years ago #

    I am also very interested in a solution to this. I have been trying almost since the release of WordPress 3.0 to accomplish just this. Why you ask? I've already developed an external CSS file that defines various, specific classes for my navigation menu. I want to use this same CSS file across the entire site - some pages of which may be using WordPress and some pages are not. Also, I find that the additional id's and classes that WordPress throws in there are not necessary for my purposes and just creates superfluous and clunky HTML. Using the single word "active" verses "current-menu-item" is just a personal preference of mine. I have created a walker class that strips a lot of the code, but a solution for cleaning up the the li elements still proves to be annoyingly elusive. Below is my walker that I've got so far (placed in the functions.php file):
    [Code moderated as per the Forum Rules. Please use the pastebin]

    And then within the PHP file where the menu should appear, I simply put the following block of code:
    [Code moderated as per the Forum Rules. Please use the pastebin]

    Another option that I found on stackoverflow.com (see here) is to insert the following block of code in your functions.php file:

    add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
    add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
    add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
    function my_css_attributes_filter($var) {
      return is_array($var) ? array() : '';
    }

    The above solution is great for stripping out most of the unwanted id's and classes, but still leaves

    class=""

    on the li element instead of deleting the class altogether. It also failes to remove the

    class="sub-menu"

    on the ul element of a submenu.

    Whether using a custom walker or some other block of code in the functions.php file, the desired end result is HTML that looks like this:
    [Code moderated as per the Forum Rules. Please use the pastebin]

    If anybody out there can provide some additional insight, modifications to the code above, or some other way of accomplishing this end result, I'm sure there are a lot of people out here in the WordPress community - myself included - that would greatly appreciate it.

  4. RevelationTravis
    Member
    Posted 2 years ago #

    Here is an updated version of the walker that strips out all of the WordPress mess from the menu code:
    [Code moderated as per the Forum Rules. Please use the pastebin]

    While doing an excellent job of stripping out unnecessary code, this does nothing to add the first and last classes and I'm not 100% pleased with the line breaks and tabs. I'm still searching for that perfect solution. Does anybody out there know what it is?

  5. forbze
    Member
    Posted 2 years ago #

    I've implemented the same start_el function mentioned above, and the most elegant way to mark the first and last menu item is to add it to the "CSS Classes" field in the actual menu editor. Simple - but gets the job done.

  6. RevelationTravis
    Member
    Posted 2 years ago #

    I'm still struggling with this. Unfortunately, the solution offered by forbze does not work. It would appear that my custom walker (see above) strips out any custom classes I insert from the backend. I would offer a reward for an answer, but after reading the forum rules, I've found that I can't offer money for a solution to this through these forums. If somebody has already created a custom walker or some other function that pulls this off - I would be very grateful if you would share that with us.

    Also, since I can't edit the above, I'll repost some updated specifications for what I'm trying to do. The goal is for the final HTML to look like this:

    [Code moderated as per the Forum Rules. Please use the pastebin]

  7. kcharity
    Member
    Posted 2 years ago #

    I use this to make the sub-menu have the class "menu" instead of "sub-meu". I am sure that you can change it to remove the class:

    function start_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"menu\">\n";
    
      }
  8. RevelationTravis
    Member
    Posted 1 year ago #

    Okay folks, I've finally found an answer to this problem. Praise God. Yes, I have been working on it this whole time. It has been, by far, the most frustrating thing I have ever tried to do with WordPress. Here is the fix on how to achieve a clean WordPress menu, using wp_nav_menu without resorting to a custom walker:

    http://pastebin.com/470Q2G9K - place this code in your functions.php file

    http://pastebin.com/u1tNQ8XY - place this code in your theme file where you want the menu to appear

    The above solution doesn't place line breaks or tabs as nicely as I would like, but aside from that - I'd say it does a nearly perfect job! If anybody has any comments or suggestions, please post a reply - I'd love to keep making this better.

    Thanks.

  9. RevelationTravis
    Member
    Posted 1 year ago #

    Since I posted the above two links, I discovered a couple of mistakes. I guess I was just too excited to put up my results. Here's two new links that should work better:
    http://pastebin.com/W16cxDfY - functions.php
    and
    http://pastebin.com/CGx4aprf - for your WordPress template

Topic Closed

This topic has been closed to new replies.

About this Topic