--- title: "How to Create Category Metro Layout in WordPress?" url: https://nexterwp.com/docs/create-category-metro-layout-in-wordpress/ date: 2024-11-29 modified: 2026-09-23 lang: en author: "Aditya Sharma" description: "A grid says every category matters equally. Often that is not true — one or two carry most of your content and deserve more room. Metro gives you tiles of..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Create-Category-Metro-Layout-in-WordPress_-1024x519.jpg word_count: 629 --- # How to Create Category Metro Layout in WordPress? ## Key Takeaways - Nexter Blocks Taxonomy Listing block shows post categories in a metro layout with grid-style boxes. - Layout tab includes a Metro option, and the Select Taxonomy dropdown lets the block display Categories. - Nexter Blocks must be installed and activated before using the Taxonomy Listing block to show categories or tags in metro layout. A grid says every category matters equally. Often that is not true — one or two carry most of your content and deserve more room. Metro gives you tiles of different sizes in a fixed pattern, so the important categories read as important. *For every Taxonomy Listing setting in one place, see the [Taxonomy Listing guide](https://nexterwp.com/docs/add-taxonomy-listing-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-taxonomy-listing/) ## Before You Start - **Edition:** **Pro** — the Taxonomy Listing block needs Nexter Blocks Pro.- **Block to enable:** Taxonomy Listing, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Terms that exist.** The block lists your real taxonomy terms, so a site with one category shows one card.- **Images on your terms.** Metro tiles are image-led; a tile without one is mostly empty space. ## Steps - Add the **Taxonomy Listing** block and set the layout to **metro**. ![Choosing the metro layout](https://nexterwp.com/wp-content/uploads/2024/11/taxonomy-listing-layout-metro-categories-new.gif) - Set the column count and pick a metro pattern per breakpoint, then publish. ![Metro pattern settings](https://nexterwp.com/wp-content/uploads/2024/11/taxonomy-listing-demo-metro.png) ## How It Behaves Metro is not a variation of grid. It renders differently, and the difference matters when you are debugging. - **Metro tiles use a CSS background image, not an `` tag.** Measured on a 7-term listing: 0 image tags, 7 background images on `tpgb-dy-cat-bg-img-metro`. Grid and masonry do the opposite.- **The pattern is written onto the block as data.** Measured: a `data-metroAttr` attribute carrying the column count and pattern name for desktop, tablet and mobile separately.- **Each breakpoint gets its own pattern**, because a pattern that works across four desktop columns rarely works across two on a phone.- **The category image comes from Nexter's own term image field**, set on the term itself when you edit it. It is not WordPress's featured image and, on a product category, it is not WooCommerce's category image either — those are stored separately and this block does not read them.- **A term with no image still renders one.** Measured: removing a term's image produced a card showing a generic placeholder shipped with the plugin, not a blank or broken image. That is why missing category images are easy to miss.- **The post count is shown by default.** Measured on an untouched listing: each card rendered its real term count.- **Type a number into the item count; do not leave it blank.** Measured on 5.0.6: a blank field renders **one** term rather than all of them, and so does `0`. Reported to the developers.- **Measured with Nexter Blocks Pro deactivated:** the block renders nothing at all — not a wrapper, not a message, zero output. This is a Pro-only block. ## Limitations - **Pro only** — nothing renders with Pro deactivated.- **Background images are invisible to search engines and screen readers** in a way an image tag is not. The term name is still real text, which is what carries the meaning here.- **The pattern repeats on a fixed cycle.** If your term count does not divide neatly into it, the last row will look unbalanced.- **Which term lands in the big tile depends on order**, not on importance. Use the ordering settings to put the right one first.- **For a pattern of your own, use the **[custom metro layout](https://nexterwp.com/docs/show-category-listing-in-custom-metro-layout-in-wordpress/), which lets you write the tile sizes out. ## Troubleshooting ### The tiles are empty Those terms have no image. Metro shows the image as a background, so a term without one is a coloured box with a label. ### The wrong category is in the large tile Tile sizes follow position, not importance. Reorder the terms so the one you want lands first. ### The layout breaks on mobile Set a separate pattern and column count for the mobile breakpoint. A desktop pattern rarely survives two columns. ### The last row looks wrong Your term count does not fill the pattern cycle. Adjust the item count, or use a custom pattern. ## Related Docs - [Show category listing in a custom metro layout](https://nexterwp.com/docs/show-category-listing-in-custom-metro-layout-in-wordpress/)- [Create a category grid](https://nexterwp.com/docs/create-category-grid-in-wordpress/)- [Create a category masonry layout](https://nexterwp.com/docs/create-category-masonry-layout-in-wordpress/)- [Add taxonomy listing in WordPress](https://nexterwp.com/docs/add-taxonomy-listing-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before creating a category metro layout in WordPress?** A: The key requirement is having some post categories already created, because the Taxonomy Listing block can only display taxonomies that exist. Nexter Blocks also needs to be installed and activated since the block is part of Nexter Blocks. That matters because the metro layout is just a display style, not a content source, so without categories there is nothing to render. **Q: Why isn’t my category metro layout showing anything?** A: The most common blocker is missing categories. The tutorial says you need to create some post categories first, then add the Taxonomy Listing block and select Categories from the Select Taxonomy dropdown. If the block is present but the layout still looks empty, the issue is usually that there are no categories available for it to display. **Q: How do I show post categories in a metro layout on a WordPress page?** A: The Taxonomy Listing block from Nexter Blocks enables this layout. Add the block to a page, choose an appropriate style from the Style section in the Layout tab, switch the Layout section to Metro, and then pick Categories in the Select Taxonomy dropdown. That combination turns standard category output into grid-style boxes. **Q: Can I use the same metro layout for tags instead of categories?** A: The same setup works for tags as well. The tutorial notes that you can show tags in a metro layout by selecting Tags instead of Categories in the Select Taxonomy dropdown. That makes the Taxonomy Listing block useful when you want one visual pattern for different taxonomy types. **Q: What’s the difference between choosing Metro and a regular taxonomy layout?** A: Metro is the grid-style option that presents taxonomy items in organized boxes with a more modern look. The tutorial frames it as a visual layout choice inside the Layout section, so it changes how categories are displayed rather than what content exists. If you want a cleaner card-like presentation, Metro is the option to pick. **Q: Where can I find more details about the Taxonomy Listing block?** A: Nexter Blocks provides both a feature overview and a live block demo for this feature. The tutorial links to [click here](https://nexterwp.com/docs/add-taxonomy-listing-in-wordpress/) for documentation and [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-taxonomy-listing/) for the live example. Those links are useful if you want to compare how the taxonomy listing behaves before building your own page.