Build Directory Pages with WordPress Blocks

The Category Grid and Directory Listings blocks let you build a browseable directory page in the WordPress block editor without writing a shortcode. They are for site owners who want a homepage or landing page made of categories first and live listings underneath.

Insert a Category Grid and Directory Listings, publish, then follow a category from the live page.

Before you start

Smart Directory Pro is active and you have at least one published listing in a category. The Category Grid hides categories that have no listings.
You are using the block editor (Gutenberg), not Elementor. For Elementor, see the Elementor Page Builder doc.

How to use it

Go to Pages > Add New (or open an existing page) in WordPress.
Select the block inserter (the plus button at the top left of the editor).
Type Category Grid in the search box. The block sits in the Smart Directory Pro category.
Select the Category Grid block to add it to the page.
Open the inserter again, type Directory Listings and select it to add it below the grid.
Select Publish, then Publish again to confirm.
View the page while signed out or in a private window. You will see your categories as cards, with the searchable listings below.
Select a category card. It opens that category’s page with its own heading and listings.

In the editor, each block shows a placeholder. The real content appears on the published page.

Each card links to its category page. The coloured icon comes from the category’s icon and colour settings.

The Directory Listings block shows the full discovery page: heading, search, filters, view toggle and results. Card layout here is simplified.

Good to know

Both blocks are rendered by the server, so the editor only shows a placeholder and the page shows live data.
The Category Grid shows top-level categories only, up to 12, ordered by number of listings. Empty categories are hidden.
If there are no categories with listings yet, the grid shows “No categories to show yet.”
Inspector settings exist in the sidebar (Grid Settings, Listings Settings), but in the current release they do not change what visitors see. The Directory Listings block always shows the full discovery page, and the Category Grid always uses the layout above. Leave them at their defaults.
Both blocks support wide and full alignment.
Use one Directory Listings block per page. It is a full search experience, not a small list.

FAQ

Where do I find the blocks?

Open the block inserter and search for Category Grid or Directory Listings. Both are grouped under Smart Directory Pro.

Why does the editor show a placeholder instead of my listings?

The blocks are rendered on the server when the page loads. Preview or publish the page to see the real content.

Why is a category missing from my grid?

The grid only shows top-level categories that have at least one published listing. Add a listing to it or check that it is not a sub-category.

Can I change the number of columns or listings?

Not through the block settings in this release. The layout adapts to the page width automatically.

Can I use these with Elementor?

Elementor has its own widgets. See the Elementor Page Builder doc for that route.