Documentation

Post Grid

Get it here

The Post Grid Plugin allows you to display your posts (any post type) in a grid format, or masonry layout – without needing to know a single line of coding!

Setup is quick and painless

  • Install Post Grid Plugin
  • Create your Grid in the plugin settings, but don’t worry about Query Post tab, Search & Filter replaces these settings
  • Add the Post Grid shortcode as you would usually, and tell S&F to filter that query by adding a Search & Filter shortcode with action filter_next_query to your page:
    [searchandfilter id="123456" action="filter_next_query"]
    [post_grid id="123456"]

    Replace “123456” with the ID of your search form, and post grid respectively

  • Add the Search & Filter form to your page using the shortcode or by adding a widget – [searchandfilter id="123456"]
  • In your search form, under Display Results tab, choose Custom Display Method, and enter the Full URL of the page with the Post Grid shortcode on
  • Make sure Lazy Load is disabled in the Post Grid Layout Settings
  • Make sure Offset is set to 0 (zero) in the Post Grid Query (this is the default setting)

That’s it you’re good to go! 

Using Ajax

In your Search Form, under Display Results, use the following settings:

  • Enable Load Results Using Ajax
  • Set Ajax Container to either .post-grid or #post-grid-123456 (changing 123456 for your grid ID)
  • Set  Pagination  Selector to .pagination a

Masonry & Ajax

When results get loaded in via Ajax, masonry is not usually applied.  To enable masonry with Ajax, add this JS code to your theme (remember to update the Grid ID):

(function ( $ ) {
	"use strict";
	/* Replace the ID `123456` with the ID of your grid */
	var my_grid_id = '#post-grid-15374'; //alternatively use `.post-grid` for a less targetted approach
	
	var $my_grid = {};
	var $grid_items = {};
		
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		
		$my_grid = $(my_grid_id);
		$grid_items = $my_grid.find('.grid-items');
		
		if($grid_items.length>0){
			if($grid_items.hasClass("masonry")){
				$grid_items.removeClass("masonry");
				$grid_items.masonry('destroy');
			}
			$grid_items.removeAttr('style');
			$grid_items.masonry({isFitWidth: true});
		}
	});		
}(jQuery));

Infinite Scroll

Setting up infinite scroll requires a few settings changes:

In your search form:

  • Under Display Results, set Pagination Type to Infinite Scroll
  • Set Post / Result Selector to: div.item
  • Set Infinite Scroll Container to .grid-items

In your Post Grid:

    • Under Navigations set Pagination to None
    • To completely hide the footer, add the CSS to your theme (replace `15374` with your grid ID):
      #post-grid-15374 .grid-nav-bottom{ display:none; }

Caveats

When using infinite scroll with Masonry, you won’t be able to use our loading icon, to do that, masonry would need to be reloaded when the icon is added, and again when it’s removed.

Instead, you can create your own loading icon anywhere on the page with some simple JavaScript, hooking on to our ajax events: sf:ajaxstart and sf:ajaxfinish – more info in our FAQs about these events.