Please check step by step instruction how to display your content without any single line of coding by using The Post Grid Plugin.

Please check out Documentation and Video Tutorial also.

Step 1:

First download from

Step 2:

Now go to Left menu see “The Post Grid” and click “Add New” You will get 4 tabs here Post Source, Layout Settings, Field Selection & Style

Post Source:

  1. Post Type: First Select Post type “Post or Page”
  2. Common Filters:
    1. Include Only: You can input specific post/page ID that you want to include.
    2. Exclude: You can input specific post/ page ID that you want to Exclude.
  3. Advance Filter: you can check with way you want to filter your post.
  4. Taxonomy: All Taxonomy will show here.
    Then Terms will appear:
  5. When you will check Tags this box then the Terms will appear  you can select specific Tags which you want to include. Then set Relation Operator.
  6. When you will check the Category then the Category Terms will appear then you can select specific category which you want to include. Then set Relation Operator.
  7. Relation: You can set relation with 1 more terms.
  8. Order Settings: You can set Order by then order.
  9. Author: You can set specific Author or skip this.
  10. Status: You can select which status you want.
  11. Search Keyword: You set special keyword or keep it blank.
  12. Date Range: You can set two specific date start and end date to filter data.

post-grid-pro-post-source

Layout Settings:

  1. Layout: Select which layout you want from 4 different layouts.
  2. Filter: Check “Taxonomy Filter” if you want to make Filterable Grid, Order, Short order and Search filter
  3. Taxonomy Filter: Set Taxonomy Categories or Tags.
  4. Taxonomy Filter Type: Set Filter Type Dropdown or Button.
  5. Show post count: Check if want to show post count in Filter button.
  6. Column: Select how many column you want to display in Desktop, Tab and Mobile.
  7. Show sticky post: Check yes if want to show sticky post at top.
  8. Pagination: Check this if you want to enable pagination.
  9. Display Per Page: For Pagination how many you want to display per page.
  10. Post Loading Type: Normal pagination numbering, Load More Button and Load on scrolling.
  11. Feature Image Size: Select pre-define image size or can select custom image size.
  12. Custom Image Size: If select Custom Image Size then this option show you can set width, height and Crop type
  13. Media Source: Select from you get the image.
  14. Image type: Set image type.
  15. Excerpt Type: Set Character or Word.
  16. Excerpt Limit: You can set your own limit or it will come WP default limit.
  17. Excerpt More text: You can manually add … here
  18. Margin: You can set Bootstrap default 30 px margin or no margin.
  19. Grid Type: Set the Grid Type Even or Masonry
  20. Link to Detail Page: Yes or No
  21. Detail Page Link Type: Popup or New Page
  22. Popup Type: Single Item popup or Multiple popup with next preview button.
  23. Content Visible: You can set which Group can view the content public or register user group.
  24. Default Image: Some Layout must need image so if no featured image then image get from this default image.

Field Selection


Select Which fields you want to display with your page/post.

the_post_grid_field_selection

Style

  1. Parent Class: You can set a class for grid.
  2. Primary Color: Set primary color it is the icon color.
  3. Button Colors: It work for read more, Carousel buttons and pagination button color.
  4. Overlay Color: Overlay color, overlay opacity and overlay  item top padding.
  5. Title, Excerpt and Meta Date style: you can set color, font size, weight and Alignment

3) Settings:

Step 1: From 1st tab you can set the popup detail page fields.

Step 2: In 2nd tab  write custom CSS here.

post-grid-pro-settings

4) How to use:

the_post_grid_add_intopage

How to add Ajax Pagination :

From Short Code Generator =>  Layout Settings Tab

Step 1: Check Pagination Enable then 2&3 fields enable.

Step 2: Display per Page: Enter the number how many you want to display per page

Step 3: Post Loading Type: Select Load more button or Load more on scroll

post-grid-ajax-pagination

How to set custom image size:

From Short Code Generator =>  Layout Settings Tab

Step 1: From Featured Image Size dropdown Select Custom Image Size then the input box will appear at below

Step 2: Enter your desire image width and height

post-grid-pro-custom-image-size

How to Set Masonry Grid :

From Short Code Generator =>  Layout Settings Tab

From Grid Style select Masonry 

post-grid-masonry

How to set Isotope Layout :

Step1: Layout: From Layout select dropdown select the Isotope Layout which one you want then some related fields will appear.

Step 2: Isotope Filter: Select the Filter button type Categories or Tags.

Step 3: You can set which button will be default selected.

Step 4: You can disable Show All button if check it.

Step 5: Search : If you want to show search button then check it.

post-grid-pro-isotope

How to Enable Social Share in Grid View

Go to Settings= > Social Share 

Then check which items you want.

list-view-social-share

How to Set Layout for Category, Search and Tags

Go to Settings = > Others Settings Tab 

Then select which Layout you want to set for category, search and tags page.

category-layout

How to Enable Sticky Post:

From Short Code Generator => Layout Settings => Show Sticky Post at Top set Yes 

sticky-post

How to add in Visual Composer

Click the Visual Composer add ons then see “The Post Grid Pro” Click on the add one you will get a window to select the layout.

postgrid-vc

 

For any bug or suggestion or support please mail support@radiustheme.com

Please Take a Look of PRO version features