--- title: "How to Show Blog Posts in Custom Metro Layout in WordPress?" url: https://nexterwp.com/docs/show-blog-posts-in-custom-metro-layout-in-wordpress/ date: 2023-08-09 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "The metro presets cover the usual shapes, but they decide for you which tile is large and where it sits. A custom metro pattern lets you describe the arrangement yourself,..." image: https://nexterwp.com/wp-content/uploads/2024/05/show-blog-posts-in-custom-metro-layout-in-wordpress-1024x519.jpg word_count: 454 --- # How to Show Blog Posts in Custom Metro Layout in WordPress? ## Key Takeaways - Nexter Blocks Post Listing block creates a custom metro layout for blog posts by selecting Metro in the Layout section. - Columns Manager tab sets the Metro Column dropdown to the desired column number for the layout. - Custom Layout field accepts Width:Height ratios like 1:2 | 2:1 | 2:2 and loops the pattern for remaining items. The metro presets cover the usual shapes, but they decide for you which tile is large and where it sits. A custom metro pattern lets you describe the arrangement yourself, tile by tile. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/listing/wordpress-post-listing/) ## Before You Start - **Edition:** **Pro** — custom metro patterns needs Nexter Blocks Pro.- **Block to enable:** Post Listing, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Enough posts to see the effect.** A listing with three posts cannot show pagination, filtering or a second row.- A settled **post count**, because the pattern is built around it. ## Steps - Select your **Post Listing** block and set the layout to **metro**. ![The metro layout settings](https://nexterwp.com/wp-content/uploads/2026/09/pl-steps-metrocus-1.webp) - Change the metro style to the **custom** option. - Describe your pattern, giving each tile its width and height. - Set a simpler pattern for tablet and phone. - Publish and check that the post count fills the pattern. ## How It Behaves The custom pattern is carried in the same attribute as the preset styles. - **Measured on a published page:** a custom metro still rendered `data-layout="metro"` with `data-metroAttr` carrying the style and column values, exactly as a preset does.- **Each device keeps its own pattern**, measured as separate desktop, tablet and mobile values in that attribute.- **The pattern and the post count have to agree.** The block does not stretch tiles to fill a gap, so a pattern expecting seven posts with only five shown leaves holes.- **Featured images are CSS backgrounds**, the same as the preset metro layouts — see the [metro layout guide](https://nexterwp.com/docs/show-blog-posts-in-metro-layout-in-wordpress/).- **Measured with Nexter Blocks Pro deactivated:** this stops working. The block still renders a plain list of posts, so there is no error to see — just the feature quietly missing. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, metro falls back to ordinary grid items.- **It is fiddly by nature.** A custom pattern is a description of a layout, so it takes trial and error.- **Patterns rarely translate down a screen size.** What works on desktop usually has to be simplified for tablet and abandoned for phone.- **Changing the post count breaks the pattern**, so settle the count first.- **The same alt-text limitation applies** as with preset metro layouts. ## Troubleshooting ### There are holes in my layout The pattern expects more posts than the listing shows. Match the post count to the pattern. ### My pattern is ignored The metro style has to be set to the custom option rather than left on a preset. ### It is unreadable on mobile Set a much simpler pattern at the phone breakpoint, or drop to a single column there. ### Nothing renders as metro at all Check Nexter Blocks Pro is active. Measured with Pro off, the metro classes are absent. ## Related Docs - [Show blog posts in metro layout](https://nexterwp.com/docs/show-blog-posts-in-metro-layout-in-wordpress/)- [Show blog posts in grid layout](https://nexterwp.com/docs/show-blog-posts-in-grid-layout-in-wordpress/)- [Add post listing in WordPress](https://nexterwp.com/docs/add-post-listing-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: Why is my custom metro layout not showing up in WordPress?** A: The Metro layout only works when the Post Listing block from Nexter Blocks is installed and activated. That block is what lets you build the custom metro layout for blog posts, so if it is missing, the layout option will not be available. The page also says to choose Metro from the Layout section and then set a Metro Column value in Columns Manager, so both parts matter for the layout to render correctly. **Q: What do I need before I can build a metro blog post layout?** A: The key requirement is the Post Listing block from Nexter Blocks, and it has to be installed and activated. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Post Listing block used for this tutorial. Without that block active, you cannot set the Metro layout or use the Custom Layout field described on the page. **Q: How do I make different blog posts repeat in a metro grid pattern?** A: The Custom Layout field uses a Width:Height ratio pattern that loops automatically across items. The example on the page is `1:2 | 2:1 | 2:2`, which defines three item shapes and then repeats that 3-item sequence for the rest of the loop. That matters because metro layouts look random unless you control the ratio pattern deliberately. **Q: What does the Metro Column setting change in a custom post grid?** A: The Metro Column dropdown controls how many columns the metro layout uses. The page places this setting inside the Columns Manager tab, which means it affects how the custom width and height ratios are distributed across the grid. If your pattern looks off, this is one of the first settings to adjust because column count changes how dense or wide the layout feels. **Q: Is there another way to control how many posts show in a metro layout?** A: The page points to [How to Limit the Post Excerpt in WordPress](https://nexterwp.com/docs/limit-post-excerpt-in-wordpress/) as a related resource, which suggests excerpt length is handled separately from the metro structure itself. The metro setup controls item shape and looping pattern, while excerpt limits affect how much text appears inside each post card. Keeping those two concerns separate helps avoid cluttered layouts. **Q: What should I do if my custom ratio values do not create the layout I want?** A: Trial and error is part of this setup. The page explicitly says you have to do some trial and error to get your desired layout, because the Width:Height ratios and separator-based loop can produce different visual results depending on your chosen column count. A practical approach is to test a short pattern like `1:2 | 2:1 | 2:2` first, then refine it once you see how it repeats.