WordPress.org

Ready to get started?Download WordPress

Forums

Add classes to the parent <ul> wp_list_categories (4 posts)

  1. mediabros
    Member
    Posted 3 years ago #

    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?

  2. Thejas Kamath
    Member
    Posted 3 years ago #

    @mediabros

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

    http://codex.wordpress.org/Good_Navigation_Links

    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    Thanks

  3. keesiemeijer
    moderator
    Posted 3 years ago #

    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(); ?>
  4. mediabros
    Member
    Posted 3 years ago #

    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>';
    
    											}
    	?>

Topic Closed

This topic has been closed to new replies.

About this Topic