0

i want to display all wordpress Categories with different structure and i dont want use the list structure . i want to choose my own elements in structure like this :

<div> catname <input type="hidden"> <div class="sub">subname<input><div class="secondsub"></div></div></div>

Guide me please . thanku

5
  • What is exactly the problem you are facing while trying to do that? What APIs or concepts need clarification? – Mark Kaplun Jan 14 '17 at 9:55
  • @MarkKaplun i have a accorddion menu and i want to use it to show categories . but this menu is not with list style (li) . – sajadk Jan 14 '17 at 9:57
  • I assume you want to create a category based accordion menu? MainCategory as header with the subcategories inside. – funkysoul Jan 14 '17 at 10:10
  • with proper css there should be very little difference between the HTML elements you use. The differences will be important only to software that tries to uderstand the semantics of the HTML, like search engines, but not to browsers – Mark Kaplun Jan 14 '17 at 11:14
  • .... unless it is required by your JS – Mark Kaplun Jan 14 '17 at 11:18
1

Here's a link to a gist of mine, you could simply replace the ul li with divs as you need.

Calling the function getCatTree will result in an output of all categories with the according sub children inside an ul/li construct. Now you just need to tailor your css/js to match the look and feel and the functionality you looking for.

Replace product_cat with the taxonomy you need

//GET CATEGORIES FOR NAVIGATION
add_action('tauchbar_get_cats', 'getCatTree', 15);
function getCatTree(){
  $taxonomy     = 'product_cat';
  $orderby      = 'name';  
  $show_count   = 0;      // 1 for yes, 0 for no
  $pad_counts   = 0;      // 1 for yes, 0 for no
  $hierarchical = 1;      // 1 for yes, 0 for no  
  $title        = '';  
  $empty        = 0;

  $args = array(
         'taxonomy'     => $taxonomy,
         'orderby'      => $orderby,
         'show_count'   => $show_count,
         'pad_counts'   => $pad_counts,
         'hierarchical' => $hierarchical,
         'title_li'     => $title,
         'hide_empty'   => $empty,
         'exclude' => array( 104 )
  );

  echo '<ul class="nav_categories">';
  $all_categories = get_categories( $args );
  foreach ($all_categories as $cat) {
    if($cat->category_parent == 0) {
        $category_id = $cat->term_id;       

        echo '<li data-catname="'.$cat->name.'" class="cat_button"><a href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a>';

        $args2 = array(
                'taxonomy'     => $taxonomy,
                'child_of'     => 0,
                'parent'       => $category_id,
                'orderby'      => $orderby,
                'show_count'   => $show_count,
                'pad_counts'   => $pad_counts,
                'hierarchical' => $hierarchical,
                'title_li'     => $title,
                'hide_empty'   => $empty
        );

        $sub_cats = get_categories( $args2 );

        if($sub_cats) {
          echo '<ul class="sub_cat">';
            foreach($sub_cats as $sub_category) {

                echo '<a href="' . get_term_link($sub_category->slug, 'product_cat') .'">';
                /*$thumbnail_id = get_woocommerce_term_meta( $sub_category->term_id, 'thumbnail_id', true );
                $image = wp_get_attachment_url( $thumbnail_id );
                echo '';*/
                echo "<p>" . $sub_category->name . "</p></a>";
            }   
            echo '</ul></li>';
        } else {
          echo '</li>';
        }
    }       
  }
  echo '</ul>';
}

https://gist.github.com/funkysoul/c27bb013adb9cb847cfff4f5ee8c3847

2
  • link only answers are not an answer :(. please edit the answer and add the code here. – Mark Kaplun Jan 14 '17 at 11:12
  • @MarkKaplun good now? – funkysoul Jan 14 '17 at 11:54

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.