WP Glossary #wp #php

glossary.less

//########## Glossary

@nas-brand: #90C43D;
@nas-info:  #AD9D90;

.flex ( @direction : row; @wrap : no-wrap; @justify : flex-start; @content : flex-start; @items : flex-start; ) {
  display: flex;
  flex-direction: @direction;
  flex-wrap: @wrap;
  justify-content: @justify;
  align-content: @content;
  align-items: @items;
}

.flex-item ( @order : 0; @flex : 0 1 auto; @align : flex-start; ) {
  order: @order;
  flex: @flex;
  align-self: @align;
}

.contents-wrapper { max-width: 100%; margin-bottom: 50px; padding: 0 30px; }

.glossary-wrapper { position: relative; margin-bottom: 50px; padding-bottom: 5px;
  .list-inline { .flex(row; wrap; center; flex-start; flex-start); width: 100%; margin: 0; }
  .list-inline > li { .flex-item(0; 0 1 auto; center); background: @nas-info; .font(13px, @proxima); color: #FFF; text-align: center; text-transform: uppercase; line-height: 32px; .square(32px); margin-left: 2px; margin-bottom: 2px; padding: 0; border: none; }
  .list-inline > li:first-child { margin-left: 2px; }
  .list-inline > li:hover,
  .list-inline > li.selected { background: @nas-brand; cursor: pointer; }
}


.glossary-list { height: 600px; overflow: auto;

  > div { position: relative; .font(14px, @proxima); padding: 50px 15px 50px; border-top: 1px solid #DDD;
      &:first-child { border-top: 0; padding-top: 0; }
      &.active { border-top-color: fade(@nas-info,15%); }
  }
  > div h2 { font-weight: 800; color: @nas-brand; margin: 0 0 -10px; cursor: pointer; }
  > div h3 { .font(18px, @proxima); text-transform: uppercase; margin: 40px 0 10px; }
  > div .return-to-top { position: absolute; bottom: 5px; right: 15px; display: none; .font(11px, @proxima); text-transform: uppercase; color: @nas-info; }

  // When Div is highlighted
  .active { background: fade(@nas-info,15%);
    .return-to-top { display: block; cursor: pointer; }
  }

}

glossary.php

      <div id="content" class="contents-wrapper">

        <nav class="glossary-wrapper">
          <ul class="list-inline uk-list menu">
            <li data-id="0" class="selected">#</li>
            <?php
              $listNav = [ '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' ];
              for ( $i = 0; $i < count($listNav); $i++ ) {
                echo '<li data-id="'.$listNav[$i].'"> '.$listNav[$i].' </li>';
              }
            ?>
          </ul>
        </nav>
        <!-- glossary-wrapper -->

        <div class="glossary-list">
        <?php
        $catList = [ '0','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' ];
        for ( $n = 0; $n < count($catList); $n++ ) :

          $args = array (
            'post_type'       => array( 'glossary' ),
            'posts_per_page'  => -1,
            'orderby'         => 'title',
            'order'           => 'ASC',
            'meta_query'      => array( array( 'key' => 'category', 'value' => $catList[$n], 'compare' => 'LIKE', 'type' => 'CHAR' ) )
          );
          $query = new WP_Query ( $args );
          if ($query->have_posts()) :
            echo '<div id="content-for-'.strtolower($catList[$n]).'" class="" data-count="'.$n.'">';
            echo '<h2>'. ( $catList[$n] == '0' ? '#' : $catList[$n] ) .'</h2>';
            while ($query->have_posts()) : $query->the_post();
              the_title('<h3>','</h3>');
              the_field('content');
            endwhile;
            echo '<p class="return-to-top">Return to Top</p>';
            echo '</div>';
          endif;
          wp_reset_postdata();

        endfor;
        ?>
        </div>

      </div>