This article was last updated on the May 7, 2018.
In this article, we'll cover some usage examples of how you can utilize The Grid within your X/Pro powered site. We'll mainly be focusing on how to use The Grid and so may skip over some finer details.
Note: This article covers only a small portion of what you can achieve with The 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.
Make sure you already have The Grid installed and then in your wp-admin, you should see The Grid menu item like this:
Go ahead and click on The Grid, once you've clicked that, you'll see The Grid main admin screen like this:
As we mentioned further up, we're only going to cover how to use The Grid and not every option it provides, to learn more about The Grid check out the official documentation here.
Use Cases for The Grid
The 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 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 a 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 built in Cornerstone integration. Perfect for an up-sell 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.
The Grid & WooCommerce
Now on the main The Grid admin screen go ahead and click on Create a Grid:
Once you've clicked that, you'll see the options provided by The Grid like this:
Let's go through the options and create a grid for our WooCommerce products. First up, you'll be on the General section with the following options.
- Shortcode (this is automatically filled in when you enter your Alias)
- Grid ID
- Custom CSS Class
It's worth while filling all these options in even though the Custom CSS Class isn't required, this is because if you want to add specific styling in your child theme on a per grid basis, assigning a unique class per grid will make that a much easier task. So with all those options filled out, the**General** settings for our grid look like this:
Note that the Grid ID is automatically filled in and can not be modified.
Once you've done that click on the Save button and once saved go ahead and click on the Source tab.
On the source tab, you'll see various settings and configuration options like this:
Let's go ahead and configure what we need, make sure you have Post Type selected as shown in the above screenshot, Post Type is selected by default. Now in the Item Number section pick the desired amount of products to show in your grid. You can use 0 which will then use your standard posts per page setting. Another option you'll see is -1 It is recommended you don't use this option, on site with lots of products or multisite install, using -1 could break your install! Use with caution.
The next option you'll see is Post Types here you choose the post types that are used within your grid, for this example as we want to use WooCommerce click the x where you see the word Posts like this:
By dismissing Posts this will stop the standard posts appearing in our grid, as we just want our WooCommerce products to show and not be mixed in with standard posts. Now go ahead and click in the select box either by clicking the plus sign on the right hand side, or by clicking on the Select a post type text. You'll see a dropdown box show like this:
Select the post type called Products.
The next option in the list is Post Status The default is Published and it's recommend to leave this, though you can also change to private which will only show if the user is logged in.
Next up is Categories, here you can selected which categories you want to show products from, if you don't specifically set categories, all categories will be used.
Other options include
- Authors (Filter the display of products based on Authors)
- Exclude Items (Exclude specific items you don't want to show in the grid by the post ID)
- Ordering (Set the ordering of products, including the order by and descending or ascending)
- Meta Key (Allows you to filter what displays in the grid, by setting and checking meta key values)
Once you've done all that go ahead and click on Save again.
The next tab is Media
On this page you can set image sizes and a default image to be used in case your posts don't have a image attached, for the purpose of this article, we don't need to set any of these, so we'll leave them at the defaults.
The next tab is Grid
Here you can pick the grid type, either standard, masonry or justified, you can also set specific widths for the responsive settings based on which device is being used such as desktop, tablet, laptop, mobile etc. For the purpose of this article, we're also going to leave everything on this tab at it's default, though feel free to play about with all the settings.
Another tab worth looking at is Layout. On this tab we can define if we want pagination to show and other filters what we want to use, when you click on the Layout tab you'll see the options available like this:
Here you can just drag and drop the blocks you want to use on your grid to the area you wish, we're going to use pagination and search which means our options will then look like this:
The remaining options on that page are:
- Grid Layout (Vertical or Horizontal)
- Right To Left (if you use a RTL Language on your site)
- Grid Margin (allows you to add positive or negative margin to your grid)
- Grid Background Color (Allows you to set the background color of your grid)
- Full Width
Note with the full width option, this means the grid will expand outside of your container and completely take up the whole page including covering/overlapping your sidebar, if you are noticing display issues, try disabling this option.
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 again to save your grid.
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 Classic The 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 drop-down select box, click that and then choose your grid from the drop-down:
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 Grid like this:
With the wealth of options The Grid provides, your sure to find a setup to suit your needs.
Customizing Your Blog
The Grid provides a vast array of options to allow you to create custom Grids to output your blog posts. One important aspect to remember is, these Don't replace your archive pages or standard blog pages, rather they are to be used in conjunction with. Or you could redirect your archive pages to the new pages with your customized Blog Grid. Though this wouldn't be recommend as it may cause unintended consequences with other 3rd party plugins or core functionality.
Creating a Grid for Blog Posts
Make sure to select Post Type under Source Type and then select Posts which is selected by default. You can in addition add or choose other post types, but for the purpose of this we're focusing on Posts as we're creating a custom grid for our blog posts.
You can also set how many posts to show, the default is 10. You can set -1 or 0 as well as any other number. Be very careful when setting -1, this is generally seen as bad practice and can place your server under load as the grid will try and load every post. It can also have unintended consequences with core functionality and 3rd party plugins.
If you scroll further down the page, you'll see other options for your Grid, including Post Status and Category Filter.
Content Status. Allows you to select a post status that should be shown within the Grid. For example, show all posts that have the post status as Published. This is the default and the one you'd normally select.
Category Filter. Allows you to select which taxonomy terms such as categories and other taxonomies to show in The Grid, this is useful as it allows you to create multiple Grids and display them on different pages for different categories. Perfect for a magazine style site.
If you scroll further down the page you'll see the Ordering options.
These options allow you to set the Order which is either descending or ascending this value is used for the Order By option. The Order By option allows you to set a variety of different options such as order by date, order by author and more. The Grid supports all the normal WP_Query Order By methods which can be seen here.
Once you've set the options above as required, go ahead and click on the pagination tab.
Here you can set which pagination option you want to use, either ajax load the next posts or use previous and next links. Both options work great and ultimately the decision on which one to use is down to your personal preference.
The possibilities for creating a custom blog Grid are virtually endless, with a vast array of options it's an extremely powerful way to customize and show blog posts to your visitors in a unique way.
The Grid 2.0 introduced a Skin Builder, an advanced piece of functionality that allows you to build completely custom skins for your grids giving them a more unique look and allowing you to tweak other options.
Access to the Skin Builder is an exclusive deal only for X/Pro Customers. Usually, access is reversed for people that purchase the Grid directly, but we've secured you our valued customers access to the Skin Builder all with your purchase of X/Pro.
Using The Skin Builder
You'll see the Skin Builder under The Grid main menu, click that and you'll land on the main Skin Builder overview like this:
Go ahead and click on Create a Skin you'll then see the main Skin Builder like this:
There are many options within the Skin Builder and we'll give a brief overview, but you may also want to checkout the official documentation here.
One of the most important aspect of the Skin Builder is elements, elements are like the building blocks of your skins, without elements all you have is an empty skin with no content. Go ahead and click on Add Element.
Once you've clicked that you'll see the element list like this:
For example, if we click on Title/Excerpt that will then be added to our skin like this:
If you click on your newly placed element you'll be presented with a range of other options in the inspector like this:
The Inspector allows you to edit a wide range of options such as:
- Custom (Custom CSS)
Not only that but it also allows you to edit all those styling options for both the idle and hover state separately in one easy to use interface. Along with those options, you can also modify the animation, linking options and more!
The exact options you can edit depends on the element you've added to your Grid.
As you can see the Skin Builder is an extremely powerful tool within The Grid and opens up a raft of customization options.
Updating The Grid
The Grid plugin isn't compatible with automatic updates via our updates system. The plugin deletes any data related to updates for The Grid unless it's validated with a individual Envato purchase code. To automatically update The Grid and view available updates you'll need to deactivate the plugin. Any available updates will then display and you'll be able to automatically update the plugin.
You don't need a purchase code for The Grid and you can still update the plugin. Just due to The Grid's own system which we can't control you'll need to follow the above steps to successfully check for updates and complete any available updates.
Users will frequently inquire about the version of The 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 The 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 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 The Grid with each release, occasionally the release cycle of the plugin will prevent this from being possible. Essentially, since we have no idea when The 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 The 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 The 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 The 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 to see a notification in your WordPress admin panel asking you to register The Grid upon activation, simply dismiss or ignore this notice.
Hopefully, the information provided above has helped you to gain a better understanding of what to expect from utilizing The Grid within X or Pro. Ultimately, there are a few things to take away from this article:
- The Grid is a extremely powerful and flexible plugin that will assist you with creating the perfect website.
- The version of The Grid included with the theme is an unmodified version of the plugin.
- We do our best to ensure that the version of The Grid included with X or Pro 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 The Grid feature should be directed to the online documentation referenced in the "Documentation" section above.