Order Categories by Character Count

Question

I'm developing a medical directory website in Wordpress, and in the Grid/List pages for the site, each of the listing cards contains a list of specialties (using the category taxonomy within the dDoctors/Directorist theme & plugin). Currently, these specialties are displaying in each of the grid cards in alphabetical order in a Flexbox wrap. Because of the limited space, sometimes there might be some wasted white space in the container. Case in point the following grid card which by default appears as so:

<ul>
    <li>Emergency</li>
    <li>Hospice Home Care</li>
    <li>ICU (NICU)</li>
    <li>Med/Surg</li>
    <li>OB</li>
    <li>Oncology</li>
</ul>

Which looks like this on the page:

I used Developer Tools to rearrange the items so that they're listed in order of least to most character count per category, showing like this in code:

<ul>
    <li>OB</li>
    <li>Med/Surg</li>
    <li>Oncology</li>
    <li>ICU (NICU)</li>
    <li>Emergency</li><li>Hospice Home Care</li>
</ul>

and the code generated on the page as so (with one less line, SCORE!):

So clearly, it appears if I want to optimize the display of these items, they should be arranged in character count order, but to my knowledge, neither Wordpress nor my plugin/theme support this arrangement by default.

The PHP loop that generates this list is located inside the plugins/directorist/templates/archive/fields/category.php file, and looks like this:

<ul>
   <?php foreach ( $listings->loop['cats'] as $cat ) {

        $output = '<li>' . $cat->name . '</li>';
        
        echo $output;    
        
       };
   ?>
</ul>

How can I get this list to be sorted by character count? I would guess I would need to declare a variable for the character count, and then generate a new foreach that sorts it by that. Do I have that correctly, and how would I go about doing that?

Answer 1

This is probably more a question about PHP rather than WordPress, and as such may be closed as off-topic for this site.

That said, you can usort() to sort an array using a custom comparison function:

usort(
  $listings->loop['cats'],
  function( $a, $b ){
    return strlen( $a->name ) - strlen( $b->name );
  }
);

After the call above, the $listings->loop['cats'] array will be ordered from smallest category name to largest.

Sorting from shortest to longest will pack all of the smallest items together nicely - but it also concentrates the largest items, which may ultimately take up an entire line a piece if not paired with a short item. A more space-efficient approach is likely one which would mix long and short items, but it might not feasible if you don't have a rough measure of the width constraint beforehand.