How to create a glossary with Joomla 4 - Part 1 - #JOC

How to create a glossary with Joomla 4 - Part 1 - #JOC

Joomla is extremely powerful when it comes to content. And when you combine the content and the overrides, then there is no limitation except your imagination. In this tutorial, we are going to create a glossary, just with Joomla 4.

What are the benefits to create a glossary just with Joomla?

  • Your glossary's content is powered by com_content
    You can manage it easlily, like any other content powered by Joomla. Adding and/or editing the content of your glossary is really simple.
  • No need to install and maintain an extension
    No extension to install and maintain. No learning curve to endure. Forget the CCK and others page builders, you only need Joomla.
  • Improve your Joomla skills with a simple override
    All you have to do is to create a beautiful override based on this tutorial. Don't worry, all the steps are explain in this tutorial.
  • You keep a perfect control on your SEO
    Because your glossary is based on com_content, you'll be able to manage each title and description tags as per your SEO objectives.
  • Once you've setup your glossary, you're done !
    Because it's really simple to create (trust me) and to maintain, your glossary will be online in minutes.

The structure of the glossary

Simply, a glossary is a list of words displayed and grouped by alphabetical order (like a dictionary).

Once we've defined this, it's easier to understand how we'll create our glossary with Joomla:

  • each initial letter is a category
  • the word is the article's title
  • the definition of the word is the article's content

To manage our glossary easily, we create first a category named "Glossary" and for each letter: A, B, C, D, E, etc., we create a child category. The structure should looks like this:

Author articles

Then, we add our content by creating articles in the relevant categories.

List of articles

Now, let's display our glossary

In this example, the initials letters, the words and the definitions are displayed on the same and unique page. The user just have to read to access the information. This is very basic and it's a good option if you don't have too many words and definitions to display in your glossary.

To acheive this, we need to display all the content in one single page. So, we'll create first an article menu item, then a module "Articles category" to display the glossary and at last, we'll override the module to get the perfect display.

Create the menu item
  1. From the control panel, click on Menus in the left menu.

    Joomla - Creating a menu item
  2. Select your menu and click on the + icon to create a new menu item.

    Joomla - Creating a new menu item
  3. Indicate the title of your menu item (f.ex: Glossary) and id needed, customize its alias.

  4. In Menu Item Type *, select Articles and then Single article.

  5. In Select Article *, click on the + Create button.

  6. Fill the required informations for your article. In the example, the article only contains a basic intro text.

  7. Setup the parameters of the article and the menu item accordingly to your needs. Now, you should have this:

    Joomla - Menu item created
  8. Once you're done, click Save and close button.

Create the module
  1. From the control panel, click on the + icon next to Module.

    Joomla - Module creation
  2. In the list, select the module Articles - Category.

    Joomla - Module articles category creation
  3. Indicate the title of your module (f.ex: Glossary).

  4. In the tab Menu Assignment, select the menu item created on the previous step.

  5. In the tab Filtering Options, setup the parameters like this:

    • Count: 0 (all the items must be displayed)

    • Category Filtering Type: inclusive

    • Category: select the category Glossary (if named like this).

    • Child Category Articles: include

    • Category Depth: 1

    • The others parameters in this tab are not used.

    Joomla - Module articles category filtering options
  6. In the tab Ordering Options, setup the parameters like this:

    • Article Field to Order By: Title

    • Ordering Direction: Ascending

  7. In the tab Grouping Options, setup the parameters like this:

    • Article Grouping: Category

    • Grouping Direction: Ascending

  8. In the tab Display Options, allow only to display the introtext without limits:

    • Introtext: Show

    • Introtext Limit (characters): 0

  9. Finally, display the module in a position below the article or the component position.

  10. Once you're done, click Save and close button.

Looking for Joomla overrides?

If you need inspiration or tips on Joomla overrides, here are +50 free examples to help and inspire you.

Joomla Overrides

Create the override

This is the most technical point of this tutorial but don't panic, it's pretty simple :)

  1. From the control panel, click on System.

  2. In the part dedicaced to the template, click on Site Templates.

  3. Click on your frontend template (Cassiopeia, in our example).

  4. Click on the tab Create Overrides.

  5. In the modules list, click on mod_articles_category.

  6. In the left list, click on html then on mod_articles_category.

    Here, you have two files:

    • default.php

    • default_items.php

    I suggest you to copy these 2 files using the button New File and naming your new files like this:

    • glossary.php

    • glossary_item.php

    Joomla - Template folder structure

    The content of default.php and default_items.php must be exactly the same in glossary.php and glossary_item.php, only the name are differents.

  7. Click on the file glossary.php to open it in the editor.

    1. At line 21, add the following CSS classes to the <ul> : list-unstyled blog-items columns-3

    2. At line 24, add the following CSS class to the <li> : p-3

    3. Replace the line 25 with this code:

      <div class="mod-articles-category-group"><h3><?php echo Text::_($groupName); ?></h3></div><hr>
    4. At line 27 and 33, replace _items by _item.

  8. Joomla - Template files editor
  9. Click on the Save button.

Explanations about the code
  • List-unstyled
    Because we don't want to display the bullets with the list, this CSS class will delete them.
  • blog-items columns-3
    We use this new CSS class from Joomla to display our glossary on 3 columns. Note that the CSS classes columns-2 and columns-4 are also available if needed.
  • P-3
    This class will add some padding all around the item. More info about padding in the official Bootstrap documentation
The last step...

Now, go back to the module you've created earlier.

Open it and in the tab Advanced select Glossary in the layout parameter.

Joomla - Module parameter

Once it's done, click the Save and close button.

Now, your glossary must looks like this:

Joomla Glossary Override

If your build a large glossary, you probably have a real benefit to avoid a very long scroll to your users. In this case, you might consider one of these 2 options.

  1. Collapse. This native JavaScript Bootstrap class allow you to toggle the visibility of any content. With this class, you can display an element (the definition, in this example) only after the user's click. More info here: Bootstrap Collapse. In this case you want to use it in your override, don't forget to setup the module accordingly.
  2. A definition per page. You can also decide to display only the words on the glossary page. To read the definition, the user have to click on the word which open a new page. This option might be time consuming because you'll have to create a menu item for each word in your glossary. But it could be an interesting point to consider if you have large defintions (with media files, for example) or if you want to manage the SEO fo each term of your glossary.
  3. See this improvment

The Joomla Override Challenge

In association with Viviana Menzel, we've created the unofficial Joomla Override Challenge. The goal is to create each month an override based on an extension or on an project. If you want to participate, feel free to contact Viviana or me :)

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.