IksPostGrid - Super Customizable Plugin

IksPostGrid

Super Customizable Plugin


Iks Post Grid is a WordPress post grid plugin that provides powerful customizable system, has loads of post selection and css appearance settings. Also has more than 30 starter templates - so it’s super easy to use for beginners and very customizable for advanced users. Iks Post Grid is a best choice for blog posts, portfolios, projects, team showcases, image galleries or any other custom grid content.

Thank you for purchasing IksPostGrid plugin. If you have any questions that are beyond the scope of this help file, please feel free to contact us on CodeCanyon plugin page.

Installing IksPostGrid Plugin is as simple as installing any other WordPress Plugin.
 
  1. Upload the "iks-post-grid" folder to your WordPress plugin directory (/wp­content/plugins/)
  2. Activate the plugin via your WordPress admin panel!
  1. In your WordPress Administration go to: "Plugins" > "Add New" > Upload and upload the .zip file of the plugin that you downloaded from CodeCanyon.
  2. Active the plugin.
 
A new menu page with the name "Iks Post Grids" is created in WordPress admin where you can configure and create your post grids
 
Now you can go to  "Iks Post Grids" > "Get Started" page and see there a plugin structure with links. Сlick on the link you need.
 
Also you can:
  • Click "Add new grid" after installation for creating new post grid.
  • Choose settings and click on "Create" button.
  • Choose any ready template if you want in Templates tab (Last Icon in tabs).
  • Insert shortcode "[iks-post-grid id='YOUR_NUMBER_ID']" to any page or post.

 

You can completely edit any of the following content:
 
  • Image
  • Title
  • Info block (Author, Date, Comments link)
  • Custom fields
  • Taxonomies
  • Content Preview
  • Read More Text
  • Button with link
  • Icons
  • WooCommerce

Grid content

 

 

Iks Post Grids Tabs

At the bottom left you can see the buttons for saving, deleting and duplicating the current grid. 

At the bottom right, you can change the number of posts displayed in the preview and change the background of the grid for more convenient viewing.

Grid

Here you can select type of grid, enable equal height for posts blocks and choose Google font. 

When selecting a font, you can see the changes in the admin preview immediately.

Setting "Types of grid" means: 

Classic - classic grid with refreshing page on sorting and filtering.
Isotope - masonry grid with instantaneous sorting and filtering.

Adaptivity

Here you can enable or disable adaptive settings. If adaptive settings are enabled - then you can set screen's widths and settings: Number of columns in row, size between rows and columns, and also grid width and max-width.

 

Computer, Notebook, Tablet and Mobiles settings are similar and look as follows:

Selection

Here you can select post types (post, page or any custom) and taxonomies (categories, tags, attachment or any custom) 

For posts taxonomies you can set Posts Taxonomies Types Relation (AND - taxonomies types will be intersects, OR - taxonomies types will be united), and Include Children setting.

And also you can set get posts arguments like: Posts per page, Order By, Order, Offset from first post, Include or Exclude posts by IDs, Post Status (publish, draft, etc.), Post Parent (Show only child posts of this), Authors, meta_key, meta_value and etc.

Content Builder

Here you can select what content to show in grid, and then order it with drag'n'drop "Order" setting.

Also you can select settings for: Image, Title, Author, Comments, Date, Taxonomies, Custom fields, Content Preview, Read More, Button, WooCommerce and all icons.

When you click on button "Edit", settings are loaded via AJAX and then you can change them below.

Let's see at the images for an example

Here you can select Image height, Image size (quality), No image action.

Then you can select Links and its behaviour (open in new window or not, custom link, etc.)

Also you can enable Modal image, and users will be able to click on image and see full image in Bootstrap modal preview.

And, of course, you can control Image appearance (set settings for image block, image and image on mouse hover, image icon)

Also you can set post image as post background with gradient-colored overlay (Do not forget to disable post color background, to see image background)

Image is NOT background

Image IS background with Overlay

 

Then let's see on settings for Posts blocks:

These settings works for all elements in each post, but they are weaker than the settings of specific elements.

Here you can select settings for inside blocks each post, and for whole posts blocks.

Each block inside means:

Whole post block means:

Button

Here you can select settings for post buttons (+settings for button on mouse hover)

And, of course, select Button text and Icon, Links and its behaviour (open in new window or not, custom link, etc.)

