Remake the Blog Post Layout With a Fancy Tiled Look

Posted on by Alan Levine

The Trick, Said Quick

Use the WP-Tiles plugin to create a visual mosaic grid view for your site’s blog posts (or category within).

The Trick, In Intricate

This may be the best trick in the stack of tweets. What if you could re-deploy the blog post layout of your site into some kind of large mural/wall of images? Or just create a more visually appealing way to display posts in a category or by tag?

The WP Tiles plugin is your new friend. It creates a Tiled layout using featured images; it comes with a set of possible grids to use; but with the grid editor you can design your own.

The “Simple” WP Tiles Grid; the layout can be customized (or new ones made) by using the grid editor.

You can access the tile creator in the WordPress Editor (for Gutenberg, it’s there in the Classic block)

Accessing WP Tiles in Gutenberg (use Classic block)

And it provides a wide range of settings for selecting content and displaying it, as well as some preset settings (e.g. last 20 posts).

Shortcode Settings for WP Tiles

So the typical layout for the TRU Collector SPLOT is already got this kind of style; see http://splot.ca/collector.

But the WP Tiles plugin let’s you experiment more, and also create a layout where the display order is random, not newest first. See http://splot.ca/collector/mural/

So you can use WP-Tiles on an internal page, but if you prefer, you can use the WordPress Settings (under Reading) to make that the front page of your site. That is the set up used on the Networked Narratives Somni Porta site, where the front page is rotated to represent a new activity, and WP-Tiles is used at the bottom to show the current items submitted in a category.

For more, see Tiling SPLOTs the Easy Way; Maybe Soon Everything Else (CogDogBlog) and the WP-Tiles site.

The Trick, Done Slick

All of these seem to be SPLOT related, but that’s not the limit of what the plugin could do, just ones I have done or know of!

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?

Featured dog trick image by Tatyana Kazakova from Pixabay