WordPress Alphabetical Glossary

I made this piece of code for a WordPress Alphabetical Glossary. It is a simple loop which makes a heading with the first character of the title, of the posts beginning with this character. Each group of posts gets a div called: “alpha_wrapper” around it, and the heading gets a class “alpha_title” so you can style it your own.

I made a alphabetical index too, so you can simply click to the right group of posts with the same first character. It is implemented in the Alphabetical Glossary loop. You can see that the headings with the class “alpha_title” have an ID corresponding with the character links in the “alphabetize” navigation.

<!-- The Alphabetical Index -->
<nav id="alphabetize">
  <?php foreach (range('a', 'z') as $char) { ?>
  <a href="#sort-<?php echo $char; ?>"><?php echo ucfirst($char); ?></a>
  <?php } ?>
  <div class="clear"></div>
</nav><!--End alphabetize-->

<!-- The Alphabetical Glossary -->
<div id="glossary">
if (have_posts()) { $curr_letter = ''; echo '<div class="alpha_wrapper">'; while (have_posts()) { the_post();
$title = get_the_title();
$title_array = explode(' ', $title);
$this_letter = substr($title_array, 0, 1);

   if ($this_letter != $curr_letter) {
      if (!empty($curr_letter)) {
      echo '<div class="clear"></div></div>
      <div class="alpha_wrapper">';
   $curr_letter = $this_letter; ?> 
   <div id="sort-<?php echo strtolower($this_letter); ?>" class="alpha_title">
   <?php echo $this_letter; ?>
   </div><!--End alpha_title-->
   <?php } ?>

    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php } echo '</div>'; } ?>
</div><!--End glossary-->

If you have questions about it, please comment.


3 thoughts on “WordPress Alphabetical Glossary

  1. Love this little snippet. Came in handy for a project that I had to do. but one little bug that I found. I copied the code you had above, and it was not working, took me a while to figure it out but in the code right here:

    if (have_posts()) { $curr_letter = ”; echo ”; while (have_posts()) { the_post();
    $title = get_the_title();`

    needs to be changed to this:

    <?php if (have_posts()) { $curr_letter = ''; echo '’; while (have_posts()) { the_post();
    $title = get_the_title();`

    After I added this to the code it worked great for me. =)

    Kind Regards,

  2. Hi Robbert,

    I believe Jacob means the <?php in front of the if is needed to get output. For the rest, nice code!
    Then I'm able to get the output, but don't have it working yet in the colorMag theme. But I'll check further what I need to change as I'm only a beginner in changing things like this. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s