Essential Grid

This article was last updated on the January 2, 2017.

In this article, we’ll cover some usage examples of how you can utilize Essential Grid within your X powered site. We’ll mainly be focusing on how to use Essential Grid and so may skip over some finer details.

Note: This article covers only a small portion of what you can achieve with Essential Grid, make sure you take a look at the official documentation which is linked to in the Documentation section below to explore the full possibilities of this powerful tool.

Getting Started

Make sure you already have Essential Grid installed and then in your wp-admin, you should see the Essential Grid menu item like this:

Essential Grid menu item

Go ahead and click on “Ess. Grid”, once you’ve clicked that, you’ll see the Essential Grid main admin screen like this:

Essential Grid main admin

Documentation

As we mentioned further up, we’re only going to cover how to use Essential Grid and not every option it provides, to learn more about Essential Grid check out the official documentation here.

Use Cases for Essential Grid

Essential Grid is a extremely versatile plugin, you can use custom post types, custom taxonomy, categories, tags, posts, pages, media etc. Making multiple use cases for it, including but not limited to:

  • Custom Product showcases. Use Essential Grids custom post type feature to show off products from different categories on different pages, perfect to keep the focus on one set of products, rather than having a overall shop page.
  • Custom post pages. Use Essential Grid custom post type feature to show posts from selected categories or with selected tags on different pages, perfect to have a page per category or per taxonomy (category/tag).
  • Showcase your products or posts at the end of a product or post with a Essential Grid inserted. Perfect for an upsell or cross promotion.

In the first example, we’re going to utilize WooCommerce to create a grid of our products, if you don’t have WooCommerce installed, check out our helpful WooCommerce guide here. Make sure you also have a few products setup to enter into your grid.

Essential Grid & WooCommerce

Now on the main Essential Grid admin screen go ahead and click on Create New Ess. Grid:

Create a new Essential grid

Once you’ve clicked that, you’ll see the options provided by Essential Grid like this:

Essentrial Grid main options

Let’s go through the options and create a Essential grid for our WooCommerce products. First up, you’ll be on the “naming section” with the following options.

  • Title
  • Alias
  • Shortcode (this is automatically filled in when you enter your Alias)
  • CSS ID

For the purpose of this, we’ll leave the CSS ID one blank and fill in the rest like this:

Filled out WooCommerce

Once you’ve done that click on the Source tab.

On the source tab, you’ll see various settings and configuration options. Where you see Type and Category, you’ll see Post Types scroll down and select Product Product is the post type of WooCommerce. Once you’ve selected product, you’ll see the Post Categories option, this allows you to select which products to include either by tag or category:

Select categories or tags

For the purpose of this tutorial, we’re going to select our clothing category, which means that all products in the clothing category will show in the grid. It’s also worth noting here you could select multiple categories if you wished.

Another option you’ll see on the source tab is one called Maximum Entries setting this will define how many entries the grid can have, setting that option to -1 will disable that option all together, in theory allowing for unlimited products to be shown on our grid.

The next options you’ll see is for the media source of the grid items like this:

Media source

As you can see there’s quite a few various media options, but as this is products, we’re going to want to just select Featured Image this will mean that if we have set the featured image of our WooCommerce product, Essential Grid will take that image and output it in the grid for your product selection.

Under that option is a option to set the Default Image this is a useful option if you don’t always set featured images for your products and still want a image to show on the grid, setting this will ensure a image always shows.

Next up, go ahead and click on the Grid Settings tab. On this page you’ll see various options for the overall layout of your Essential Grid:

Layout Options

It’s worth noting here that if under Layout, you select Fullscreen the Grid Layout, Content Push and Items Ratio options are no longer available to set. For the purpose of this article, we’re going to stick with Boxed, but you can choose any option you’d like.

Note:If you choose to use Fullscreen or Fullwidth, you’ll need to review the selector options provided by Essential Grid, as the grid will expand outside of the content area, potentially causing layout issues. You can review those docs here.

The next options are for how many columns displaying on different screen sizes, you’ll notice that there’s a Advanced mode option, this actually allows you to have greater setting over custom breakpoints etc, but we won’t be covering that in this article and will just be leaving all those options as they are. Feel free to experiment though and find a way that’s perfect for you.

All the following items on that page we’ll leave as they are too. Which is Lazy Loading, Item Spacing and Whole Grid Padding. Again you don’t have to leave these as they are, so feel free to play about with the options and find the perfect settings for you.

Now go ahead and click on the Nav-Filter-Sort tab, you’ll see a lot of various options on this page, we’ll just cover the ones we actually need for our grid.

Nav-Filter-Sort

