Shaken Grid Premium Download

Shaken Grid Premium is now free of charge!!!

You can download the Shaken Grid Premium theme from here:
Shaken Grid Premium v 1.0 – Click to Download
Shaken Grid Premium v 1.3 – Click to Download

Documentation (last updated 10.6.2010)


Markup and Style

Shaken Grid is built on HTML5, CSS3, and a little bit of jQuery. The grid structure is controlled by the jQuery Masonry plugin. The main CSS file (style.css) is heavily commented and includes an index at the top to help users navigate through the styles. If you have customizations to make, I recommend adding the CSS changes to skins/custom.css and then activating the Custom skin under the theme options. While Shaken Grid uses cutting edge techniques, less-cool web browsers (Internet Explorer) are still supported, which leads us to our next section.

B) Supported Web Browsers

Shaken Grid has been tested on all modern web browsers; Firefox 3.6.6, Chrome, and Safari. It has also been tested on Internet Explorer 8 and will display similarly (although lacks the CSS3 visual enhancements).

C) Image Dimensions

Shaken Grid supports the post-thumbnail/featured image feature built into WordPress. By using this method, it will generate five versions of the image you upload, all sized to the correct dimensions for the different parts of the site that it may show up on.

  • “Tiny”: Max width = 135
  • “Default”: Max width = 310
  • “Medium”: Max width = 485
  • “Large”: Max width = 660
  • Sidebar Thumbnail: 75 x 75

D) Setting featured images

Adding featured images to your posts is extremely easy. Simply follow the steps below:

  1. On the Write -> Post page, find the “Featured Image” box (usually on the right sidebar) and click theSet featured image link.
  2. Upload your featured image and then click Use as featured image. WordPress will then automatically create images with the correct dimensions.

E) Menu Management

To create a custom menu for your header navigation and include custom links and category links go to Appearance -> Menus. Create your menu, save it, and then assign it to the “Header Menu” in the Theme Locations box on the left sidebar (see screenshot).

I. Categories Drop-down

To create a Categories drop-down list like in this theme demo, add a custom link with the label of “Categories” and with the URL set to “#” (without the quote marks and without http:// in front of it). Then, add your categories to your menu and drag them underneath the Categories link.

II. Adding the drop-down indicator graphic

To add the small arrow to the right of a link in your menu, follow these steps:

  1. Click the “Screen Options” tab at the top right of your screen to drop-down several check boxes.
  2. Underneath of “Show advanced menu properties”, click the check box next to “CSS Classes”
  3. Click the expand arrow next to the link which you want to add the graphic to
  4. In the box below “CSS Classes”, write “parent” (without the quote marks)

F) Widgetized Areas

Shaken Grid features 4 widgetized areas: Page sidebar, Unique page sidebar, Gallery sidebar, and Single post page sidebar. To add widgets go to Appearance -> Widgets. To learn more about WordPress widgets, visit

Shaken Grid comes with the 8 unique widgets listed below (in addition to WordPress’s default widgets):

  1. Simple Ad Spots – Configure and display up to four 150×150 sidebar advertisements.
  2. Category Posts – Display a list of posts from a certain category.
  3. Flickr – Display your latest photos from your Flickr account.
  4. Popular Posts – List your most popular posts
  5. Related Posts – This widget will only work on single blog post pages and will display posts related to the current post being displayed.
  6. Testimonial – Display a stylized testimonial with citation
  7. Twitter – Display your latest tweets from up to two Twitter accounts.
  8. Share Buttons –Add social network share buttons to your sidebar

G) Theme Options

Shaken Grid comes with a theme options panel where you can customize your theme without touching any code. To customize your theme, click on the Theme Optionstab (below the Comments tab) in the left sidebar of your WP-Admin.

I) Selecting Colors

To change a color of a specific element you can use the color-picker built into the theme options panel. To do so, click the input box and select the color you’d like and then click the rainbow colored circle icon at the bottom right of the color-picker box. You can also manually type in your colors HEX value.

H) Support & Feature Requests

The theme is provided as is. You are free to make modifications to it.