starting to implement alphabetical filter in category page

kit/category-bestand.php

@@ -4,6 +4,30 @@ Template Name: Bestand
 */
 
 get_header();
+
+
+  $numberofusers = $wpdb->get_results( "
+  SELECT post_title
+  FROM {$wpdb->posts}
+  WHERE post_type = 'post' and post_status = 'publish'
+  ORDER BY post_title ASC" );
+  //echo '<pre>'; print_r($numberofusers); echo '</pre>';
+
+  $args = array(
+      'cat'     =>  $categories[0]->cat_ID,
+      'orderby' => 'title',
+      'order'   => 'ASC',
+  );
+  $query = new WP_Query( $args );
+  $available_chars = [];
+  if ( $query->have_posts() ) {
+    while ( $query->have_posts() ) :
+      $query->the_post();
+      array_push($available_chars, substr(get_the_title(),0,1));
+    endwhile;
+    wp_reset_postdata();
+  };
+
 ?>
 
 <main>
@@ -47,9 +71,18 @@ get_header();
                   <div class="tx-indexedsearch-form">
                     <label for="tx-indexedsearch-searchbox-sword"><?php _e('Ergebnisse filtern', 'kit'); ?>:</label>
                     <div>
-                      <ul>
+                      <ul class="catFilter">
-                        <li>Alle</li>
+                        <li class='available active'><a href=#>Alle</a></li>
-                        <li>A</li>
+                        <?php
+                        $chars = array("0-9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "Ä", "Ü", "Ö", "ß");
+                        foreach($chars as $item) {
+                          if (in_array($item, $available_chars)) {
+                            echo "<li class='available'><a href=#>".$item."</a></li>";
+                          } else {
+                            echo "<li>".$item."</li>";
+                          };
+                        };
+                        ?>
                       </ul>
                     </div>
                   </div>

kit/functions.php

@@ -322,6 +322,14 @@ function kit_customize_css()
                background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
              }
 
+             ul.catFilter li.available:hover {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             ul.catFilter li.active {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
          </style>
     <?php
 }

kit/style.css

@@ -1336,3 +1336,23 @@ aside .aside-icon:hover {
 }
 
 /*# sourceMappingURL=main.css.map */
+
+
+ul.catFilter {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+ul.catFilter li {
+  padding: 0px 10px;
+  background-color: #333333;
+  color: #7c7c7c;
+  margin: 0 5px 5px 0;
+  font-size: 1rem;
+  font-weight: normal;
+  overflow-wrap: break-word;
+}
+
+ul.catFilter li.available a {
+  color: #eeeeee;
+}