So, you’ve got them printing in order but not separated?
Assuming you’re just looping through an array, producing a div around each different first letter isn’t hard if you’re starting with a sorted list: you just loop through as normal and look for where the first letter changes.
// Your array of tags is $tags, assuming an array of strings
$initial = current($tags)[0];
$initialTags = array();
echo '<div>';
echo '<h2>' . html_escape($initial) . '</h2>';
foreach ($tags as $tag) {
if ($initial != $tag[0]) {
$initial = $tag[0];
echo '</div><div>';
echo '<h2>' . html_escape($initial) . '</h2>';
}
echo '<p>' . html_escape($tag) . '</p>';
}
echo '</div>';
I’m understanding this as wanting to change what’s displayed on the “Browse by tags” page. You’d first want to override the theme’s default page, which probably produces a tag cloud.
There’s a couple things that need to happen. First, is sorting the tags alphabetically, then grouping them, then displaying them with the divs you want. The sorting could be handled more efficiently with a plugin, but here’s some code for items/tags.php that I think will do the trick.
The sortTags() function sorts them alphabetically, then the $groupedTags nested array gives something grouped by letter. The foreach then produces the output, so the specific HTML you want can be added there.