Creating Grid Layouts with Essential Grid

If you purchase through a link on our site, we may earn a commission. Learn more.

Ever since Pinterest entered the scene, it seems every website is never complete unless it has a grid of something in it. It could be a grid of photos, posts, ads, social share buttons... frogs, anvils. Just put a grid on it! All kidding aside, grids are a really modern and intuitive way to present a lot of content to your users so they can get to various destinations of your site easily. Add something like masonry.js or isotope.js and now you've got a filterable and sortable grid to boot.
Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

essential-grid-homepage-done
Ever since Pinterest entered the scene, it seems every website is never complete unless it has a grid of something in it. It could be a grid of photos, posts, ads, social share buttons… frogs, anvils. Just put a grid on it!

All kidding aside, grids are a really modern and intuitive way to present a lot of content to your users so they can get to various destinations of your site easily. Add something like masonry.js or isotope.js and now you’ve got a filterable and sortable grid to boot.

These are all great features, but they are complex to create and implement, particularly for the average WordPress user who just has a blank editor with buttons at the top to work with.

Why Use Essential Grid?

From the developers at ThemePunch, the same folks that created Slider Revolution (currently over 27,000 sales of that plugin alone!), comes Essential Grid. It’s purpose is to make your grid-making endeavors a reality and relatively simple.

The uses for something like this are fairly vast. It can be a great way to present your category archive. You can show a grid of profiles of your team or staff. You can do a video gallery of YouTube and Vimeo videos. Essential Grid also includes integration with SoundCloud, so you could have a grid of music or audio files.

But does Essential Grid allow a common WordPress user to really accomplish this fairly easily? Let’s find out.

Using Essential Grid

After installation, my first impression was a little bit of confusion. Upon activation, Essential Grid adds 3 items to your main WordPress menu, and two have almost the exact same name: (1) “Ess. Grids” — which is a unique custom post type; (2) “Ess. Grid” — Notice no “s” at the end. This is where you can generate an entire grid from scratch. Personally, I’d prefer #1 was called “Grid Items”, just to make the distinction clearer. Lastly, (3) “Punch Fonts” — here you can specify any Google font you’d like to use in your Essential Grids and they will only be loaded into your page when an essential Grid is present. Nice feature, but I really would have liked to have known that before installing. It took me a while to figure out that this was bundled together with Essential Grid and not some random malicious thing.

Once the differences between numbers 1 and 2 above were clear, the rest came really intuitively. The two basic steps of creating and displaying your grid are simply to walk through the very detailed Grid generator, then paste the shortcode into the page or post where you want it to appear.

The Grid Generator

create-new-grid

The Grid generator has a very clean and fairly intuitive interface as you can see above. I really like the use of icon fonts, and the bright buttons against the grey panel to differentiate functionality. One question I often have with any interface that uses tabs is whether my settings remain if I change tabs. It’s not immediately clear, but they are, so you can tweak and configure until you’re ready to hit the big green “Save Grid”.

It also features an AJAX powered live preview of your grid below the interface. Not all changes trigger a refresh of the preview, but you can hit the big blue “Refresh Preview” whenever you like.

Here’s a quick walkthrough of each of the panels in the Grid generator:

Naming

Pretty straight forward, just give your grid a unique name. This is key to how the shortcode is generated. Once you’ve created the alias your shortcode already appears right below:

name-shortcode

Source

This is where you determine how the grid content is populated. You first have two choices: (1) Posts, Pages, or Custom Post Types which you already have created in your WordPress install; or (2) a Custom Grid. The Custom Grid allows you to create a gallery from a bunch of outside sources manually, like adding YouTube or Vimeo videos, Soudcloud clips, images, or HTML text. This feature is also available as a meta box beneath all of your post and page edit screens.

custom-grid-w-soudcloud

If you create a grid based on your posts/pages/CPTs, then you next have the choice to choose the categories they come from, and the order they should be displayed in. You can also choose a mix of category-based posts, and a few static pages. There’s lots of flexibility.

Lastly, you choose the Image Source Type, which is a dropdown of your available image sizes based on the image sizes that are registered with your theme. Typically this is just “Thumbnail”, “Small”, “Medium”, and “Large”. But it could be many other unique dimensions as well.

set-image-size

Grid Settings

The Grid Settings determin exactly how the grid layout is generated. There’s a whole lot of settings here, but the general purpose is to allow the grid to fit any container, whether it’s a boxed div, full screen or full width area. There are responsive settings for displaying a different amount of columns dependent on the screen width. Pagination, lazy loading, spacing and padding. And again, the live preview is really instructive in adjusting these settings.

Navigations

This screen is a lot of fun. This is how you set the layout of navigation items, like the sorting, filtering, and navigation arrows you need pagination. It’s a great user experience because you just drag and drop the items from the left into the dotted border areas on the right. You can add multiple items per row as well.

navigations-screen

Skins

