Dictionary List with GenerateBlocks

tdrayson

In this tutorial, I’ll be showing you how to build a dictionary/glossary using the GenerateBlocks Query Loop.

This can be useful for your customers to find posts by letter on your website.

I managed to build a solution that works out of the box and only requires you to add a class to enable the functionality.

Demo

1. Setup our query loop

First we need to insert our GenerateBlocks Query Loop and set a couple of parameters:

  • Posts per page: -1
  • Order By: Title
  • Order: ASC

Feel free to style the query loop however you want. I just used the title linked to the post in my tutorial, however you can add whatever information you want.

screenshot 2023 08 11 at 23.33.33

2. Adding the target class

Next we need to add the class dictionary to the grid block inside the Query Loop Block. This is what will tell our code later on to add the dictionary functionality to the loop.

3. Add the code

Now we want to add the code which will modify our targeted Query Loop. Add the 2 code snippets below to functions.php or code snippet plugin.

Members content only

Become a SnippetClub member to gain instant access to this tutorial plus tons more premium content.

Already a member? Log in below.

Login Form

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

Newsletter

🔒I won't send you spam, I promise