Create a Glossary with WordPress

[EDIT: Tested with WordPress 2.7.1]
I wanted to create a glossary that facilitates terms, buzz words and acronyms used in modern computing. I needed something that was simple to update and manage, and use the capabilities of WordPress rather than creating a simple page with hyperlinks/bookmarks, which would require jumping back and forth into code. I found a few Glossary plugins like IMM-Glossary, which did have management of the glossary posts, however, the definitions were in plain text, and wouldn’t allow formatting. I wanted my text to be formatted using headings, bullet points, even pictures. After many hours of googling and hours of trail and error, I’ve come up with my perfect glossary solution.

This solution allows me to create the glossary content using WordPress posts, and manage the content like any other posts. It uses a mixture of plugins, templates and custom code, and for me it works really well.

Step 1

Download and install the WP-SNAP! plugin. WP-SNAP! creates an alphabetical listing of post titles on a Category or Page template file. Navigation through the listings WP-SNAP! generates is accomplished using the alphabet itself. (For example, if a site visitor clicked on the letter D, any post titles that began with that letter would be showcased.) WP-SNAP! will work on any WordPress 2.1.x or higher site, but is particularly useful managing glossaries, indexes, reviews, or directories.

Step 2

To hold all my glossary terms I need to create a new category in WordPress. I called this category “Glossary”, and made a note of it’s ID (13).

Now that I have my category, I need to change the display of the page when someone clicks on Glossary to make use of the WP-SNAP! plugin, and if anyone clicked on the other categories they would get the ‘normal’ layout. For this I made use of the category template and the template hierarchy.

The first step in modifying what happens when someone visits a Category page is to figure out which of your theme’s files is going to be used to display the posts. This is known as the Template Hierarchy.

In the case of categories, the hierarchy is fairly simple. For instance, the ID number of the Glossary category is 13. The Template Hierarchy specifies that WordPress will use the first Template file it finds in your current Theme’s directory from the following list:

  1. category-13.php
  2. category.php
  3. archive.php
  4. index.php

That is, if you do not have a category-13.php, WordPress will check for a category.php, and so on. So, if you want to make the Category whose ID number is 13 look different from what it is currently (and different from other Category pages), you would want to create a category-13.php file. If you want to make all Category pages look different from other archive pages (such as date and author archives), then you would want to create or modify the category.php file. If you want to make changes to the look of all archive pages, you can create or modify the archive.php file. And if you modify the index.php file, you will affect your entire blog.

So to create a new category-13.php glossary file I copied the next file in the hierarchy that existed in this case archive.php.

I made a few changes to the category-13.php page to remove the post dates, tags etc and added the WP-SNAP! configuration line.

<?php get_header(); ?>
 <!-- Container -->
 <div id="content">
  <!-- Start Postwrap -->
  <div class="postwrap">
   <?php if (have_posts()) : ?>
    <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
    <?php /* If this is a category archive */ if (is_category()) { ?>
     <h2 class="pagetitle"><?php single_cat_title(); ?></h2>
     <?php } ?>
      <?php if (function_exists('wp_snap')) { echo wp_snap(13, FALSE); } ?>
      <p>&nbsp;</p>
       <?php while (have_posts()) : the_post(); ?>
       <div class="Post" id="post-<?php the_ID(); ?>" style="padding-bottom: 40px;">
        <div class="posthead">
         <h1><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
         <small class="postauthor"><?php edit_post_link('Edit'); ?></small>
        </div>
        <div class="postcontent">
         <?php the_content() ?>
        </div>
        <div class="clearer"></div>
       </div>
      <?php endwhile; ?>
     <?php else : ?>
    <h2>Not Found</h2>
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
   <?php endif; ?>
  </div>
  <!-- End Postwrap -->
  <?php get_sidebar(); ?>
  <!-- Container -->
 </div>
<?php get_footer(); ?>

Step 3

Add some CSS style to your WordPress theme to style the ABC layout, the style I used was was:

ol.snap_nav {
 display: inline;
 float: left;
 clear: both;
 list-style: none;
 font-size: 12px;
 letter-spacing: 3px;
}

ol.snap_nav li {
 display: block;
 float: left;
 padding: 0 2px 10px 0;
}

ol.snap_nav li a {
 font-weight: bold;
}

ol.snap_nav li.snap_selected a {
 font-weight: normal;
 font-size: 20px;
 text-decoration: none;
 color : #003399;
}

Step 4

Now that the glossary is all setup, a few final tweaks. If I add a new term to the glossary category, I don’t want it appearing in the front page blog nor in the rss feeds. I looked around to find a way of omitting a certain category from the front page, and although there were a few plugins available, I found this an overkill for this one-off implementation. I finally found some code that can be used. All you need to do is add the following code anywhere in the theme functions.php file.

/* Exclude Category from Main Page and RSS Feeds. Used for Glossary(ID=13) Category. */
function myFilter($query) {
	if ($query->is_feed || $query->is_home) {
		$query->set('cat','-13');
	}

return $query;
}

add_filter('pre_get_posts','myFilter');

The code example above excludes the glossary category (13) from the RSS feed and main page. If you want to exclude multiple categories, simply add a comma (,) and a dash (-) followed by the category ID e.g. ‘-5,-6,-7′.

Step 5

So far so good. I now wanted the glossary link to appear as a page, i.e. I wanted it to look like a page and have the link at the top where my WordPress pages lived. There were several options available, all using various plugins or required creating pseudo pages and linking it back to a category, all of which looked to messy for me. So instead, I just modified my themes header.php file and created a physical link to the category page. I inserted the following code, just after the code for WordPress page links

