Grid Layout Shock

Show multiple posts in a pinterest-like grid layout

Documentation contents

What is Grid layout shock

Grid layout Shock is a plugin for WordPress and jQuery. This plugin is based on the Pinterest idea, and allows to show multiple posts in a Pinterest-like grid layout presentation.

Advantages against other grid layout plugins

Among other advantages, we remark the following ones:

Boxes will adapt to any screen size, so grid will look good in any device.
External content
Embed youtube or vimeo videos, or embed your own videos from video tag.
Box adjustment:
Boxes adjust responsively thanks to Masonry JS plugin.
Create your own themes, include more fonts, etc.

Requirements for use

To have a proper performance of the plugin these are the minimum requirements.

Any of the following browsers are recommended:

Installation process

Include the files in your document head.

Getting Started

Create a section or div with an id. This will be the container for the grid

Create the next structure into a div or section.


  1. div: Container for your brick content.
  2. h1 - h6: content title
  3. img, video, iframe, or audio tags: You can use multimedia or embed youtube, vimeo videos.
  4. span: Here goes your content text. You can create links in this zone, change font style or font color.
  5. a: Used for show the read more button or text that you want.


Plugin Options

Assign a class to all grid elements. It's necessary for the grid. Default is article
this option assign a class to the span tag. Default is content
Enable or disable auto-adjust in boxes. Default is true
Can be set in pixels only. Enter the number of pixels you want each box to occupy.
Set the margin between boxes. Use an integer value for px or percentage (0 - 100%). Default is 10px.
Set the padding into boxes. Use an integer value for px or percentage (0 - 100%). Default is 10px.
Insert border radius to your boxes. Use values in px, percentage (%), inherit or auto. Default is auto.
boxStyle (Available in Premium Version)
Themes for your grid boxes. Admitted values: base, ninja, bonsai, dark, blue, orange, deepblue, stone, white, soft. Default is base. You can create your own themes into file using 'style' suffix.
buttonTxt (Available in Premium Version)
Write the text that will appear into read more button.
buttonStyle (Available in Premium Version)
Show the style in the read more button. Admitted values: info, warning, alert, success, default, primary, danger, inverse, link. Default value is default
Admitted values: small, large, mini, default, block
Assign a width to main div. Only available if masonry is deactive 'false'
Enter value in HEX, RGB, HSL or name Color.
Use values in px or percentage (%).
Use values in px or percentage (%).
fontType (Available in Premium Version)
Include amazing fonts in your content. Admitted values: 'arial', 'Wire One', 'Yesteryear', 'Yellowtail', 'Yanone Kaffeesatz', 'Volkhov', 'Varela', 'Ultra', 'Ubuntu', 'Syncopate', 'Sarina', 'Rokkitt', 'Monoton'
Use value in px.
fontTitle (Available in Premium Version)
Change the font in your title. Admitted values: 'arial', 'Wire One', 'Yesteryear', 'Yellowtail', 'Yanone Kaffeesatz', 'Volkhov', 'Varela', 'Ultra', 'Ubuntu', 'Syncopate', 'Sarina', 'Rokkitt', 'Monoton'
Enter value in HEX, RGB, HSL or name Color.
Enable or Disable title. Type: boolean
Enable or Disable Images. Type: boolean
Enable or Disable content. Type: boolean
Enable or Disable Read more button. Type: boolean
New themes have been included into plugin ics, iphone, gothic, modern, statusfive, folk, dragees, forest, labyrinth, fabric.

About Grid Layout Shock

Grid Layout Shock is created by the WordPress themes Shock team in January 2013.