The Grid

In this article, we're going to explain how to create grids with The Grid plugin and follow two use cases of products and blog.

  1. Getting Started
  2. Use Cases for The Grid
  3. Using The Grid in WooCommerce
  4. Creating The Grid for Blog Posts
  5. How to Use The Grid in X and Pro
  6. Using The Skin Builder
  7. Further Reading
  8. Summary

The Grid is a plugin that gives you tons of option to create your perfect grid. With full control of every littl detail you can create layouts that stand out.

Getting Started

The Grid is a perfect way to display your blog, portfolio, woocommerce or any custom post types in a grid format with endless possibilities.

To get started, go to Pro > Validation, or X > Validation, then look for The Grid. Click Install.

Extensions Overview

Once installed, the Install button will change and say Activate. Click that button and it will activate the plugin. You will then see the status change to Installed and Activated.

You will now see The Grid menu item on the WordPress dashboard.

Use Cases for The Grid

The Grid is an 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 The Grid's 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 an overall shop page.
  • Custom post pages. Use The Grid's 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 using The Grid's shortcode or Cornerstone/Content Builder element. Perfect for an up-sell or cross promotion.

We will show you two use cases of The Grid plugin. 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.

Using The Grid in WooCommerce

To add a grid with products as the grid items in The Grid plugin follow the steps below:

The Grid Overview
  1. Go to WordPress Dashboard > The Grid > The Grid menu item.
  2. Click the Create Grid button to create a new grid.
  3. Fill out the options in the General tab as follows:
    • Name: Add a unique name to the grid.
    • Shortcode: The shortcode is automatically generated after you fill out the name and it can be used anywhere in the WordPress ecosystem to show the grid.
    • Grid ID: The Grid ID is automatically generated and creates a unique ID for the grid.
    • Custom CSS Class: Add an all lowercase, no spaced CSS class which can be used later to select this grid and add additional custom styles if you want.
  4. Click the Save button at the top right corner of the screen.
The Grid Settings
  1. Click the Source tab to decide which source you want to use as the grid items. We will select The options are:
    • Post Type: If selected you can have the posts, products, portfolios or any other custom post types as the main source of the grid items.
    • Instagram: If you connect the Grid to Instagram you can use the Instagram feed as the grid items.
    • Youtube: If you connect the Grid to a Youtube you can use the Youtube Channel as the grid items.
    • Vimeo: If you connect the Grid to a Vimeo you can use the Vimeo videos as the grid items. This will work only if you have the Vimeo Pro subscription.
    • Facebook: If you connect the Grid to Facebook you can use the Facebook posts as the grid items.
    • Twitter : If you connect the Grid to Twitter you can use the Twitter tweets as the grid items.
    • Flickr: If you connect the Grid to Flickr you can use the Flickr feed as the grid items.
    • RSS: You can connect The Grid to an RSS feed to show as the grid items.
  2. To be able to retrieve the products of the Woocommerce plugin we need to select the Post Type source.
The Grid Source Settings
  1. Fill out the settings of the Source tab as follows:
    • Item Numbers: Set the number of the grid items to show on one page.
    • Post Types: Select the Products post type to retrieve the Woocommerce products as the grid items.
    • Post Status: Select the status of the post to retrieve as the grid items. We will select only the Published posts.
    • Category/Taxonomy Terms: Select categories or taxonomies that you want the post items to show. We want the products from all categories so we will set this option blank.
    • Author(s): Select the products with a specific author that you will choose in this option.
    • Exclude Items: Select the specific products that you want to exclude from grid items.
    • Ordering: Set the order of the grid items.
The Grid Ordering
  1. Go to the Grid tab where you can set the grid type and responsive related options. There are 3 types that you can choose:
    • Grid: It is the standard grid layout.
    • Masonry: The masonry type has items with different heights.
    • Justified: It is basically the masonry type with a justified mode.
The Grid Grid Type
  1. Go to the Layout tab to add the additional features to the grid by dragging and dropping as follows:
    • Search: You can add the search feature to the grid.
    • Filter: You can add the filter feature to the grid.
    • Sort: You can add the sort feature to the grid.
    • Load More: You can add the load more feature to the grid.
    • Pagination: You can add the pagination feature to the grid.
  2. You also can set the grid to the horizontal or vertical mode in the layout tab.
  3. The Full-Width option in the layout tab will make the grid go outside of the container of the website and over the sidebar and it will take up the whole with of the screen. If you see such a case and you do not want to have that kind of view turn off the Full-Width option.
The Grid Grid Composer

Creating The Grid for Blog Posts

One of the popular use cases of The Grid plugin is to have a blog post listing page other than the default blog post page that is available in the X and Pro themes by default. The process of adding a grid of the post items is the same as the section above, but instead of the Products post type, you will use the Posts.

An important point to consider is the item number which is better to be 10 or a lower number. If you add -1 or 0 it will load all the posts at once which is not a good idea and will put pressure on the server which the website uses. The best way is to set a number for the item numbers and go to the Pagination tab to decide about the pagination mode that you will use to load the blog items. Another point that we did not discuss before is the ordering options in the Source tab which will give you options to order the result of the grid with any WordPress query you want. Click here to learn more about the custom ordering in WordPress.

The Grid Ordering

How to Use The Grid in X and Pro

Now that we learned how to add grids in The Grid plugin, we need to add the created grid to a page of our website. The standard way of doing so is to use the Classic The Grid Element in Cornerstone (X) and Content Builder (Pro). You can find this in the Elements tab of the builder where it can be dragged onto the page.

The Grid Element

The Classic The Grid Element has one option and that is to select the grid that you already have created. The option will list all the grids that you created using The Grid plugin.

The Grid Element Setup

Due to the complicated nature of the grids and the way The Grid plugin embeds the assets to show the grids you can not see the grid on the fly in the builder. You will see a message mentioning that no preview is available and you need to check the front end of the website to see the actual result.

Using The Skin Builder

You can decide that each grid item will contain which elements using the Skin Builder. To access the Skin Builder go to WordPress Dashboard > The grid > Skin Builder and you will see the screen below:

The Grid Skin Builder

We will discuss a few options available in the Skin Builder by adding a sample one following the steps below:

The Grid Skin Item Layout
  1. Click the Create a Skin button to add a new skin.
  2. You will see the skin builder panel at the right corner of the screen and the layout setting at the left corner.
  3. You can set the overall characteristics of the skin using the settings panel.
  4. To add elements to the skin builder panel, click the Add Element button.
The Grid Available Elements
  1. There you will see available element types that you can use, click an element type and set the proper options and finally click the Add to Skin button to add the element to the skin builder.
  2. You can repeat the steps above to add and configure the view of a grid item.
  3. Finally, if you click the elements that you added to the skin builder you will be presented with set of options to fine tune the element such as:
    • Position
    • Visibility
    • Font
    • Border
    • Shadow
    • Background
    • Custom (Custom CSS)
The Grid Element Settings

If you are interested in delving into details check out the of the check the official Skin Builder documentation.

Further Reading

This article barely scratched the surface of The Grid capabilities. If you are interested in learning the plugin features in more depth we suggest that you check the official documentation.

Summary

We've discussed The Grid plugin and the features that it has to create a grid using versatile sources. We talked about the most used cases such as the Woocommerce products and creating a blog listing grid. Then, we delved into adding the grid to a page using the Cornerstone in the X and Content Builder in the Pro theme. Finally, we briefly talked about the Skin Builder feature of the plugin.

See something inaccurate? Let us know