title: Loop through alphabetical array for an A-Z Index
body: <p>This has been asked a couple times but none of the examples show it with proper HTML styling. I'm having some trouble getting the below code to wrap the items in <code>&lt;ul&gt;&lt;/ul&gt;</code> for each section. My current code does the <code>while</code> loop infinitely before switching letters and I'm not sure how to properly do it.</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>$range = range('A', 'Z');
  if (!empty($terms)) {
    foreach ($range as $letter) {
      echo '&lt;div class="column"&gt;';
        echo '&lt;h3&gt;' . $letter . '&lt;/h3&gt;';
        echo '&lt;ul&gt;';
        foreach ($terms as $term) {
          while (strtoupper(substr($term-&gt;name, 0, 1)) == $letter) {
            echo '&lt;li&gt;&lt;a href="' . home_url(get_term_link($term-&gt;term_id)) . '"&gt;' . $term-&gt;name  . '&lt;/a&gt;&lt;/li&gt;';
          }
        }
        echo '&lt;/ul&gt;';
      echo '&lt;/div&gt;';
    }
  }
  </code></pre>
  
  <p>Expected output:</p>
  
  <pre><code>&lt;div class="column"&gt;
    &lt;h3&gt;A&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Atom&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Awesome&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="column"&gt;
     &lt;h3&gt;B&lt;/h3&gt;
     &lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;Banana&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Bottle&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="column"&gt;
     &lt;h3&gt;C&lt;/h3&gt;
     &lt;p&gt;No item found&lt;/p&gt;
  &lt;/div&gt;
  
  [...]
  </code></pre>