Note: This Extension is no longer active. Themeco updates and support of this plugin will end on September 30, 2021. You may continue to use the plugin after this date at your own discretion. We recommend all Themeco customers switch to the native Posts Elements available in all Cornerstone builders. More advanced layouts can be achieved using the Grid Element available in Pro.
If you are looking for documentation on our Grid Element (separate from 'The Grid' plugin discussed here), please visit our Grid Element article.
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:
- Go to WordPress Dashboard > The Grid > The Grid menu item.
- Click the Create Grid button to create a new grid.
- 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.
- Click the Save button at the top right corner of the screen.
- 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.
- To be able to retrieve the products of the Woocommerce plugin we need to select the Post Type source.
- 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.
- 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.
- 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.
- You also can set the grid to the horizontal or vertical mode in the layout tab.
- 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.
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.
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 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.
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:
We will discuss a few options available in the Skin Builder by adding a sample one following the steps below:
- Click the Create a Skin button to add a new skin.
- You will see the skin builder panel at the right corner of the screen and the layout setting at the left corner.
- You can set the overall characteristics of the skin using the settings panel.
- To add elements to the skin builder panel, click the Add Element button.
- 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.
- You can repeat the steps above to add and configure the view of a grid item.
- 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:
- Custom (Custom CSS)
If you are interested in delving into details check out the of the check the official Skin Builder documentation.
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.
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