Adding responsive grids to your WordPress site is a great way to display content and manage your page layout. While there are many excellent themes that feature grid based layouts, you can still take advantage of responsive post grids even if your theme doesn’t have them built in.
Although there are plenty of WordPress plugins specifically 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.
Using Grids in WordPress
A grid layout is a great way to display images like photographs or a design portfolio.They’re not just for pictures, though – grid layouts can also be used to display posts on your homepage and other parts of your site in an interesting and attractive way.
Grid layouts are also a great way to allow mobile users to navigate your site. They’re easy to click on, and there’s no worry about tiny buttons. Given the increasing popularity of mobile traffic, it’s important to make sure mobile users also have a great experience when they’re on your site.
You can see some examples of grid-based layouts below. All these screenshots show themes that use a grid layout for displaying posts and pages in a very visual and attractive way:
These free and premium plugins make it very easy to add a grid layout to display your posts or pages.
uSquare – Universal responsive grid for WordPress
With over 5,200 sales at the Code Canyon marketplace, uSquare is one of the most popular paid responsive grid plugins. It provides a detailed and full-featured output while still being 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. Rest assured – this doesn’t affect the actual attributes of the post or page.
The order of items can be managed using the easy drag-and-drop interface. There are also plenty of styling options to choose from. giving you tons of control over how your grid and its items will look.
The best feature of this plugin is the options provided 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 was designed to make it very easy to build grid layouts to display image galleries, posts, icons, staff profiles, products and anything else you can think of.
Download uSquare »
Content Views
With over 40,000 active installs, Content Views is one of the most popular free post grid plugins on the plugin repository. It lets you display your posts in a grid format anywhere on your site. You can easily add them to a post, page, widget, or theme file with a shortcode.
Content Views also lets you pick which posts to show – you can display a manually chosen selection of posts, all your latest posts, posts by a specific author, or an entire category. This gives you tons of flexibility for what you display.
Other features include:
- Ajax and non-ajax display options
- enable/disable pagination
- Social share buttons
- And more!
All this without needing to know any code!
Download Content Views»
Essential Grid
With over 17,000 purchases at Code Canyon, Essential Grid is super popular. For good reason, too.
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.
It’s totally responsive, compatible with MultiSite and Multi-Lingual, and gives you a visual editor to easily build skins.
Download Essential Grid »
Post Grid
Post Grid is another popular free option with over 8,000 active installs. It lets you use shortcodes to display posts in an aesthetic grid layout. You can query any post type to add to your layout.
You can also choose to display or hide meta information like author, publish date, and more. The grid size is also fully responsive and customizable to best fit your website.
Social share buttons and pagination round out an impressive feature set for the free version of this plugin.
Download Post Grid »
Uber Grid
UberGrid is a powerful responsive grid / gallery builder for WordPress that can build nice looking walls of square items. It’s got 3,800 sales at CodeCanyon, which makes it well-used, but not quite as popular as the previous plugins.
You can define your grids manually or pull them in 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 easy customization options allow you to adapt it to almost any need.
Download Uber Grid »
Justified Image Grid
This fully responsive WordPress gallery plugin aligns your thumbnails into a justified grid using jQuery, similar to Flickr and Google image search. It ensures your galleries stand out in an eye-catching and unique new way!
Like the name suggests, it justifies your grid into a balanced horizontal photo grid that catches your users’ eyes. Your images will always retain their original aspect ratio, so nothing gets distorted.
If you’re into editing, you can add different effects to your images to showcase them in a unique way.
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 with 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. Grid Layout Shock includes options to edit:
- The title font and size
- The content font and size
- The size of each box
- Whether to use a ‘read more’ button
- 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 user’s 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.
Download Grid Layout Shock »
Gridster
This is a free grid layout plugin for WordPress. Though it hasn’t been updated in a while, it’s very easy to use and allows you to drag and drop items from a list of your posts and pages.
Once you’ve created a grid, you can embed it into your pages by pasting a shortcode, or by using the Gridster icon that Gridster adds to your editor. 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 feature that gives you more control over how your grids and 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 I’ve covered, it could be a good choice for those looking for a no-cost basic solution.
Download Gridster »
Using the plugins listed above makes it easy to add an impressive grid layout to your site. While the premium options are the most feature-rich, the free options are also worth investigating, as they should be able to help you achieve your grid layout goals, though without as many extra features and options.
Have you used any of the grid layout plugins above? Which was your favorite? Chime in!
Hey! I recognize this post. That’s correct. This original Post (from 2013) from Joe Fylan was edited by Colin Newcomer with updated information, new plugins and expansions on some of the points that were made before.
- Google+
- Website
How To: Display Your WordPress Posts & Pages in a Grid Layout
No comments:
Post a Comment