logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$10
Removing generated ID & classes on wp_nav_menu

I'm looking for a wp_nav_menu walker that generates clean html output.

What I mean with clean html output is instead of this:

<ul id="menu-menu" class="menu">
<li id="menu-item-573" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-573"><a href="">Home</a></li>
<li id="menu-item-197" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-197"><a href="">About</a></li>
</ul>


I want this:

<ul>
<li class="current-menu-item"><a href="">Home</a></li>
<li><a href="">About</a></li>
</ul>


Note that both the .current-menu-item and .current-menu-ancestor classes should work on any time!

This question has been answered.

Melvin vd Ven | 06/16/11 at 11:16am Edit


The experts have suggested, on average, a prize of $15 for this question.

(3) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    06/16/11
    11:34am
    Jerson Baguio says:

    I think you use jquery to that just put this code in the footer


    <script language='javascript'>
    $('.menu li').removeAttr('id');
    </script>

    • 06/16/11 11:38am

      Melvin vd Ven says:

      Hi, I don't want a jQuery solution if it's possible to do this with a Walker. The problem isn't removing the ID's, but removing the classes + keeping the active's working.

  • avatar
    Last edited:
    06/16/11
    11:53am
    Ivaylo Draganov says:

    Hello,

    There are filters provided for these attributes so you can get away without a separate walker. You could easily remove the id and all of the classes with this code snippet:


    // filter the id and class attributes of nav menu items
    add_filter( 'nav_menu_item_id', 'filter_nav_menu_attributes' );
    add_filter( 'nav_menu_item_id', 'filter_nav_menu_attributes' );

    // function that returns false
    function filter_nav_menu_attributes($content) {

    return false;

    }


    It is possible to filter the classes separately and leave the necessary ones, but it requires some more advanced PHP magic. I'll try to see if I can manage to hack it.

    • 06/16/11 12:04pm

      Melvin vd Ven says:

      Hi,

      Sounds good! The filters are great, if you can manage to keep the current states in this filter it would be a perfect solution.

    • 06/16/11 12:46pm

      Ivaylo Draganov says:

      Well, this is where I got so far:


      function filter_nav_menu_id( $id ) {

      return false;

      }

      function filter_nav_menu_classes( $classes ) {

      // create array for new classes
      $new_classes = array();

      // perform regex match for certain strings and merge the new arrays
      $new_classes = preg_grep( '/current-menu-item/', $classes );
      $new_classes = array_merge( $new_classes, preg_grep( '/current-menu-parent/', $classes ) );
      $new_classes = array_merge( $new_classes, preg_grep( '/current-menu-ancestor/', $classes ) );

      // return the new array with classes
      return $new_classes;

      }

      add_filter( 'nav_menu_item_id', 'filter_nav_menu_id' );
      add_filter( 'nav_menu_css_class', 'filter_nav_menu_classes' );


      The only drawback here is that an empty class attribute remains on the menu items. Unfortunately there's no filter for that so the only way to remove it would be to use a custom walker that is just a slightly modified version(just a single line) of the default one. Something like that works:
      http://pastebin.com/RGGLnPWs

      Cheers!

    • 06/16/11 1:36pm

      Ivaylo Draganov says:

      An improved version of the walker + classes filter:
      http://pastebin.com/BVgnrjx5

      This version uses a little less code. I've removed from the walker the part that builds the id attribute (and because of that the id filtering function is no longer necessary).

    • 06/16/11 1:52pm

      Melvin vd Ven says:

      This is exactly where I was looking for, I have tested it and worked like a charm! Thanks :-)

    • 06/16/11 1:57pm

      Melvin vd Ven says:

      Hmm, how can I hand over the cash? Do I have to wait till this question is ended? :-)

    • 06/16/11 2:22pm

      Ivaylo Draganov says:

      Vote me the prize money and after a while the question will be closed(by an admin maybe). It's a new thing on WP Questions.

  • avatar
    Last edited:
    06/16/11
    11:54am
    Marcel Bootsman says:

    Read this, that should get you started: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output/

    • 06/16/11 12:06pm

      Melvin vd Ven says:

      I have already read this article, but I didn't found a solution to keep the current states.

This question has expired.



Melvin vd Ven voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.