Some examples of buttons, you can easily made with Iks Post Grid plugin:

WooCommerce

Here you can choose Content of WooCommerce for each post and enter texts like prefixes and postfixes for WooCommerce data.

And then Select CSS-settings for each line appearance, select Colors and Sizes of text

 

Sort

First of all, select taxonomies to sort by, Orderby and Order if you need it.

You can also provide Labels - it is text before sort and filters blocks. 

Set texts of "Reset" and "All" links (for taxonomies you can use placeholders, like %tax_name%, %tax_singular_name%, %tax_all_items%)

Then choose Type of Sort (List or Drop-down), choose icon, enable or disable Anchor (Should we scroll screen to the top of the grid after pressing sort link).

For Taxonomies Sort you can display Count of posts for each taxonomy using placeholder %count% (For example [%count%] will be displayed as [15], and =%count%= will be displayed as =15=) 

After all, you can select appearance settings for elements, using these settings

 

In "Each block CSS" settings you can choose, how to display these blocks:

 

 

Pagination

Here you can enable or disable pagination, then choose type of pagination: "Classic links", "Load more button" or "Infinite scroll":

Here you can also provide CSS settings for pagination Block.

After all you can select appearance settings for these types (+ setting for elements on mouse hover)

For "Load more button" and "Infinite scroll" you can set CSS settings for Button:

 

For "Classic links":

 

Developers

(Tab​ with icon "cog") 

Here you can add custom classes for HTML elements, provide Custom CSS and add Custom HTML content

Export / Import

(Tab with icon "floppy")

Here you can easily Import Settings of any post grid From File or Text-Area.

Export Setting of current post grid To File or from Text-Area

State

(Tab with icon "bars")

See all settings in current Iks Post Grid.

Templates

(Tab with icon "4 squar​es")

Here you can choose any template and import it (Note, that only appearance settings will be imported)

Also Import and Export settings, which only used for grid appearance.

Main Features of IksPostGrid

You can set computer’s, notebook’s and mobile’s screen widths. Then choose any number of columns, rows and also width beetween them
You can switch between classic and masonry grid’s types.
You can enable equal height for post content, so your posts will look ideally.
You can easily set any CSS for all elements in your post grid. Fields for Margins, Padding, Shadows, Borders, Texts and other CSS properties.
Iks Post Grid provides customizable content - change icons, labels, links, order, texts and much more else...
You can order your content as you wish. Easy drag-and-drop settings. Also you can enable or disable any block in one click.
You will be able to choose from any existing custom post types and taxonomies (e.g. WooCommerce). Also plugin supports custom post fields.
Iks Post Grid has live preview in admin dashboard so you will save much time creating post grids. Change any CSS and see all changes instantly.
Iks Post Grid is a very good choice for both simple users and advanced developers. Make great looking post grids as you wish!
You can enable or disable  fully customizable pagination: «Classic links» or «Load More» button. And also enable posts Sorting: «Classic list» or «Drop-Down»
WooCoommerce products posts support. Easilly enable or disable fully customizable prices, Sku, Total sales, Attributes, Add to Cart button etc.
You can choose any google fonts from more than 600 families and test them with a Live Preview!
You can switch between more than 20 starter templates at any time in just one click.
You can save your settings and import them to any other post grid. Also you can save and upload only appearance (template) settings, so you will be able to change appearance, but not loose your content.
You can see statistics of execution time and memory in plugin dashboard.
Yes, you will see all existing post types in post grid builder.
    Yes, you will see all existing taxonomies in post grid builder.
    Yes, you can create post grids with different content and different appearance. Also you can place more than one post grid at one page at the same time.
    Yes, all appearance templates are completely free and you can change it in one click.
    Yes, you can do it using file and textfield. Also you can export and import only appearance templates settings.
Yes, you can enable it or disable it in one click. Also you can set screen sizes of computers, laptops, tablets and mobile devices, and then select the number of columns and the distance between them, the width and alignment of the grid.

Here you can read descriptions of the main words

Wrapper for an HTML element (see example below)
HTML element (see example below)
 

 

The CSS margin properties are used to generate space around elements. The margin properties set the size of the white space outside the border. (Read more about it)
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.  (Read more about it)
The CSS border properties allow you to specify the style, width, and color of an element's border. (Read more about it)
The border-radius property is used to add rounded corners to an element.  (Read more about it)