Grids are vital UI elements in medium to large scale websites. Think of websites with scores if not hundreds of products or properties or simply posts. Grids go well beyond tabular layouts or even accordion lists. Grids are able to show off all items in varying sorted order and subject to category and/or filters. The following is a masonry grid of posts:
This grid is showing all of the 24 most recent posts at my PixofToronto.com website. But with the artist fiter selected vistors can see all of the most recent posts devoted to Toronto artists. Ditto for the sporting filter. Now the premium Essential Grid plugin from Theme Punch is used here and it is more than equal to the task.
However, in trying to use the Essential Grid plugin on some client websites, I ran into some resistance. First, some users found the mechanics of setting up the grids, switching images and getting the skins to work the way they wanted – all were judged to be perplexing if not error prone. Some clients with multiple websites found $26US/website cost intimidating – especially small business shops. The bottom line, I had to find a free grid plugin that could match the value of such free plugin stalwarts as Elementor PageBuilder , Foo Gallery and Smart Slider 3.
Search For A Great Free Grid
Our search started with the usual suspects the WordPress Plugin Directory, some of our favorite WordPress advisory sites like WPBeginner, ColorLib, and BestDevList. And there was a perfect page forr testing, theOpenSourcery’s own InfoBlog page which has been limping along with the old single column of posts with feature image and excerpt.
The bar was set high. The grid tool must be responsive, support a grid or masony layout of post stories using feature image and excerpt plus a link to the story. In addition, the choice of using metadata like author, publish date, category and tags used. Finally the grid should offer pagination options given that there are 2 dozen categories and hundreds of posts. So yes, filters as shown in the Essential Grid example at the top of the page would be highly valued.
So here are the major Grid contenders as tested on theOpensourcery.com with the winning choice to be seen working live on our InfoBlog page. All of these are free plugins but many have pro extensions which we did not examine. In alphabetical order here our contenders.
Content Views
Content Views meets our grid test needs with responsive design, grid layout, display of thumbnail feature image plus excerpt in user choice of 2 to 5 rows. In addition, the thumbnail size can be customised by the user. Here is a screenshot of the settings interface:
As the screenshot shows there are a number of options for controlling which Post [or page, but not both] will be shown in the grid allowing for Includes and excludes by Id, a total count limit of excerpts to be shown, and then Filters by a number of options including Category, Tag, [not visble in the screenshot] Author, Status, and Keyword. Finally, sorting order by Title, Modified Date, ID, or Published data is available.
The second settings are for the Display Layout as seen in the following screenshot:
As you can see we chose the Grid layout but the Collapsible list works well too. The Pro version of the plugin offers Timeline, Masonry, Pinterest and other choices. Note the allowance for direct control of the responsive layout. as well users can control Thumbnail size and postion, Content position and length, and a variety of Pagination. It is remakably complete as seen below:
But Contebt Views does not provide flip card effect nor the ability of users to choose on-screen what category and tag filters to apply to their grid display as Essential Grid provides. However, Content Views passed the critical large size test where we requested 100 Posts to be displayed in groups of 32. In contrast a number of Grids failed this performnce test. So Content Views is very promising as a free Grid.
Final Tiles Grid
The screenshot below tells the story of a robust image grid tool:
It does not have a free post grid option. So despite warm reviews for its image grid features, we move on.
Grid Plus
As the settings screenshot shows, Grid Plus has a deluxe set of options for Grid Posts:
But before going through all the promising setup options, there is some very bad news:
Not only did Grid Plus fail to deliver working links but titles and sorting and it was painfully slow when we tried working with 50 posts not the hundreds we wanted to work with. And let me assure you we tried all sorts of different setting combinations with no positive results. So we move on.
Post Grid – The Chosen Grid
It is fitting that the last Grid chosen for testing turns out to be the one chosen for use on the Open Sourcery[see our Home and InfoBlog pages]. There are a number of features that recommend Post Grid. First, it is fast performaing being able to handling the OpenSourceries hundreds of posts with gratifying quickness. Second , the Query to choose the posts to display is quite general – so Post, Page, Media, and Custom Posts either singly or in filtered combinations are available. If users categorize and tag their media, then Post Grid can do very helpful gallery display duty.
In addition GridPost has very helpful layout options, pagination capabilities and navigationn options as the following screenshot shows:
There are 6 settings tabs for Grid Post. The first is one othe most important – the Query Post tab.
Query Posts allows users to specify what WordPress objects are going to be collected in the grid for display and what categories and tags are to be used to filter which posts or products or media are to be displayed. Here is a screen shot of the Query Post settings tab:
Unfortunately, the sticky wicket is how to chose items in the Query Post. For example, to choose the Post and Page objects in the first list, users have to hold down the CTRL and then left mouse click on Post and then Page. Second the list of categories and tags will not appear until you click on both the Post and then Page objects [this is a bug]. Note the rich Term relations settings– full SQL-like comparison terms.
Now the above screenshot is the first half of the Query Post settings. There is a second half shown in the screenshot below:
The most important settings are the status of the posts to be displayed. Again , CTRL+mouse click will choose several Post status settings. Number of posts per page is important if you have hundreds of posts as is the case in TheOpenSourcery.com. The last two setting are like the Order By clause in SQL but for some reason they are presented in the wrong order. You should first choose what fields to sort by, then decide whether to use ascending or descending order.
Layout tab lets users choose the layout or formatting of each grid item. Here is the screenshot:
Actually Grid layout option is really set at the Layout Settings tab. But the Content Layout setting gives the user 6 basic layout to choose from and each one of those can be edited. So click on the Edit button and users will be taken to the drag and drop Layouut Editor where options like Thumbnail, Title with Link Excerpt, Post Date, Share Buttons and 8 other options can can be added to the basic grid settings. Given that grids for photos, posts and products can be quite different – this is a winning capability for Post Grid.
The next option is Skins and this allows users to get some predesigned special effects for the grid objects when users hover the mouse over them. Again, this setting caters to the different needs of product listings versus posts. Users can customize these effects but it requires knowledge of CSS3 animations.
The Layout Settings tab is really the second part of the Layout tab as shown in this screen shot:
The first option is Masonry vs standard Grid layout. This is an important decision. Masonry will squeeze the grid of items in the tightest space while the Grid layout will provide even-line rows at the expense of a longer Grid layout. See our results examples below for the comparison.
Even with hundreds of posts being loaded into the grid with 32 items displayed er page, there is 1-2 seconds waiting time. So you may want to dispense with the Lazy Load animation. But pay attention to the Grid Items width – in effect users get to set the responsive settings for the Post Grid display. Thus I have used 300px for 1024 or larger desktop devices [3-4 items per row], 240px width for tablets [3 items per row] and 90% for mobile mens effectively 1 item per roww for mobile devices.
The second group of Layout Settings allows more fine control of the Grid
As seen in the screenshot , there are 4 added Layout options to set. Again, becareful with the media height setting. It turns out I have some very tall feature images so I have had to revert to a max height to keep the griditems in line. Also be careful with the featured image size unless you want wide grid items – 2 on a page for example.
However, the media source option can be very useful. Because TheOpensourcery.com posts go back to 2008 and number in the hundreds, it really helps that there is an option to pick up the first image from the content and there is a fallback thumbnail. Finally, being able to set the gutter-size and background color is just good styling practice.
The Navigation tab foreshadows a number of Pro features like Carousel vs Grid layout, much more robust filtering, and more pagination options. But the basics provided in the free edition more than meet our needs. So the final criteria was how the Output looks in Masonry versus Grid layout.
Output Results
The following composite shows Masonry vs Grid choice:
For the Opensourcery.com we chose the evenline of the Grid layout as it is easier to scan when looking for a particular post. However, for products the masonry layout is attractive for some clients because the product image without excerpt dominates the grid.
Summary
It is very useful having a robust portfolio grid layout like Post Grid. The plugin offers a robust set of options for posts, custom post types, products and media. One can step up to the pro version for added features. The most satisfying feature is the very good performance even when querying and sorting hundreds of posts.