page-tag.php

<?php
/**
 *Template name: Taget page
 **/

    get_header();
    include (TEMPLATEPATH . '/top.php');
?>

<style>
  .wrap-alphabet{
        width: 1000px;
        margin: 0 auto;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
    padding-bottom: 50px;
    }
  .clr{
    clear: both;
  }
  .tag-group{
        width: 160px;
        max-width: 160px;
        margin-left: 30px;
        float: left;
      }
      .tag-group ul{
            list-style: none;
          }
          .tag-group h3{
            margin-bottom: 15px;
          }
  .navibar-text{
        margin: 10px 0 30px;
        padding-left: 100px;
      }
  .alphabet{
    /*background: #ff6640;*/
      padding: 0px 10px;
      border-right: 1px solid #999;
      margin: 0;
      color: #045f9f;
      font-weight: bold;
      float: left;
    }
  .tag-name{
        color: #000;
      }
</style>

<div class="wrap-alphabet">
  <div class="navibar-text">
    <a href="#0-9" class="alphabet">0-9</a>
    <a href="#A" class="alphabet">A</a>
    <a href="#B" class="alphabet">B</a>
    <a href="#C" class="alphabet">C</a>
    <a href="#D" class="alphabet">D</a>
    <a href="#E" class="alphabet">E</a>
    <a href="#F" class="alphabet">F</a>
    <a href="#G" class="alphabet">G</a>
    <a href="#H" class="alphabet">H</a>
    <a href="#I" class="alphabet">I</a>
    <a href="#J" class="alphabet">J</a>
    <a href="#K" class="alphabet">K</a>
    <a href="#L" class="alphabet">L</a>
    <a href="#M" class="alphabet">M</a>
    <a href="#N" class="alphabet">N</a>
    <a href="#O" class="alphabet">O</a>
    <a href="#P" class="alphabet">P</a>
    <a href="#Q" class="alphabet">Q</a>
    <a href="#R" class="alphabet">R</a>
    <a href="#S" class="alphabet">S</a>
    <a href="#T" class="alphabet">T</a>
    <a href="#U" class="alphabet">U</a>
    <a href="#V" class="alphabet">V</a>
    <a href="#W" class="alphabet">W</a>
    <a href="#X" class="alphabet">X</a>
    <a href="#Y" class="alphabet">Y</a>
    <a href="#Z" class="alphabet">Z</a>
    <div class="clr"></div>
  </div>
  <?php
    $characters = array_merge(range('A','Z'),array('Đ'));
    $getTags = get_tags( array( 'order' => 'ASC'));
    $isFirstCharLetter = ctype_alpha(substr($getTags[0]->slug, 0, 1));
    $html .= "<div class='tag-group'>";
    $html .= "<h3 class='tag-title' id='0-9'>0-9</h3>";
    $html .= "<ul class='tag-list'>";
    if ( $isFirstCharLetter == false ){
      while( $isFirstCharLetter == false ){
        $tagq = array_shift($getTags);
        $tag_link = get_tag_link($tagq->term_id);
        $html .= "<li class='tag-item'>";
        if ( $tagq->count > 1 )
        {
          $html .= "<p><a href='{$tag_link}' class='{$tagq->slug}'>";
        }
        else
        {
          $html .= "<p><a href='{$tag_link}' class='{$tagq->slug}'>";
        }
        $html .= "<span class='tag-name'>{$tagq->name}</span></a></p>";
        $html .= "</li>";
        $isFirstCharLetter = ctype_alpha(substr($getTags[0]->slug, 0, 1));
      }
    }
    $html .= "</ul>";
    $html .= "</div>";
    do
    {
      $currentLetter = array_shift($characters);
      $html .= "<div class='tag-group {$currentLetter}'>";
      $html .= "<h3 id='{$currentLetter}'>{$currentLetter}</h3>";
      $html .= "<ul class='tag-list'>";
      while($getTags){
        $firstChar = substr($getTags[0]->slug, 0, 1);
        if (strcasecmp($currentLetter, $firstChar) == 0 ){
          $tagq = array_shift($getTags);
          $tag_link = get_tag_link($tagq->term_id);
          $html .= "<li class='tag-item'>";
          if ( $tagq->count > 1 ) {
            $html .= "<p><a href='{$tag_link}' class='{$tagq->slug}'>";
          } else {
            $html .= "<p><a href='{$tag_link}' class='{$tagq->slug}'>";
          }
          $html .= "<span class='tag-name'>{$tagq->name}</span></a></p>";
          $html .= "</li>";
        }
        else
        {
          break 1;
        }
      }
      $html .= "</ul>";
      $html .= "</div>";
    }
    while ( $characters );
    echo($html);
  ?>
<div class="clr"></div>
  <script type="text/javascript">
    jQuery('document').ready(function() {
      jQuery(".D").after('<div style="clear: both; margin-bottom: 30px;"></div>');
      jQuery(".I").after('<div style="clear: both; margin-bottom: 30px;"></div>');
      jQuery(".N").after('<div style="clear: both; margin-bottom: 30px;"></div>');
      jQuery(".S").after('<div style="clear: both; margin-bottom: 30px;"></div>');
      jQuery(".X").after('<div style="clear: both; margin-bottom: 30px;"></div>');
    });
  </script>
</div>
<?php get_footer(); ?>