To run the grid you must have at minium: PHP version 5.3.0
If you are using Visual Composer, then you must at least run Visual Composer v4.7.4.
In the grid panel, we also added in the system requirement box some recommendations about your php limits.
These are just some recommendations and are not necessary to run The Grid properly.
At first, you need to download The Grid plugin from Codecanyon using your account.
At the root folder of this zip file, you will find an other zip file named the-grid.zip. This zip file will be used to upload the plugin.
To add a WordPress Plugin using the built-in plugin installer:
For information on how to install a WordPress Plugin manually, see this manual installation guide below.
In order to unlock the Skin Builder feature and to enable automatic update functionality, you must register The Grid.
The registration system uses a secure method from Envato in order to retrieve your purchase code from your user profil.
In the registration of the field you must enter a Personal Token generated by Envato (not a purchase code).
To generate a Personal Token from Envato, you need to follow these steps:
N.B: You must valide the personal token on Envato before to try to register The Grid otherwise it will not work
N.B: Because the registration system makes some requests on Envato server, if there is an issue from Envato then you will not be able to register The Grid. In this case you need to wait several minutes or hours before to try again.
The Grid comes with an automatic update functionality.
To update The Grid and check for new available version you must enter your Personal Token which can be generated with the Envato API.
To get your Personal Token, you must generate one here.
If you encountered some issues to generate the Personal Token or to register The Grid, you can still update manually with the following steps:
N.B: When a plugin or a theme is removed/updated from Wordpress, all files are physically deleted from your server.
So, if you have made change to the plugin/theme files, all these change will be lost
However, all data/options/posts are stored on your server database (MySQL). So, you will not loose any data when updating or removing a theme or a plugin.
In this section we will explain how to build your first grid with The Grid Wordpress plugin.
At first, go in The Grid admin panel through the left dashboard menu area.
You will find 3 sub-menus available:
To get started, click on the sub-menu The Grid > The Grid. If there isn't any grid then you will have 2 options: create a new grid or import the demo data.
Import the demo data will create the 20 grid examples which you can find on The Grid live demo
At first, click on create a new grid.
You will be redirected on the grid generator page.
Here are the main steps you should follow to create a new grid:
N.B. : All these steps are optional and a grid will be automatically generated with the default post type of Wordpress without any settings.
So, if you want, you can directly preview the grid and save it.
At first, under the General tab, you will find a field where you can enter your grid name
This field must be not empty and it should not contain a grid name which already existing.
While entering your grid name inside this field, you will see that it will also generated the shortcode on the field below.
You can copy/paste this shortcode everywhere you want in order to display the current grid (in an page/post text editor for example).
Under the tab Source, you can set the number of items to display inside the grid.
For example, if you set number to 6, then it will display 6 elements inside the grid (at first load).
you can select the post type(s) you want to display inside the grid.
Several post types can be selected as a source content.
N.B. : You will find more details under Source/Content Tab documentation
Under the tab Media, you can select the post formats you want to allow inside the grid.
For example, if you select video and audio formats, then the grid will retrieve any video/audio media content available in your post type source.
If video or audio are found, then it will be display inside the grid.
N.B. : You will find more details under Media Tab documentation
Under the tab Grid you can choose the style of grid:
You can also set the number of columns in the grid for different device sizes (browser widths):
N.B. : You will find more details under Main Grid settings Tab documentation
Under the tab Skins you can choose the skin of the items display inside the grid.
Just click on the skin you want for this grid to select it.
Depending of the grid style which was set under Grid tab section, available skins will be different for Masonry and Grid style.
N.B. : You will find more details under Skin settings Tab documentation
Now, you have configured the main settings of the grid, you can save it:
To insert a grid in a page or a post, you just need to copy paste the shortcode where you want to make it appear.
To easily insert a grid in a page (for example), you can also use the shortcode interface or Visual composer.
In the source tab you can deeply customize the type of content that you want to display inside a grid.
We have added all options which Wordpress offers to query the content from post types. There isn't any limitation and the possibilities are infinite.
You will be able to filter you content by any category(ies), status, author(s), meta key(s), etc...
N.B : By default the grid will display all the posts ordered by date in descending order (...,4,3,2,1,0).
Item Number correspond to the number of elements initially loaded in the grid:
Post type correspond to the main content you want to load in the grid like your post(blog), portfolio, product,...
You can add multiple post types per grid (unlimited number).
Post status correspond to the current post status you want to make appear in the grid.
By default publish statut is enable. But if you want, for example, to only display your futur blog posts (which you are currently writing) you can select "pending" or "draft" status.
Category Filter - In this section you can select several categories in order to filter the grid by the selected categories.
When one or more categories are selected then the grid with only display these categories from the current post type(s).
If no category is selected, then the grid will display all available categories from the current post type(s).
Exclude items - If you need to exclude some posts you have the possibility to add the ID of these posts in the field Exclude items.
In this text field you should enter the ID(s) of the post(s) to exclude from the source. Each ID must be separated by a comma.
You can also use the preview mode to exclude items and auto fill this field by click on the eye icon.
Ordering - Now that you setup the content of the grid, you can arrange it by different types of parameters.
You can order by date, title, post ID, number of comments, authors, meta key(s),...
All the possibilities offered by Wordpress are available.
Ordering Example : Display the most like post using the built in post like system from the Grid Plugin.
By ordering with a numeric meta value, you will be able to display the most like post by descending order for example. The meta key name is "_post_like_count".
The image below illustrate this example. It can be expanded to any meta key.
Meta Key Filter - If you want to deeply customize the content/source filter, you can use the drag and drop Meta Key filter interface.
With meta key, you will be able to filter your content by certain value such as, number of like, product price, product in sale,...
Meta data are generally used by 3rd party plugins in order to add some additionnal content to a post type (woocommerce price for example).
So, if you want to use a meta key to filter the content, you must ask to the plugin/theme author what is the meta key name which store the value you are searching for.
Meta Key Filter Example 1 : Display only posts which have more than 5 likes (using our built-in post like system).
The image below illustrate this example. It can be expanded to any meta key.
Meta Key Filter Example 2 : Display only products on sale.
Meta Key Filter Example 3 : Display only products on sale with a price superior to 40$ and with available stock. And orderby sale price in ascending order (from lowest to highest sale price).
The Grid Plugin support native Wordpress post format.
Here are the following supported post formats:
N.B. : Available Post Format will depend of the theme you are using. Some themes do not allow all post format.
These format are supported in all skins (except for Quote & Link format which are only supported in masonry layout).
If you have correctly set the post format in your post and also added directly in the content a gallery, a video or a song then The Grid plugin will be able to retrieve these contents.
Alternatively, you can use our own post format settings to add extra content for image, gallery, video, audio, quote and link.
You will find in each post type a setting box where you can add your content according to the selected format.
The alternative content setup in this option box will be retrieve at first and if no content was found then it will search the first media content in the post content.
These settings are also available when you preview the grid in the admin panel. You can easly access to all posts settings in preview mode.
Youtube/Vimeo Video - To add a Youtube/Vimeo embed video you must enter the video ID into the corresponding field.
You will find YouTube or Vimeo's video ID, by visiting the video on Youtube.com or Vimeo.com. The ID is located in the adress bar like this:
You can also set the aspect ratio of the video in order to perfectly fit to the video you want to embed.
Audio Format - To add an embed Soundcloud song you must also enter the ID of the Soundcloud song.
To get the SoundCloud ID you must click at first on share button. Then you must click on embed and copy the number you will find just after "//api.soundcloud.com/tracks/" in the url.
You just need to paste this ID in the SoundCloud field.
In the grid settings under media tab, you have the possibility to allow or not post format like video, audio, quote, link...
In this settings tab, you also have the possibility to show all post format video in a lightbox instead of displaying the video inside grid element.
Just by activating this option all videos will be automatically played in a lightbox.
N.B. : All skins are compatible with video/audio media and can be play directly in a grid item (by default; in a lightbox optionnal).
Image Format - Depending of your grid settings (number of columns), it might be interesting to load images which have the right sizes in order to improve the loading speed.
You have 2 possibilities to optimize image sizes:
Image sizes are generated when you upload new images in Wordpress. So, if you want to use one of the image size set in Global options with images uploaded before installing The Grid then you must regenerate them. You can use a plugin like Regenerate Thumbnail to regenerate all image sizes.
N.B. : Smart resize option currently doesn't work with CDN.