Plugin Directory

Test out the new Plugin Directory and let us know what you think.
!This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.


Use Gridster to manage your content with ease in a customizable grid.

How can I customize the layout of the Gridster Widgets on the frontend?

There a some CSS classes you can use

  • .gridster-not-loaded is appended to the <body> element, when a shortcode is found on the current page
  • .gridster-loaded replaces the former mentioned .gridster-not-loaded body-class, when Gridster Javascript is successfully loaded
  • .gridster-wrap is the wrapper for the whole shortcode output
  • .gs_w is the generic class aplied to every Gridster Widget

How to avoid the loading of `gridster_frontend.css`

The Plugin comes with minimal styling for the Gridster Markup, but maybe you'll add theese few lines of CSS to your own theme stylesheet to reduce server requests. Just set the constant GRIDSTER_FRONTEND_CSS to false in your themes functions.php file.

 *  Do not use gridster frontend styles
define( 'GRIDSTER_FRONTEND_CSS', false ); 

How to get best fitting image-sizes to work?

Gridster uses the generated images used as post-thumbnails by default. When you add existing content to a new gridster, the plugin will look for the best fitting image size, according to the width and height of your current gridster-widget. So if you have defined the base width to 100px, base height to 100px and your margins to 10px, the plugin will look for images of 100 * 100 px.

Now, when you resize this gridster-widget to, let's say, 1 row with 2 columns, the plugin will reload this gridster-widget with an image of 220 * 100 px. To avoid ugly cropping or unwanted scaling of the post-thumbnails, you go best with defining some additional post-thumbnail sizes within your functions.php like so.

 *  Add some additional post-thumbnail sizes, that can be used by the Gridster Plugin
 *  e.g. we have base-width: 100px, base-height: 100px and margins both 10px
 *  @see    http://codex.wordpress.org/Function_Reference/add_image_size              
if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'gridster-1col-1row', 100, 100, true ); 

    add_image_size( 'gridster-2col-1row', 220, 100, true ); 
    add_image_size( 'gridster-3col-1row', 340, 100, true );
    add_image_size( 'gridster-4col-1row', 460, 100, true );

    add_image_size( 'gridster-1col-2row', 100, 220, true );  
    add_image_size( 'gridster-1col-3row', 100, 340, true );      
    add_image_size( 'gridster-1col-4row', 100, 460, true );                

  /** ... and so on ... */

Do you have some question?

Drop me a line at gridster@carsten-bach.de

Requires: 3.3 or higher
Compatible up to: 3.6.1
Last Updated: 4 years ago
Active Installs: 300+


3 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

50,2,1 100,1,1 100,1,1 50,2,1 100,1,1 100,3,3