0

I'm using wp_list_pages() to create a nav of the pages in my site.

Some pages have children so I need a dropdown menu in the nav to show the child pages and the Bootstrap markup for dropdown menus.

To use Bootstrap I need to add class names to the corresponding <ul>, <li>, and <a> elements.

I think the best way to add these classes is using a custom walker.

How do I write this custom class to add the classes I need?

The current html:

<ul class="">
  <li class="page_item page-item-6 current_page_item"><a href="/">Home</a></li>
  <li class="page_item page-item-6 current_page_item"><a href="/">Profile</a></li>
  <li class="page_item page-item-8 page_item_has_children">
    <a href="#">Products &#038; Services</a>
    <ul class="children">
      <li class="page_item page-item-17"><a href="">Buying</a></li>
      <li class="page_item page-item-19"><a href="">Selling</a></li>
      <li class="page_item page-item-23"><a href="">Managing</a></li>
    </ul>
  </li>
</ul>

The HTML I need:

<ul class="">
  <li class="page_item page-item-6 current_page_item"><a href="/">Home</a></li>
  <li class="page_item page-item-6 current_page_item"><a href="/">Profile</a></li>
  <li class="page_item page-item-8 page_item_has_children dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Products &#038; Services</a>
    <ul class="children dropdown-menu">
      <li class="page_item page-item-17"><a href="">Buying</a></li>
      <li class="page_item page-item-19"><a href="">Selling</a></li>
      <li class="page_item page-item-23"><a href="">Managing</a></li>
    </ul>
  </li>
</ul>

I've tried extending the walker class but I can't figure out how to determine whether the page has children and apply a class if needed. Here is my walker:

class My_Walker extends Walker_page
{
  function start_el(&$output, $page, $depth, $args, $current_page) {
    if($depth) {
      $indent = str_repeat("\t", $depth);
    } else {
      $indent = '';
    }

    extract($args, EXTR_SKIP);
    $css_class = array('page_item', 'page-item-'.$page->ID);
    $attributes = [];
    $children = get_pages('child_of='.$post->ID);

    if(!empty($current_page)) {
      $_current_page = get_page($current_page);
      _get_post_ancestors($_current_page);

      if(isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors)) {
        $css_class[] = 'current_page_ancestor';
      }
      if($page->ID == $current_page) {
        $css_class[] = 'current_page_item';
      } elseif($_current_page && $page->ID == $_current_page->post_parent) {
        $css_class[] = 'current_page_parent';
      }
    } elseif($page->ID == get_option('page_for_posts')) {
      $css_class[] = 'current_page_parent';
    }

    $css_class = implode(' ', apply_filters('page_css_class', $css_class, $page, $depth, $args, $current_page));

    $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $page->post_title  .'</a>';

    if(!empty($show_date)) {
      if('modified' == $show_date) {
        $time = $page->post_modified;
      } else {
        $time = $page->post_date;
      }
      $output .= " " . mysql2date($date_format, $time);
    }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.