How to arrange your WordPress posts in columns and rows

Every now and then, I get asked to do some customisations, and the one that regularly pops up is “I want to display posts in columns, {insert any number here} next to each other, just like in such-and-such (magazine) theme”. I created a piece of code that I am comfortable with, is easy to customise and adjust.

When another interesting request made it to my mailbox recently (“on my index page, I want to display 3 full width posts with the full content, followed by excerpts side by side”), I thought it was time to do a bit of polishing, and come up with a simple yet reusable solution.

I thought it might be worth sharing, so I decided to make it into a plugin, for the simple reason that it allows me to easily implement this solution on any site I am working on, without having to modify the theme template files (like functions.php, index.php or style.css).

So here it is, for you to enjoy and use as well. Note/disclaimer, it is by no means a “Formal Official WordPress Plugin” and I doubt it will make it to the WordPress plugin directory, but using a plugin is just easier “packing, shipping and handling”. Upon installation and activation, the plugin will not modify any theme files, database files whatsoever. If you don’t like it, or if it doesn’t work for you, simply delete the plugin folder, no harm done.

In this article:

• What does it do
• How do I get this
• How does it work
• Limitations, Known Issues
• Hosted on Github

So what does it do?

You can use a shortcode to insert a list of posts (or a specific post) in a page or a widget or even inside a theme template file.

Possible use:

• display only posts from a certain category, or categories on a page or in a widget
• display the featured post image together with a post
• display your posts in columns, you decide the width
• display a single post (the latest from one category in your sidebar (in a widget)
• display the first 3 posts full width, followed by the remaining posts in columns
• display a list of posts grouped by category
• display the excerpt or the content, and select the number of words you want to display

Nice, now where can I get it?

Download link: rvw Loop (426)

(The plugin is also hosted on GitHub).

How does it work?

All you need to do is use a shortcode in your WordPress post, page or (text)widget. The details of the shortcode are outlined in the Shortcode paragraph. You can also use the shortcode inside a theme template file, e.g. single.php or index.php.

Usage

Installation

Download and install like any other plugin. Activate the plugin from your WordPress dashboard, and you’re good to go. No need to look for any plugin options or configuration settings, because there aren’t any.

Add a loop to a widget, post or page

Add a loop in a theme template file

<?php echo do_shortcode('[rvw_loop categories="3,4,5" class="loop1" width="280px" rows=3 columns=1 num_posts=99 pagination="yes" offset=0 content_excerpt="excerpt" num_words=50]'); ?>

Description

The rvw_loop shortcode allows you to specify how many posts you wish to show, how many columns, limit by number of rows or number of posts (whichever comes first), you can select to show the_content or the_excerpt, the posts’ featured image will be resized and inserted, and some more …

Parameters

• categories (string) (optional) The categories to include, separated by a commaDefault: blank (include all)
• class (string) (optional) The class to assign to the loopDefault: loop
• width (string) (optional) The width of the columns. This value will be applied to each column. Can be any value in em, px or %, e.g. “300px” or 50%”Default: calculated (if no width entered, it will be a percentage based on Number of Columns value¹).
• rows(int) (optional) Number of rows². The number of rows of posts to display. Leave blank for allDefault: 99
• columns(int) (optional) Number of columns. The number of columns to display next to each other.Default: 1
• num_posts(int) (optional) Number of posts². The number of posts to display in totalDefault: value from the WordPress settings
• pagination(string) (optional) Add pagination. If set to “No”, and the number of posts available exceeds the value of number of rows * number of columns, the loop will end. If set to “Yes”, pagination will be enabled.Yes, No, Default: No
• offset(int) (optional) The number of post to displace or pass over. A value of 3 will start the loop at the fourth available post.Default: 0
• content_excerpt(string) (optional) Display the content or the excerptcontent, excerpt, Default: excerpt
• num_words(int) (optional) Number of words to display for the content or excerpt.number, Default: none

¹ – Width is calculated as as percentage, 100/Number of columns, e.g. 4 columns, width will be 100/4 – 25% for each column

² – Note, the number of posts displayed depends either on the Number of Rows value, or the Number of Posts value. Whichever comes first, will be used. e.g.

The loop will end after 6 posts (rows * columns, which is the lowest value)

The loop will end after 10 posts (num_posts is the lowest value)

Example 1

Display all recent posts

Example 2

Display the first 50 words from the excerpt from the most recent posts from category 3 and 4, in 3 rows and 3 columns. Use my_loop as the class for all the elements.

Other notes

When you define a new loop, make sure that you set the image size for the post featured image (aka post thumbnail). You need to add that in the rvw_loop.php file.

	add_image_size('loop', 120, 120, true);
	add_image_size('loop1', 150, 150, true);
	add_image_size('loop2', 250, 250, true);

Use the css classes to change the look of any of the content displayed. You can do this for each loop, depending on the “Class”. This needs to be added to the stylesheet, by duplicating the block of code provided.

/*******************************************************************************
        Default loop, adjust this code to your likings
		or duplicate this entire block for each loop.
********************************************************************************/

.loop a {
}

.loop a:hover {
}

.loop .attachment-loop {
 }

.loop .title,
.loop .title a {
}

.loop .date  {
}

.loop .date .label {
}

.loop .categories,
.loop .categories a {
}

.loop .categories .label {
}

.loop .tags,
.loop .tags a {
}

.loop .tags .label {
}

.loop .author,
.loop .author a {
}

.loop .author .label {
}

.loop .content {
}

Limitations, Known Issues

Like I said, this is not a fancy foolproof and fullproof plugin as you can expect from the WordPress plugin directory. There are no dashboard options, there’s no drag and drop, no ajax eye-candy, and yes, you will have to make your hands dirty if you wish to rearrange stuff, change the styling etc. Nice words of appreciation are welcome in the comments section of this blog, issues can be posted on the project page on GitHub.

• You can only make a selection based on category ID. Hack the code to your likings to allow all other query_post selections, but this is the basics provided.
• You can control all the output using css classes provided, and hide or display anything you want on a “per loop instance” basis. In the plugin code, you can also change the order of elements, add heading tags etc, but those changes will affect all instances of the loop on your site. Duplicate and rename the entire plugin, or feel free to enhance the code to accommodate more flexibility.
• Pagination most likely won’t work as expected on a page where there is more than one loop.
• Parent theme’s styling applies to the elements in the loop, this can be both good or bad. I decided not to create custom classes for each item.

Hosted on GitHub

This plugin is also hosted on GitHub. You can clone the repostitory, or create your own version (fork) and improve, enhance, or you can add an issue, seek support, stay tuned for updates etc. But really, most of all, I find it really cool (yet scaringly nerdy) to say “I’m hosting a repository on GitHub” (It’s my first time as well).

Visit the project page.

Finally

If you do find this useful, saves you time, and you end up using it in one or more of your projects, share this, and perhaps consider a small token of appreciation, there’s a PayPal button in the sidebar.