Close

July 16, 2015

Build a Grid Layout For WordPress Using WP_Query

Here’s how to build a grid layout for WordPress via shortcodes and WP_Query:

A lot of WordPress developers immediately rush to query_posts in order to create custom loops.

But, query_posts is meant for altering the main loop of a WordPress page/post (actually, it’s not even recommended for that anymore).

Using get_posts() is okay… but, if you want that real WordPress flavor using WP_Query is the way to go.

In the video above, I show you how to use WP_Query to create a custom loop inside WordPress in order to build a Pinterest-style grid layout.

Here’s the code I used in the video:

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

2 Comments on “Build a Grid Layout For WordPress Using WP_Query

Chelsey
January 11, 2018 at 5:13 am

Great tutorial! I am hoping to do something similar myself, but I am very new to this. I am trying to create a grid just like this except order the posts in a very specific order. Do you think it would be possible to use the orderby attribute to specify the order with post IDs? So if I had Blog Post 1, 2, and 3. I could order them as 2, 1, 3 by specifying orderby=”postid2,postid1,postid3″?? Or am I clutching at straws?

Any help is appreciated!

Reply
John Morris
January 11, 2018 at 11:21 am

I don’t think that will work. You can do ‘orderby’ => ‘ID’, but that will just order them by their ID number in ascending or descending order. I don’t see an option the documentation (https://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters) for a kind of “manual” ordering. I think you’d have to explicitly get each post from WP_Query to do this. Or, query for them individually.

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.