<ul>
 <li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
 <li>
  <?php wp_list_pages('title_li=&depth=1'); ?>
 </li>
 <li><a class="" href="http://blog.grapii.com/?cat=13"><span>Glossary</span></a></li>
</ul>

Step 6

Finally, as I had the glossary category as a page link, I wanted to hide the glossary category from the category widget. Once again, plenty of plugins available, but for me again this was an overkill. Having searched various forums I came across the best way to achieve this. This solution requires changes to the WordPress core file widgets.php. I know this is not ideal, and if I upgrade to the next version of WordPress I’d loose my changes, but hey, that’s what this article is for, so I can recreate the glossary fairly easy.

Find this line in /wp-includes/widgets.php

$cat_args = "orderby=name&show_count={$c}&hierarchical={$h}";

In WordPress 2.7.1 its

$cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h);

and add the &exclude (WordPress 2.7.1 = ,'exclude') to the end of it followed by the category ID, e.g to exclude category ID 13

$cat_args = "orderby=name&show_count={$c}&hierarchical={$h}&exclude=13";

WordPress 2.7.1 :

$cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h, 'exclude' => '13');

to exclude multiple categories, enter the ID separated by commas (,). e.g exclude category ID’s 5, 6, & 7

$cat_args = "orderby=name&show_count={$c}&hierarchical={$h}&exclude=5,6,7";

Summary

You should now be set, I know there are a number of steps involved, but I hope you agree it’s well worth it. I know have a glossary that is managed by WordPress. All I need to do is create a new post and assign it to the glossary category, and I can manage the definitions as I would any other post within WordPress.

WP-SNAP! Configuration

Grapii Glossary

15 comments

  1. Pingback by Make your readers weep with joy - keyword-rich glossary creator plugins
    on March 4, 2008 at 10:12 am

    [...] Creating a Glossary with WordPress – Great tutorial on how to use WP-Snap to make a glossary.  You would create a category called Glossary and make each word one post.  This would probably be most beneficial for SEO purposes as well.  I like what SNAP means – "WordPress System for Navigating Alphabetized Posts".   [...]

  2. Pingback by Wordpress Tutorial: Eigenes Lexikon mit Wordpress erstellen · Ganz wichtig, ID, Ersetze, BEGRIFF im Lexikon, Kategorie, Lexikon, Cross-Linker, Snap, Startseite, Artikel · Das Internet lebt
    on July 23, 2008 at 11:34 am

    [...] wissen sollte! Dieses Tutorial – das möchte ich der Fairness halber sagen – ist stark an die tolle Anleitung von grapii.com angelehnt. Ich erweitere diese Anleitung ein wenig, übersetze sie in Teilen und lege andere [...]

  3. Pingback by WordPress Glossary Plugin | Get A New Browser
    on December 2, 2008 at 5:44 pm

    [...] Step 2: Read these instructions [...]

  4. Pingback by Tutorial: Eigenes Lexikon mit Wordpress erstellen | wpLove.de
    on March 30, 2009 at 9:58 am

    [...] gelegen kam mir da die Anleitung für ein eigenes WordPress Lexikon mittels WP SNAP! von grapii. Ohne dieses Tutorial, gäbe es dies hier auch [...]

  5. Comment by Maor
    on August 31, 2009 at 5:46 pm

    It appears that WP-snap doesn’t work with WP2.8.4. I get a lot of errors

  6. Comment by CodeMonkey
    on September 2, 2009 at 5:29 pm

    I’m still using WP2.7.1 and haven’t upgraded. I shall try and tackle the issue when/if I upgrade

  7. Comment by Natalia
    on October 5, 2010 at 7:01 pm

    This is cool, but what if I want to still have the preview tooltip on my definition like IMM-Glossary does.. can the 2 be integrated?

  8. Comment by Ruben Sargsyan
    on October 6, 2010 at 12:08 pm

    You can also create a glossary with WordPress by using the plugin “Explanatory Dictionary

  9. Comment by Suganux
    on November 8, 2010 at 12:17 am

    thank you rajest, this article is very usefull for me. but actually, i want to search article that explain how to create category list on another (new) file, but in that file, i want to put an alpabethical category ;)

  10. Comment by Tamil Dictionary
    on March 27, 2011 at 1:26 pm

    awsome man, i tried alot of site for help to start a dictionary site for my local language, u can make a theme and relase , which will very usefull for people to start a glossary site

  11. Pingback by How to Create a Glossary in WordPress | Webshop Buzz
    on June 24, 2011 at 7:34 pm

    [...] (Nathan is the author of the plugin). I also followed much of Rajesh Patel’s blog post on creating a glossary with WordPress, which had great tips on how to create custom category templates and I found excellent advice from [...]

  12. Trackback by SEO
    on October 17, 2011 at 7:40 am

    [...]The information mentioned in the article are some of the best available [...]……

    [...]below you’ll find the link to some sites that we think you should visit[...]……

  13. Pingback by How to Create a Glossary in WordPress – Boho Web
    on July 24, 2012 at 1:19 am

    [...] (Nathan is the author of the plugin). I also followed much of Rajesh Patel’s blog post on creating a glossary with WordPress, which had great tips on how to create custom category templates and I found excellent advice from [...]

  14. Comment by David
    on February 5, 2013 at 4:13 pm

  15. Comment by Roberto
    on June 21, 2013 at 9:30 am

    Hello!
    Great guide, everything is clear.

    At the alphabetical list, I get this error:

    Warning: Missing argument 2 for SearchEverything::se_log_query() in C:\wamp\www\wordpress\wp-content\plugins\search-everything\search-everything.php on line 848

    How come?
    What could it be?

    Thank you! ;)