Another really great user interface. What’s really slick is that it actually uses Essential Grid itself to allow you to choose which skin you you want. Bonus for you history buffs is that all the skins are named after U.S. Presidents. There’s also a simple “Edit Skin” screen that let’s you customize any of the pre-loaded skins via CSS, or to create a new skin altogether.

skin-selection

Animations

Animations are pretty straight forward. Some users like having a billion different animation options, and honestly, in this case I’m really glad they kept this pretty simple. Animations really only affect grids that utilize sorting or filtering or pagination. They did a great job of making the animations really simple to choose and move on.

animations

Video

While with posts and pages you can create really great grids that link to your posts or pages, with the Video option you can also just have the links play a video directly.

Lightbox

Here you can control the built-in lightbox, applying it only per item or to the whole gallery. Considering the plethora of lightbox alternatives, it’s somewhat odd that Essential Grid doesn’t build in support for alternative lightboxes. Nevertheless, it’s a solid option.

Spinner

Lastly, you can control the appearance of the CSS3-based loading animation.

spinner

The Rough Part

With all those settings and configurations you now only need to insert the shortcode wherever you want. That’s the easy part. The rough part is that no matter how great the live preview has been this whole time, the grid still needs to work well within the confines of your theme. And what happens on the live site is always different than whatever appears in a preview.

In my case, I choose the “George Bush” skin (politics aside), which featured a very large title. It gets a little problematic when really large titles are put into small boxes. So after inserting the shortcode, it became clear that the large title was getting forced out of my boxes. It just wasn’t going to work as-is. Nevertheless, because the settings are so configurable there’s pretty much always a way to make it work — that is IF you are versed in custom CSS styling.

This means that if you don’t want to fuss with custom CSS at all, choose one of the simpler skins, and leaner and cleaner “president” theme. Further, if you choose the “Even” or “Cobbles” style block, you can experiment with the ratios of the box to make more or less room for the text and/or images in your boxes.

But, for those wanting really dramatic and pixel-perfect grids to their mock-ups, you can do it for sure, just be prepared to create your own custom skin from the ground up. The skin creator is an excellent tool, but it’s no shortcut.

Support and Documentation

ThemePunch has many different themes and plugins that they sell from the Envato Marketplace. But if you are familiar with Envato at all, then you know that the Support tab is a nightmare. Fortunately, ThemePunch has it’s own dedicated support center where it supports all its themes and plugins, including Essential Grid. That means you’re going to get one-to-one direct support for your problem and relatively quickly.

They don’t have a public forum, but you can scan through the comments on their product page for how they replied to issues raised by other customers. But, instead of a public forum, ThemePunch provides a very detailed documentation file within the plugin zip file. They also have a good FAQ page. Between one-on-one support, detailed documentation, and an FAQ page, you should be able to get pretty much any question you have answered relatively quickly.

Pricing

Regarding pricing, it seems that ThemePunch had the Envato customer base in mind specifically. They provide two levels of pricing:

  1. $24 for one personal license for one domain
  2. $120 for developers who want to integrate Essential Grid into their themes or plugins and sell them

Both prices are extremely reasonable considering the uses. If you are building a well-designed website and want a striking and reliable grid, $24 is an easy expense to justify. If you are a developer wanting to sell products and can see Essential Grid adding to the value of your theme and/or plugin, then you’ll make the $120 back fairly quickly and then some.

The Bottom Line

Yes, it’s reliable and stable and gets the job done. But like any robust plugin that does anything complex at all, it has a learning curve and you’ll need some technical knowledge. It’s got solid support and documentation, and the price is right for personal or development use. If you are looking for a responsive and dynamic Grid generator, this is a really good choice.

Check out Essential Grid

If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.

Matt Cromwell

Matt has been building websites for 10 years, tweaking and hacking at WordPress for 4 years, and generally being helpful since birth. He blogs regularly at mattcromwell.com.

Discover more from our archives ↓

Popular articles ↓

6 Responses

  1. Hi, I have created one grid on my home page using essential grid plugin. Using Wilbert skin, I am able to display Categories on the grid. However, depending on number of posts from category, it is repeating/showing those categories multiple times. I would like to show all my categories to appear only once even though there are multiple posts associated with it. Appreciate if anyone can help on this. by the way, I am using MagXP as my base theme for my site.

  2. Hi Jakob! If you are looking for a simple Grid to list posts/pages then I’d actually recommend using the Make Theme by Theme Foundry, if you can switch your theme. Otherwise, I’d recommend looking into BeaverBuilder:

    Thanks for chiming in!

  3. Great review – thanks.

    Can you recommend any other grid plugin that in a similar fashion will let you link to posts or pages? Preferably a free one.

    I’m currently using Final Tiles which only let you link to the image page.

    1. Hi Jakob, just realized I commented rather than replying to your comment. See my comment below for my suggestions.

    2. Hi, recently Final Tiles Grid Gallery can use 3 types of galleries: image (user chooses images), recent posts (choose posts by post type, tags, categories) and WooCommerce products.

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.