CODEWITHSUNDEEP
wordpresswp-list-categories
Sujan Shrestha
Sujan Shrestha

Reputation: 1040

add classes to wp_list_categories

I am displaying all the categories of custom taxonomy like this:

<?php
    $taxonomy     = 'question';
    $orderby      = 'name';
    $show_count   = false;
    $pad_counts   = false;
    $hierarchical = true;
    $title        = '';

    $args = array(
        'taxonomy'     => $taxonomy,
        'orderby'      => $orderby,
        'show_count'   => $show_count,
        'pad_counts'   => $pad_counts,
        'hierarchical' => $hierarchical,
        'title_li'     => $title
    );
    ?>

    <section class="cd-faq">
        <ul class="cd-faq-categories">
            <?php wp_list_categories( $args ); ?>
        </ul> <!-- cd-faq-categories -->

    </section>

What i want to do is give different classes to each list item. Like this:

<ul class="cd-faq-categories">
        <li><a class="selected" href="#basics">Basics</a></li>
        <li><a href="#mobile">Mobile</a></li>
        <li><a href="#account">Account</a></li>
        <li><a href="#payments">Payments</a></li>
        <li><a href="#privacy">Privacy</a></li>
        <li><a href="#delivery">Delivery</a></li>
    </ul> <!-- cd-faq-categories -->

how can i do this?

Upvotes: 1

Views: 5822

Answers (3)

Mircea
Mircea

Reputation: 11

<!-- POST ARCHIVE CATEGORIES : begin -->
<ul class="post-archive-categories">
<?php
$my_walker= new Walker_Category_Custom();
wp_list_categories(array('walker'=>$my_walker,'orderby'=>'name','title_li' => '','hide_empty'=>0));
?>
</ul>
<!-- POST ARCHIVE CATEGORIES : end -->

Walker class

class Walker_Category_Custom extends Walker_Category {

function start_lvl(&$output, $depth=0, $args=array()) {
$output .= "\n<ul class='post-archive-categories__list'>\n";
}

function end_lvl(&$output, $depth=0, $args=array()) {
$output .= "</ul>\n";
}

function start_el(&$output, $item, $depth=0, $args=array(),$current_object_id = 0) {
$output.= '<li id="nav-menu-item-'. $item->ID . '" class="post-archive-categories__item post-archive-categories__item--category"><a href="'.home_url('category/'.$item->slug).'/" class="post-archive-categories__item-link">

'.esc_attr($item->name);
//<img src="http://working.local/images/'.($item->slug).'.jpg">
}

function end_el(&$output, $item, $depth=0, $args=array()) {
$output .= "</a></li>\n";
}
}

Upvotes: 1

aprinciple
aprinciple

Reputation: 704

<ul class="our__list">
  <?php 
    $categories = get_categories( [
      'taxonomy'     => 'category',
      'type'         => 'post',
      'child_of'     => 0,
      'parent'       => '',
      'orderby'      => 'name',
      'order'        => 'ASC',
      'hide_empty'   => 1,
      'hierarchical' => 1,
      'exclude'      => '',
      'include'      => '',
      'number'       => 0,
      'pad_counts'   => false,
    ] );

    if( $categories ) {
      foreach( $categories as $cat ) {

    ?>
      <li class="our__list-class">
        <a 
          href="<?php echo get_category_link($cat->term_id); ?>"
         >
          <?php echo $cat->name; ?>
        </a>
      </li>
  <?php
      }
    }
  ?>
</ul>

Upvotes: 1

Tomasz Dziuda
Tomasz Dziuda

Reputation: 346

You have two possible solutions - parse the output code through the wp_list_categories filter, which have a full access to the final code outputed by the wp_list_categories function. But in this case you will affect also other calls of the wp_list_categories function.

Other solution is to create own function based on the wp_list_categories code but i.e. modified to add CSS clases based on the category slug.

You can find a full source code of the wp_list_categories function here.

Upvotes: 1

Related Questions