As you can see we have a bunch of different modules available to us, which we can have inside our grid, the modules are drag and drop, drag Pagination into Dropzone bottom 1 and drag the Cart module into Dropzone Bottom 2.

As you scroll further down that options page, you’ll see various alignment options which you can set as required:

Grid layout controls

Further down that same options page, you’ll see various other sorting options and filter options, which as explained we won’t be covering them all, but there’s some great info about these options in the official documentation of Essential Grid. For the purpose of this article, we’re going to leave all those options set to default.

Next up click on Skins here you’ll see various different options that allows you to change the skins/styling of your Essential Grid. For the purpose of this article, we’re just going to leave it set to Minimal Light with the default background color. You can also check out the official documentation on Skins here.

The rest of the available tabs and settings/options don’t really apply to the purpose of this article and for more information about the various settings/options you should refer to the official documentation as mentioned at the beginning of the article.

Now we have our grid created how we want it, click on the save icon to save your grid:

Essential Grid Save

Once you’ve saved your Essential Grid for the first time it’ll take you back to the main Essential Grid admin page, where you’ll be able to see all your created grids, duplicated created grids and edit existing created grids:

All Grids in a row

Placing your Grid using Cornerstone

Now we’ve created our grid, it’s time to make use of it! We’re going to add a new page for the purpose of this article, but you can of course use an existing page/post etc. Load up whichever page/post you’d like to place the grid on in Cornerstone.

Once your page has loaded in Cornerstone, add one section, or add a new section to a existing page and then go to Elements. Scroll down the elements list and you’ll see we have a new Essential Grid element:

Essential Grid Element

Go ahead and drag and drop that into your newly created section. By default it’ll select the first grid you created, so if you only have one grid it will display fine, if you have created multiple grids, click on the grid in Cornerstone, then on the right hand side, you should see a dropdown select box, click that and then choose your grid from the dropdown:

WooCommerce Grid selection

Once you’ve selected your grid, add any other content you want to your page, such as text images etc and then save in Cornerstone.

Now when you go page you just created, you’ll see your Essential Grid like this:

Our Essential Grid frontend

If we change our Essential Grid settings to not be paginated and instead show all our clothing products in one grid, the frontend of our site would then look like this.

Essential Grid Paginated disabled

As you can see by changing one simple setting our Grid is now completely different, with the wealth of options Essential Grid provides, your sure to find a setup to suit your needs.

Bundled Version

Users will frequently inquire about the version of Essential Grid being utilized within X. Because of the way that we are utilizing the plugin with in X, it should be noted that the version of Essential Grid included with the theme is made intentionally for numerous reasons. The following is just a few of the reasons why we do not always utilize the latest version of the Essential Grid plugin:

  • Stability – Newer versions of software do not always equal greater stability. Oftentimes there are undiscovered bugs that are introduced with certain versions and are unknown until the product has been released to the public for some time. The version of the plugin that we bundle with the theme is more or less guaranteed to work without any issues as we take a great deal of time to test all functionality thoroughly before releasing it along with the theme.
  • Release Cycles – While we try to include the latest version of Essential Grid with each release, occasionally the release cycle of the plugin will prevent this from being possible. Essentially, since we have no idea when Essential Grid will be releasing new versions of the plugin, we cannot plan our releases around this. Because of this, if we have already begun the process of finalizing our release and submitting it to ThemeForest for review while Essential Grid is putting out a new version of the plugin, that version of the plugin will not be able to make it into the theme until the next release at the earliest.
  • Not Always Necessary – Some of Essential Grid’s releases have only included simple “bug fixes” without any huge additions or modifications to the rest of the plugin. Because of situations like this, it is up to our discretion whether or not a new release will make it into the theme or not based on the nature of the update.

Because of these reasons (among others), there is no need to register your license for Essential Grid if you happen to have one. In fact, doing so is discouraged in order to prevent any potential conflicts when updating, as previously mentioned. If you happen see a notification in your WordPress admin panel asking you to register Essential Grid upon activation, simply dismiss this notice.

Conclusion

Hopefully the information provided above has helped you to gain a better understanding of what to expect from utilizing Essential Grid within X. Ultimately, there are a few things to take away from this article:

  • Essential Grid is a extremely powerful and flexible plugin that will assist you with creating the perfect website.
  • The version of Essential Grid included with the theme is an unmodified version of the plugin.
  • We do our best to ensure that the version of Essential Grid included with X is as up-to-date as possible; however, this might not always be the case based on the reasons listed in the “Bundled Version” section above, which includes stability, release cycles, and the fact that not all updates are necessary.
  • Any questions concerning the usage of a Essential Grid feature should be directed to the online documentation referenced in the “Documentation” section above.