How to Show Blog Posts in Custom Metro Layout in WordPress?

Key Takeaways

  • Nexter Blocks includes a Post Listing block that allows users to create a custom metro layout for blog posts.
  • Users can specify item dimensions in a Width:Height ratio using the Custom Layout field in the Post Listing block.
  • Selecting Metro from the Layout section enables users to customize the column number through the Columns Manager tab.
Table of Contents

Do you want to show your blog posts in a custom metro layout to show them in a unique style? With the Post Listing block from the Nexter Blocks, you can easily create a custom metro layout for your blog posts.

To check the complete feature overview documentation of the Nexter Blocks Post Listing block, click here.

Requirement  – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.

To do this, add the Post Listing block on the page, after selecting the appropriate options from the Post Listing Types and Select Post Type dropdowns and other related options, select Metro from the Layout section.

post listing metro layout custom new

Then go to the Columns Manager tab, and from the Metro Column dropdown, select your desired column number.

After that, select Custom from the Select Style section, then you’ll see a Custom Layout field where you have to add the layout structure value.

You have to enter the value in a Width:Height ratio to set the width and height of an item then you can use separator (|) to target multiple items. It will automatically create a loop based on your entered value.

For example, if you enter a value like this 1:2 | 2:1 | 2:2, here it specifies the width and height of three items separately, then the value will automatically loop (3 items each) for the remaining items.

Note: You have to do some trial and error to get your desired layout.

Also, check How to Limit the Post Excerpt in WordPress.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if my custom metro layout isn't displaying correctly?

If your custom metro layout isn't displaying as expected, double-check the values entered in the Custom Layout field. Ensure that the Width:Height ratio is correctly formatted and that you are using the separator (|) appropriately. Trial and error may be necessary to achieve the desired layout, as the values dictate how items are arranged.

What is the best way to determine the right Width:Height ratio for my layout?

The best approach to determine the right Width:Height ratio is to experiment with different values in the Custom Layout field. Start with ratios like 1:2 or 2:1 and adjust based on how you want your items to appear. Remember, the layout will loop based on your input, so consider how many items you want to display in each row.

Does using the Nexter Blocks Post Listing block impact page load speed?

Nexter Blocks is designed to be lightweight, using pure Vanilla JS and loading only 1 CSS and 1 JS file per page. This means that using the Post Listing block for your custom metro layout should not significantly impact your page load speed, making it a good choice for performance-conscious users.

What happens if I enter an incorrect format in the Custom Layout field?

Entering an incorrect format in the Custom Layout field may result in unexpected layouts or no layout being displayed at all. It's crucial to adhere to the Width:Height ratio format and use the separator (|) correctly to ensure the layout functions as intended. Always preview your changes to catch any formatting issues.

Is there a way to limit the number of posts displayed in the metro layout?

While the page does not specify a direct method to limit the number of posts in the metro layout, you can manage this through the settings in the Post Listing block. Adjusting the Post Listing Types and Select Post Type options can help you control which posts are shown, indirectly limiting the display based on your selections.

Last reviewed: April 14, 2026

Related Docs