WordPress.org

Ready to get started?Download WordPress

Forums

Adding a class to first and last menu items (6 posts)

  1. ragulka
    Member
    Posted 4 years ago #

    Hi,

    I want to achieve a fairly simple thing. To make the first and last menu tiems have a class. Something like this:

    <ul class="menu>
    <li class="first"></li>
    <li></li>
    <li class="last"></li>
    </ul>

    Now, it would be even better if I could also give each menu item a class name based on it's number. And i do not mean the page id.
    Like this:

    <ul class="menu>
    <li class="item-1 first"></li>
    <li class="item-2"></li>
    <li class="item-3 last"></li>
    </ul>

    I've searched all over and I couldn't find anything that would make this possible. I hope someone can help me on this.

  2. stvwlf
    Member
    Posted 4 years ago #

  3. vidanov
    Member
    Posted 4 years ago #

    For pages (wp_list_pages) first-page-item and last-page-item class:

    Put the following code in the functions.php of your theme

    function add_markup_pages($output) {
        $output= preg_replace('/page-item/', ' first-page-item page-item', $output, 1);
    	$output=substr_replace($output, " last-page-item page-item", strripos($output, "page-item"), strlen("page-item"));
        return $output;
    }
    add_filter('wp_list_pages', 'add_markup_pages');

    And the same for the categories (wp_list_categories) first-cat-item and last-cat-item

    function add_markup_categories($output) {
        $output= preg_replace('/cat-item/', ' first-cat-item cat-item', $output, 1);
    	$output=substr_replace($output, " last-cat-item cat-item", strripos($output, "cat-item"), strlen("cat-item"));
        return $output;
    }
    add_filter('wp_list_categories', 'add_markup_categories');
  4. fiksie
    Member
    Posted 3 years ago #

    For the menu in 3.0 version of WordPress you must place the following code:

    function add_markup_pages($output) {
        $output= preg_replace('/menu-item/', 'first-menu-item menu-item', $output, 1);
    	$output=substr_replace($output, "last-menu-item menu-item", strripos($output, "menu-item"), strlen("menu-item"));
        return $output;
    }
    add_filter('wp_nav_menu', 'add_markup_pages');

    It gives "first-menu-item" under id while it gives "last-menu-item" under class. If anyone can correct this it would be great. Not a big deal though. As long as it works :)

  5. kuroi
    Member
    Posted 3 years ago #

    Slightly better would be

    function add_first_and_last($output) {
      $output = preg_replace('/class="menu-item/', 'class="first-menu-item menu-item', $output, 1);
      $output = substr_replace($output, 'class="last-menu-item menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
      return $output;
    }
    add_filter('wp_nav_menu', 'add_first_and_last');

    This forces the extra markup to be added to the class list for the respective elements, rather than having more than one ID for a tag.

    Feels like there should be a more elegant solution though.

  6. Ionel Roiban
    Member
    Posted 3 years ago #

    This should be a default in wp_nav_menu function. Way too important for navigation styling.

Topic Closed

This topic has been closed to new replies.

About this Topic