Shaken Grid Table of Contents

  1. Markup and Style
  2. Supported Web Browsers
  3. Setting Featured Images
  4. Image Dimensions
  5. Menu Management
  6. Widgetized Areas
  7. Theme Options
  8. Translating Into a Different Language
  9. Making Customizations or Removing Theme Elements
  10. Changing the grid column widths
  11. Updates

01 Markup and Style

The main stylesheet file (style.css) should not be edited. Instead, place custom css in a custom.css file in your theme folder

Shaken Grid is built on HTML5, CSS3, and a little bit of jQuery. The grid structure is controlled by the jQuery Isotope plugin. The main stylesheet file (style.css) should not be edited. If you have CSS customizations to make, add them to custom.css in the theme folder. These styles will overwrite the main stylesheet (and all other stylesheets). When updating your website, be sure not to overwrite your custom.css file.

02 Supported Web Browsers

Shaken Grid has been tested on all modern web browsers; Firefox 3.6.13, Chrome, and Safari. It has also been tested on Internet Explorer 8+ and will display similarly. IE7 and below is not supported.

04 Image Dimensions

WordPress will generate three 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

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.

Default Featured Image Size:
Max Width = 320px

“Tiny” Column Image:
Max Width = 145px

“Medium” Column Image:
Max Width = 495px

“Large” Column / Single post Image:
Max Width = 670px

Sidebar Thumbnail:
Width = 75px
Height = 75px

If, for some reason, you would like to alter these dimensions, you will need to edit the functions.php file and edit the code below the “Set featured image sizes” PHP comment (inside of the shaken_setup() function).

06 Widgetized Areas

Shaken Grid features 4 widgetized areas: Page sidebar, Unique page sidebar, Single post page sidebar, and Gallery Sidebar (homepage and archives).  To add widgets go to Appearance -> Widgets. To learn more about WordPress widgets, visit http://codex.wordpress.org/Appearance_Widgets_SubPanel.

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

07 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 Options link in the left sidebar of your WP-Admin under the Appearance tab.

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 check mark icon at the bottom right of the color-picker box. You can also manually type in your colors HEX value.

Setting a custom background

You can also change the background of your theme to an image or color. To do so, click on Appearance-> Background in the sidebar of your WP-Admin.

08 Translating Into a Different Language

An English translation file (.po) is included in the “languages” folder. You will need to create your own translation file for your own language and include it inside the languages folder. Please refer to the following link for information on how to create your own translation file: appthemes.com/blog/how-to-translate-a-wordpress-theme

09 Making Customizations or Removing Theme Elements

Please first create a Child Theme that will hold the files that you customize. This way, when you update your theme you won’t need to worry about overwriting the files that you’ve customized.

I’ve tried to make the code as user friendly as possible for those who want to make customizations to the theme and know a little bit about web development. If you would like to make customizations to the theme, please first create a Child Theme that will hold the files that you customize. This way, when you update your theme you won’t need to worry about overwriting the files that you’ve customized.

If you would like someone to take care of the customizations for you, please fill out the form at the following URL: http://shakenandstirredweb.com/customization

 

10 Changing the grid column widths

Please read the “Making Customizations…” section above before making customizations. If you would like to customize the width of the grid columns that are displayed on the main page, you will need to add custom CSS and edit the js/script.js file.

The CSS elements you need to customize the width for are .col1 .box-content, .col2 .box-content, .col3 .box-content, and .col4 .box-content. Check out the style.css file to see how they are currently set.

The grid columns depend on a strict set of calculations in order to be aligned properly. For example col2 is twice the width of col1, this includes the margins and padding.

For example, with the original calculations:

col1: 135px width + 20px padding + 20px margin = 175px column width

col2: 135*2 + 20 padding + 20 margin = 350px column width

The easiest way to customize the width is to determine the smallest column, which is currently 175px. You then need to find the multiples of this column to determine the widths of the larger blocks. Those widths (including padding and margins) are currently: 350px (175*2), 525px (175*3), and 700px (175*4).

After you’ve set the smallest column, you need to edit the js/script file and edit the defined width for jQuery Isotope, located in the following block of code:

// Init		
$('.sort, #sort').isotope({
	itemSelector : '.box:not(.invis)',
	transformsEnabled: false,
	masonry: {
		columnWidth : 175
	}
});

11 Updates

Updates may be released to fix bugs, improve compatibility with newer versions of WordPress, add new features, or all of the above. Update notifications will appear in your Theme Options page when they become available. To update your theme, you will need to use the download link that was sent to you when you first purchased the theme. Make sure to backup your original files before overwriting them, especially if you made customizations. Reminder: If you edited custom.css, do not replace it if you want to keep the modifications you made to the stylesheet.

If you are uploading the theme folder through the WordPress admin and it says that it can’t upload because the theme already exists, you will need to rename the folder you are uploading OR delete the current theme before uploading the new version.