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/
Related Posts Query
‘category__in’ => wp_get_post_categories(get_the_ID()),
‘posts_per_page’ => 5,
‘post__not_in’ => array(get_the_ID())
)
Get related posts with ACF relationship
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
Recently Viewed Posts
Shows recently viewed posts, pages, products, and any custom post type
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