• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

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 »

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.


Post Tags

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

Leave Yours +

6 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. Others may want to know that Gridster is NOT responsive. I also found it to be very difficult to use.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors