Add classes to the parent <ul> wp_list_categories

  • Hi there,

    I am getting a nice unordered list with wp_list_categories

    <ul class="categorymenu"> 

<li class="cat-item cat-item-10"><a>cat1</a>
     <ul class='children'>
	<li class="cat-item cat-item-13"><a>subcat1</a> </li>
	<li class="cat-item cat-item-11"><a>subcat2</a> </li>
</ul>
</li>
<li class="cat-item cat-item-14"><a>cat2</a>
     <ul class='children'> ......

    I would like to put it into a accordion like menu, but all the jquery menu’s that i found wants class from the parent list item ( in the code above cat1 and cat2

    <ul class="categorymenu"> 

<li class="HEADING cat-item cat-item-10"><a>cat1</a>
     <ul class='children'>
	<li class="cat-item cat-item-13"><a>subcat1</a> </li>
	<li class="cat-item cat-item-11"><a>subcat2</a> </li>
</ul>
</li>
<li class="HEADING cat-item cat-item-14"><a>cat2</a>
     <ul class='children'> ......

    Like above, check the capitalized classes.

    Anyone know how to give only the head li a specific class?

Viewing 3 replies - 1 through 3 (of 3 total)

  • @mediabros

    You can use following codex which can give you more knowledge about WP Nav Bar and Categories.

    https://codex.www.ads-software.com/Good_Navigation_Links

    https://codex.www.ads-software.com/Function_Reference/wp_nav_menu

    Thanks

    Moderator keesiemeijer

    (@keesiemeijer)

    Put this function in your theme’s functions.php

    function my_categories() {

  $current_category = get_query_var('cat');
  $categories=  get_categories();
  $a = "\n";
  $html = '';
  if(!empty($categories)){
    $html .= '<ul>'.$a;
      foreach ($categories as $cat) {
        $class = ($current_category == $cat->cat_ID) ? ' current-cat': '';
        if ($cat->category_parent == 0){
          $html .= '<li class="cat-item HEADING' . $class . '">';
          $html .= '<a href="' . get_category_link($cat->cat_ID) . '" ';
          $html .= 'title="View all posts filed under ';
          $html .=  $cat->cat_name .'">' . $cat->cat_name. '</a>'.$a;
          $childcats= get_categories('child_of='.$cat->cat_ID);
          if(!empty($childcats)){
          $html .= '<ul class="children">'.$a;
            foreach ($childcats as $ccat) {
              $class = ($current_category == $ccat->cat_ID) ? ' current-cat': '';
              $html .= '<li class="cat-item' . $class . '">';
              $html .= '<a href="' . get_category_link($ccat->cat_ID) . '" ';
              $html .= 'title ="View all posts filed under ';
              $html .=  $ccat->cat_name .'">' . $ccat->cat_name. '</a></li>'.$a;
            }
            $html .= '</ul>'.$a;
          }
          $html .= '</li>'.$a;
        }
      }
      $html .= '</ul>'.$a;
      return $html;
    }
  }

    And call the function like so:

    <?php echo my_categories(); ?>

    Thread Starter mediabros

    (@mediabros)

    Thanks for the replies, ended up with:

    <?php 

$cat = get_query_var('cat');

foreach(get_categories('parent=0&exclude=15') as $category)	{

//for each parent category

		echo '<li class="parent-item"><a class="name" href="#' . $category->slug . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'<span>(' . $category->count . ')</span></a><a class="click">click</a>';

//for each child category in parent category

		echo '<ul class="child">';

			foreach(get_categories('child_of='.$category->term_id.'') as $category) 		{

				echo '<li class="child-item">
						<a href="#' . $category->slug . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'<span>(' . $category->count . ')</span></a>
						</li> ';

													}

		echo '</ul></li>';

											}
	?>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add classes to the parent <ul> wp_list_categories’ is closed to new replies.