Breaking Categories Up into Individual Divs

Question

I've been working with the wp_list_categories( $args ); to display categories from a taxonomy and I feel that this might be the wrong method to use. Now I'm wondering if it is possible to instead of having the categories outputted into an unordered list, they are outputted as individual div elements for each category. Is there a better alternative to doing this?

<?php
   $args = array(
      'show_option_none'    => __( 'No treatment categories' ),
      'taxonomy'            => 'treatment-categories',
      'title_li'            => __( 'Treatment Categories' )
   );

   wp_list_categories( $args );
?>

My original prototype of the site is using a grid system with individual columns for each category.

I have worked with get_categories( $args ); and I was able to accommplish what was expected, however I had an issue of trying to link to each category when a user would click on the 'View Treatment' button, it would take the user to the 404 page. Here was the template I was building when I was working with get_categories( $args );.

<?php get_header(); ?>

<section class="hero hero-sml hero-default no-marg-bottom">
   <div class="container clearfix">
      <h1>Treatments</h1>
   </div><!-- .container -->
</section><!-- .hero -->

<section class="margin-top container clearfix">
   <div class="row">

      <?php
         $args = array( 
            'taxonomy'  => 'treatment-categories',
         );

         $categories = get_categories( $args );

         foreach( $categories as $category ) {
      ?>

      <div class="col-4 treatment-category">

         <h3>
            <?php echo $category->name; ?>
         </h3>

         <p>
            <?php echo $category->description; ?>
         </p>

         <p>
            <a class="btn btn-sml btn-clr btn-primary" href="<?php echo esc_url( $category_link ); ?>">
               View treatments
            </a>
         </p>

      </div><!-- .col-4 -->

      <?php
         }
      ?>

   </div><!-- .row -->

</section><!-- .container -->

<?php get_footer(); ?>

Any help on how I can achieve this will be greatly appreciated as I've been stuck on this for a couple of weeks.

Answer 1

You can customize the way wp_list_categories() render the categories by using a custom Walker and pass it as an argument of the function :

$args = array(
    'show_option_none'    => __( 'No treatment categories' ),
    'taxonomy'            => 'treatment-categories',
    'title_li'            => __( 'Treatment Categories' )
    'title_li'            =>  '',
    'walker'              => new My_Walker_Category()
);
if ( count( get_categories( $args ) ) ) {
    wp_list_categories( $args );
}

Where My_Walker_Category() extends Walker_Category class.

The class contains only 3 methods that you need to overwrite to suits your needs.

For exemple in start_lvl and end_lvl methods, you have a test relative to $args['style']:

if ( 'list' != $args['style'] )
    return;

This is relative to the 'style' args or wp_list_categories :

'style' (string)

The style used to display the categories list. If 'list', categories will be output as an unordered list. If left empty or another value, categories will be output separated by
tags. Default 'list'.

So you can add a custom style ('div' for exemple) in you My_Walker_Category() and customize the render of the elements according to your needs.

Answer 2

There are several ways to approach this. The most radical is to completely replace wp_list_categories. This is the approach you followed but got stuck with. Here is a tutorial how to do this properly.

Secondly, there is a filter wp_list_categories which lets you manipulate the html that the function outputs. You could use regex expressions to remove the <ul> tags and replace the <li> tags with <div>. This approach is slightly tricky, because if you manipulate the html in the wrong way you might end up with a broken page. Using jquery to remove and add tags might be more safe.

Finally, depending on your purposes, you might just leave the html as it is and use css to get things the way you want. More specifically, the :before and :after tags can be used to add all sorts of effects on the list elements.