Responsive grids on a WordPress site are a great way to display content as well as manage page layouts. While there are many excellent themes that feature grid based layouts, if your theme doesn’t have these capabilities you can still make use of this popular and functional design feature.

Although there are plenty of WordPress plugins for creating image galleries using grids and other layouts, this article will be looking at ways to add grid layouts to your page for displaying posts and other content on your website.

Use of Grids in WordPress

A grid layout is a brilliant way to display images such as photographs and items from your portfolio. However, they can also be used for displaying your posts on a homepage and other parts of your site in an interesting and attractive way.

These screenshots show themes that use grid layout for displaying posts and pages in a very visual and attractive way:

Grid Theme Example

Grid Theme Example

Grid Theme Example

Post Grid Layout Plugins

These free and premium plugins make the task of adding a grid layout menu to display your post very easy.

uSquare – Universal responsive grid for WordPress

This is a great value premium plugin that has racked up over 2,000 purchases at the Code Canyon marketplace. When you consider the output that this plugin creates, it is surprisingly easy to setup and use.

grids-uSquare

You can create unlimited uSquares, or grids, and then add as many items to them as you wish. Individual posts can be added to a grid, or all the posts from certain categories. Once you’ve added an item, you can edit the details of that item such as its name, description, colour and many more options. This doesn’t affect the actual attributes of the post or page which is good to know.

grids-uSquare-admin

The order of items can be managed using the drag and drop interface for easy reordering. There are also plenty of styling options to choose from giving you maximum amount of control over how your grid and its items will look.

The best feature of this plugin is the options for when users click on links within the grid. You can opt to take the user to a specific post or page, display an image in a number of ways or best of all, display a layer with additional information about that item on the same page.

grids-uSquare-pop-up

This plugin has been design to make it very easy to build grid layouts for displaying image galleries, posts, icons, staff profiles, products and anything else you can think of.

Download uSquare »

Ultimate Ajax Grid for WordPress

Not only can this premium plugin display your posts in a grid layout on any of your WordPress pages, it also works really well with WooCommerce powered eCommerce stores built on the WordPress platform.

Ultimate Ajax Plugin

When it comes to choosing which items to display in your grids, it couldn’t be easier. The Ajax Grid plugin allows you to select categories and tags from which to source the items for the grid. Grid items can be set to take users directly to the post or image, or they can be set to open up in a lightbox window with more information about the item.

grids-ultimate-ajax-options

This plugin is great for creating product walls as well as standard grid layouts for your WordPress site.

Download Ultimate Ajax Grid »

Essential Grid

Essential Grid is a premium plugin for WordPress that allows you to display various content formats in a highly customizable grid. Possible applications range from portfolios, blogs, galleries, WooCommerce shops, price tables, services, product sliders, testimonials and anything else you can imagine.

1

Download Essential Grid »

Uber Grid

UberGrid is a powerful responsive grid / gallery builder for WordPress that can build nice looking walls of square items defined manually or pulled automatically using your WordPress posts including WooCommerce products and custom post types created by third party plugins or themes. You can use UberGrid to present your portfolio, team, products, photos, blog posts, or anything else that can be presented with square cells. Its unique customisability will adopt to almost any needs.

2

Download Uber Grid »

Metro

METRO – WordPress Grid Portfolio, a WordPress Plugin that shows your portfolio in an interactive way. You can display a single gallery, all galleries within a category and all galleries from multiple categories. Additionally, the plugin supports: Custom image size (percent), Custom link, Video, SoundCloud, Metro UI item, Unlimited colors and much more.

3

Download Metro Grid »

Justified Image Grid

This responsive WordPress gallery plugin aligns your thumbnails into a justified grid using jQuery, like Flickr and Google image search. Make your galleries stand out in an eye-catching and unique new way! Replace the standard WP galleries as [justified_image_grid] with lots of new features and options.

4

Download Justified Image Grid »

Grid Layout Shock

The free version of this WordPress layout tool contains more than enough features to get you up and running and adding responsive grid layouts to your site.

Grid Layout Shock Review

When it comes to building your grids there are a multitude of options to choose from giving you a great amount of control over how your finished product will look. These builder options include:

  • The title font and size
  • The content font and size
  • The size of each box
  • Whether to use a ‘read more’ button and if so which colour
  • Set the ‘read more’ button text
  • Select source for the data such as categories, taxonomies, post type, RSS feeds, etc.
  • What to show: title, image, excerpt etc.
  • Number of items to display and how to sort them

To get access to the fully responsive, mobile ready functionality you will need to upgrade to one of the premium options. However, the free version does allow you to set a size of your choice for the grid, although this doesn’t respond to the users screen size. As well as standard grids, you can also create carousels with this plugin.

Grid Layout Shock

There are a number of themes available with the Grid Layout Shock plugin although most of them are reserved for premium users. While the free version is certainly stripped down, it does provide enough functionality to make this a good option for those who don’t want to upgrade.

grids-layout-shock-masonry

Download Grid Layout Shock »

Gridster

This is a free grid layout plugin for WordPress. It’s very easy to use and allows you to drag and drop items from your list of posts and pages on to your grid layouts for insertion into your site.

Gridster Plugin

Once you’ve created a grid you can embed it into your pages by pasting a shortcode, or by using the Gridster icon that is added to the post editor menu. The plugin has a default settings page where you can set the margins and base width and height. However, when building a grid you can set the layout options individually or just stick to the default settings.

Once you’ve added an item to your grid, you can then edit the information displayed such as the title and the excerpt which is a nice features that gives you more control over how your grids and their content look. The size of the items can also be altered using a simple drag and drop interface which is great for giving your grids a more creative appearance.

grids-layout-gridster-02

While this is undoubtedly a basic grid layout plugin, especially when compared to the premium offerings covered, it could be a good choice for those looking for a no-cost basic solution.

Download Gridster »

Conclusion

Adding an impressive grid layout in order to display posts and pages on your WordPress site is a pretty each task when using the premium plugins listed here. The free options are also worth investigating as they should be able to help you achieve your grid layout goals, although without as many extra features and options.

Hopefully now, even if your theme doesn’t come with the ability to add grid layouts to your site, you can now see how you could go about incorporating them into your design.


Author:

Joe has been using WordPress for many years, for a number of different purposes. From personal blogs, to full-blown retail websites, and has even designed his own theme from scratch. He now enjoys using his WordPress experience to report on the latest news, and provide reviews and information on the best and worst themes and plugins on offer. Google Profile

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Leave Yours +

7 Comments

  1. Thank´s! Your posts encourage me increasingly tinkering with wordpress!

  2. We are impressed by the standard of information on this amazing site. There are a lot of proper resources here. I am sure I’ll visit this place again shortly.

  3. Oh my! This is sweet. I think this is a very Tumblr look I would say?

    If I got to choose, I go for Ultimate Ajax :)

    Thanks for sharing!

  4. Thanks for this. I’m looking to build a “pininterest” page on my blog, this might work.

  5. B

    Thanks! That was helpful! It gave me insight into wordpress plugins!

  6. Thanks for the list of plugins. We use Essential Grid which works worth any post type but check the others out.

  • Comments are Closed

Our Sponsors