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:
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.
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.
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.
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.
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.
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.
This plugin is great for creating product walls as well as standard grid layouts for your WordPress site.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.