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:

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: [download id=”5″]

(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
[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]
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 value1).
  • rows(int) (optional) Number of rows2. 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 posts2. 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

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

2 – 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.

[rvw_loop width=”200px” rows=2 columns=3 num_posts=10 pagination=”yes”]

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

[rvw_loop width=”200px” rows=4 columns=3 num_posts=10 pagination=”yes”]

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

Example 1

Display all recent posts

[rvw_loop]
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.

[rvw_loop categories=”3,4″ class=”my_loop” rows=3 columns=3 content_excerpt=”excerpt” num_words=50]

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.

28 comments

  1. Jeff

    Hello, Great idea. I can use this in many of my sites. But I’m having trouble with the categories. The only ones that show up are the “uncategorized”.

    Any thoughts?

    What am I missing?

    -JJS

  2. Jeremy

    Hi. I came across your site. Thank you for creating this. I’m having major issues getting my posts to show up in columns. Basically here is my shortcode

    [rvw_loop categories=”3″ class=”loop” width=”25%” columns=”4″ num_posts=3 pagination=”yes” content_excerpt=”excerpt”]

    I wanted to list all of the posts from 1 category in a 4 column section. Please help.

    Thank you

    Jeremy

  3. Lee

    I would like to space my columns and rows out using margins. How do I call on particular columns or rows?

  4. Stanley

    Hi Ronald, very cool plugin, am using it for one of my sites now, but am having some challages in dat i have 18 posts in a category i want to feauture of my home page…and its showing me only 15, with some space on the last colunm, here is my code

    What do u think i’ve done wrong.

    Thanks in advance

  5. Shubham Pandey

    hi this pulgin is really great sir…i try this plugin its great…sir i have some other problem will you please tell me….my comment box width are increased….so how can i decrease its width?

  6. John

    Hello Ronald.

    Your plug-in is awesome, but my knowledge is very low in programming and it is not working for me (something, I am doing wrong). it will be nice if you make a tutorial in youtube showing us how you do it. πŸ˜‰

    Respectfully,
    John

  7. Regina Scharf

    Thanks, thanks! I have been looking for something like this for ages. I am still struggling with the code (CSS newbie) but at least there is hope.

  8. tom

    hi, thanks for this plugin!

    I found that I had to actually edit the php file in order to set the column width and number, the width shortcode did not do it for me.

    Also, I only wanted to show the featured image, so I removed all the display code for the Title, etc.

    I would like to show the custom Title and alt tags for the featured image. Any tips on doing that?

    1. Ronald

      Hi,

      check the documentation for the get_the_post_thumbnail function used, it allows you to add title and alt tags.

      And I know it’s not a 100% flexible plugin, but when you understand the code, it’s easy to adapt it to your specific needs. I have not had any (reports of) problems with the colums/rows though, yet it may be a compatibility issue with your specific theme or css.

    2. Toby

      Hi, could you explain how your removed the Title, category, etc.?

      1. Ronald

        Hi,

        using css you can hide these, e,g, based on the above css, add

        .loop .categories,
        .loop .categories a {
        display: none;
        }

        to hide the categories

  9. Donna

    Loving this plugin. One issue I’m having though is that an image within the content is being returned as a 404 because the dot before jpg is being stripped out. I’m assuming that’s happening within the content function of rvwloop.php but I can’t figure out why. So for example, if a post contains this (replace ~ with angle brackets):

    ~a href=”http://blah.com/pic.jpg”~ ~img src=”http://blah.com/pic.jpg” alt=”” title=”blah” width=”148″ height=”100″ class=”alignleft size-medium wp-image-422″ /~~/a~ Blah blah blah

    it ends up looking like this:

    ~a href=”http://blah.com/picjpg”~ ~img src=”http://blah.com/picjpg” alt=”” title=”blah” width=”148″ height=”100″ class=”alignleft size-medium wp-image-422″ /~~/a~ Blah blah blah

    Where pic.jpg becomes picjpg. Any thoughts on why? (I’m testing this on a local wamp box, so can’t send a url to view)

    1. Donna

      I did find the problem. It was the preg_replace line in the content function. Removing it solves the problem, though I’m not sure what else it might break. (Nothing I’ve seen so far)

      1. Ronald

        Thanks for the feedback Donna, I will look into it, and let you know, and perhaps update the plugin. I haven’t really looked at it for quite a while,

  10. Rosita Perey

    Hi Ronald!
    This could be my solution, I loved it when I saw it, but doesn’t work for me πŸ™ . I put these code in one page : [rvw_loop categories=”24″ width=”calculated” rows=3 columns=2 num_posts=6 pagination=”no” offset=1 content_excerpt=”excerpt” num_words=3]

    and this: at the index.php

    In both situation, only show me one column at the 100% width.
    ΒΏwhat i’m doing wrong?

    The working page url: http://www.brandcapital.net/ni/clinic-location/donec-tempor-libero/
    The index page url: http://www.brandcapital.net/ni/

    Thanks!!

    1. Ronald

      Hi,

      I think my documentation needs updating. Width value should not be “calculated”. What I was trying to say was that when no width is entered, it will be calculated, so you may want to leave it blank, or add a value.

  11. Toby

    Absolutely loving this plugin, Thanks! One question – this is probably expecting a little too much but I thought I’d ask πŸ™‚ Is there any way to make it so that when someone clicks through to a later page it doesnt load the new page from the top? In other words, at the moment, If I click on “next page” it takes me to the next page no problem, but it loads the page from the top. Its a little annoying because my loops is towards the bottom of the page so it means the user has to always scroll down. Any way to avoid this happening?

    1. Ronald

      Hi, I can see what you mean, need to find some time to look into it,

      Ronald

  12. Shuvo

    Really great post. Thanks for your helpful tutorial.

  13. James

    Hi my friend, can you help me. I put the code in a page but the post doesn’t order in columns.

    [rvw_loop categories=”5″ width=”280px” rows=3 columns=3 num_posts=99 pagination=”yes” offset=0 content_excerpt=”excerpt” num_words=50]

    What I want is show the post of a certain category ordered in three clumns. Like this:

    category: anuncios

    post1 post2 post3
    post4 post5 post6

  14. doom

    Works perfectly πŸ™‚ . The only thing I have left to do is implement it to my categories to show in 4 columns and 6 rows without using code from jarida theme.
    Any ideas?
    Thank you so much πŸ™‚

Leave a Reply