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-123456'; //alternatively use `.post-grid` for a less targetted approach
	
	var $my_grid = {};
	var $grid_items = {};
	var grid_items_width = 0;
	
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
		
		//sometimes the width is set inline, so copy its orginal value before results are replaced
		
		$my_grid = $(my_grid_id);
		$grid_items = $my_grid.find('.grid-items');
		
		if($grid_items.length>0){
			if ($grid_items.prop("style")["width"] !== ''){
				grid_items_width = $grid_items.width();
			}
		}
	});
	
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		
		$my_grid = $(my_grid_id);
		$grid_items = $my_grid.find('.grid-items');
		
		if($grid_items.length>0){
			
			//restore the width, if there was one set
			if(grid_items_width!=0){
				$grid_items.width(grid_items_width);
			}
			
			//re-init masonry
			$grid_items.masonry({});
		}
	});
	
}(jQuery));