Create a Grid

We provide many tools and options for you to design any desired posts grid, categories grid, taxonomy terms grid layouts.
You can choose to import our pre-made demos or create new grids yourself as following steps.

Firstly, Create a Card: https://piotnetgrid.com/docs/create-a-card/
Go to your WP Dashboard > Piotnet Grid > Grids > Add New > Add Grid Title > Edit With Piotnet Grid
Piotnet Grid Editor will be launched. Drag and Drop the Grid Widget and other Widgets from Editor Panel to design your Grid

Grid Settings

Source

Options:

+ Posts, Product, Custom Post Type – For Posts Grid

+ Taxonomy Terms (Categories, Product Categories, Custom Taxonomy Terms) – For Terms Grid

Card Template

Select one of the Card Templates which you created (Mandatory)

Current Query

Enable this feature if you want to get posts on the archive page

Custom Query

You can custom query like array (“post_type”=>”post”), document https://developer.wordpress.org/reference/classes/wp_query/

Get related posts with ACF relationship

1. Set ACF Relationship Field > Return Format > Post ID

2. Enable Custom Query on the Grid > Custom Query >

array(

‘post_type’ => get_post_type(),

‘post__in’ => get_field(‘ACF_RELATIONSHIP_FIELD_NAME’),

)

Woocommerce Best Seller Query

array(
‘posts_per_page’ => 10,
‘post_type’ => ‘product’,
‘post_status’ => ‘publish’,
‘ignore_sticky_posts’ => 1,
‘meta_key’ => ‘total_sales’,
‘orderby’ => ‘meta_value_num’,
‘order’ => ‘DESC’,
)

Custom query to show only instock product

array(
‘post_type’ => ‘product’,
‘meta_query’ => array(
array( ‘key’ => ‘_stock_status’,
‘value’ => ‘instock’)
))

Wishlist Posts

Add Wishlist widget to your card and then enable this feature to get wishlist posts

Cache

Enable Boost Cache Loading for fastest 40ms loading time in ideal conditions ( users and hosting location in the same country and stable internet connection)

Carousel

Enable

You can enable this feature in Layout Section > Carousel Enable

Show half of the next slide

Please set Slide to Show with decimal places like 2.3 or 2.5

Custom Next / Previous Button

Edit Grid > Navigation = None or Dots > Advanced Tab > Custom ID: example “piotnetgrid-carousel”
Create a Text / Image / Button or Icon widget > Advanced Tab > Trigger Prev/Next Action for Grid Carousel > Enable > Grid Custom ID: enter the Grid Custom ID which you added “piotnetgrid-carousel” > Select Action: Next or Previous

Create complex grid layout

Below the picture is a sample of a complex grid layout: various cards that have different font sizes and image ratio. Following is a step-by-step guide on how to make a similar one.

Create 3 card templates as designed
Create a section contains 2 columns, set width = 50% for each column
Drag and Drop 3 Grid widgets into the columns. The first Grid is on the left column and 2nd Grid, 3rd Grid is on the right Column. You can fully define all settings for the first Grid, then duplicate the grid and change the settings to have the 2nd and 3rd ones.
The first Grid Query Settings:
Posts Per Page = 4; Last posts skipping quantity on each page of the pagination = 3
The second Grid Query Settings:
Posts Per Page = 4; First posts skipping quantity on each page of the pagination = 1; Last posts skipping quantity on each page of the pagination = 2
The third Grid Query Settings:
– Posts Per Page = 4; First posts skipping quantity on each page of the pagination = 2; Last posts skipping quantity on each page of the pagination = 0
– In Layout tab: Set Columns = 2

Embed Grid

We created Grid Block (Widget, Element) for Gutenberg, Elementor, Oxygen. This block (widget, element) help you embed the Grid by selecting the Grid which you created by Piotnet Grid. You can also embed Grid by using the Grid Shortcode.

Gutenberg Block

Elementor Widget

Oxygen Builder Element

Documents

FAQ