• Shortcode
• Post Helper
• HTML 5 Drag & Drop
• Column Headings
• CSS Styling for Spreadsheets
• Selectors
• Stylesheets
• Table Sorter
• Supported Browsers
• Dependencies

Shortcode

After you have installed the plugin, go to the Write Page or Write Post form on your Wordpress blog and type the following where you want your document to appear:

[gdocs id='<doc-id>' type='document']

[gdocs st_id='<spreadsheet-id>' wt_id='<worksheet-id>' type='spreadsheet']

or

[gdocs st_id='<spreadsheet-id>' wt_id='<worksheet-id>' cell_id='<cell-id>' type='cell']

Replace <doc-id>, <spreadsheet-id>, and <worksheet-id> with the ID of the document or worksheet that you wish to embed. The ID’s are available at the plugin’s configuration page. Don't forget to enclose them in quotes.

When embedding a single cell, specify the coordinates of the cell in the worksheet as R<row number>C<column number, such as R6C4 for the cell in the sixth row and fourth column of the worksheet.

For example, the following shortcode:

results in the following:

More»

Post Helper

As of v0.5, you may embed a document or spreadsheet by simply clicking on its link in the Google Documents/Spreadsheets panel at the bottom of the page. This may be the preferred method as it relieves you of the technical task of typing the shortcode. Just place your caret where you want your document to appear and click on the title of your chosen document in the panel. This works in both Visual and HTML modes.

If the list of documents and spreadsheets shown in the panel is outdated, just click on the refresh button located at the top left-hand corner of the panel and an updated list will be retrieved immediately.

HTML 5 Drag & Drop

v0.7 introduces a new drag and drop functionality based on HTML 5 specifications. If your browser has native support for HTML 5 drag and drop events (at the time of writing, only Firefox 3.5), you can drag the document/spreadsheet from the panel and drop it in the textarea where you want it to appear.

Javascript needs to be enabled for this to work.

Column Headings

v0.5 also introduced 2 optional attributes for spreadsheets, namely headings and style (style will be described in detail in a later section.) Due to technical reasons, all the column headings retrieved from Google Spreadsheets have their spaces removed and characters converted to the lowercase. Furthermore, if a column heading is left blank on the Google Spreadsheet, the Google API will replace it with a random string of characters.

As a workaround, the user may supply the plugin with a string of comma-separated headings that will be displayed in place of the headings retrieved from Google Spreadsheets. The replacement works from left to right i.e. if you provide only one heading and the spreadsheet has 3 columns, the heading of the leftmost column will be replaced.

For example, the following:

[gdocs st_id='...' wt_id='...' type='spreadsheet' headings='N, N Power, Multiply']

results in:

CSS Styling for Spreadsheets

Selectors

All embedded worksheets are formatted as valid tables with the following structure:

	<table>
		<thead>
			<tr><th>...</th></tr>
		</tbody>
		<tbody>
			<tr><td>...</td></tr>
		</tbody>
	</table>

A typical table element has the following attributes:

<table id="gdocs_<spreadsheet-id>_<worksheet-id>" class="gdocs gdocs_<spreadsheet-id>">

A typical tr element has the following attributes:

<tr class="row_<x> <odd|even>">

A th element:

<th class="col_<x> <odd|even>">

Finally, a td element:

<td class="col_<x> <odd|even>">

Given the above markup, the following selectors are available:

Stylesheets

You may also define a new style class and specify it using the style attribute in the shortcode. Refer to the stylesheets in inline-google-docs/styles/ for examples.

For example, suppose you would like to define a new class named my-class for your tables. First, create a new CSS file in inline-google-docs/styles/ and name it my-class.css. (If you would like to use your own directory, specify the location of the directory in the plugin options page.) Then, specify the class in your shortcode, as follows:

	[gdocs st_id='...' wt_id='...' type='spreadsheet' style='my-class']

If you need to use images, create a new folder in inline-google-docs/styles and move my-class.css as well as all your images into this folder. Name this folder after your class.

Table Sorter

Inline Google Docs now includes tablesorter!

To use tablesorter with the default options, set sort to true in your shortcode, as follows:

	[gdocs ... sort="true"]

If you wish to configure tablesorter, simply include the parameters within braces in the sort attribute, as follows:

	[gdocs ... sort="{cancelSelection:false,...}"]

Certain characters, such as square brackets, will confuse the shortcode parser. If you have complex parameters, pass them through a Javascript variable, as follows:

	<script type='text/javascript'>
	  var properties = {cancelSelection:false, sortList:[[1,1]]};
	</script>
	[gdocs type='spreadsheet' st_id='twRDk9_BEs9E6Jevb82ETvw' wt_id='od7' style='tablesorter' sort="properties" headings='A, B, C, D, E, F, G, H']

Note: You only need to use the sort attribute once. If you use sort="properties", you don't have to use sort="true".

v0.8 also includes the default blue theme; set style="tablesorter" to use it to style your tables.

tablesorter Configuration»

Supported Browsers

This plugin has been tested on IE 7, IE 8, Chrome, Firefox 2, Firefox 3, Firefox 3.5, Opera 9, and Safari 3. If you are using another browser, please update this wiki if it works and post a new issue if it doesn’t.

Dependencies

Requires

• PHP 5
• Javascript
• Wordpress (>2.7 recommended)
• Prototype (usu. included in Wordpress package)
• jQuery (usu. included in Wordpress package)