WordPress.org

Author: Lim Jiunn Haur

Many people maintain dynamic content on Google Documents or hold volatile data on Google Spreadsheets. These change when collaborators save an update or users submit a form. Occasionally, one may wish to embed the contents of one's Google Documents or Spreadsheets in a post/page to reflect the latest updates on one's blog. This plugin seeks to provide this functionality without using an iframe. In addition, it caches contents of the Google Documents or Spreadsheets to speed up page loading.

Currently, the plugin can only access published Documents, but can access both private and public Spreadsheets.

To begin using the plugin, follow the steps outlined under "Installation" (click on "Installation" above). Then, go to the "Write Page" or "Write Post" form on your Wordpress blog and type the following:

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

or

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

Replace doc-id, spreadsheet-id, and worksheet-id with the ID's provided on the plugin configuration page. Don't forget to enclose them in quotes.

As of v0.5, an Inline Google Docs panel is available on the "Write Page" and "Write Post" forms. This panel allows users to embed a Google Document/Spreadsheet by clicking on a link in the panel, thus relieving them of the technical task of typing the shortcode. This works in both Visual and HTML modes. If the list of documents and spreadsheets shown in the panel is outdated, just click on Update list at the top left-hand corner of the panel and an updated list will be retrieved without leaving the page.

v0.5 also introduced 2 optional attributes, namely headings and style (style will be described in detail in a later section.) Due to technical reasons, all of 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. An example is as follows:

[gdocs st_id='...' wt_id='...' type='spreadsheet' headings='First Col, Second, Third']

Styling tables

There are 2 ways to style your tables.

The first way is to specify CSS styles for each table separately. Here's how to select the different table elements:

1. Select all spreadsheets: table.gdocs
2. Select all worksheets of a particular spreadsheet: table.gdocs_<spreadsheet-id> e.g. table.gdocs_pkW3HTGwg6SDbucCgANRiPw
3. Select a particular worksheet: table#gdocs_<spreadsheet-id>_<worksheet-id> e.g. table#gdocs_pkW3HTGwg6SDbucCgANRiPw_od7
4. Select a particular column across all spreadsheets: td.col_<x> e.g. td.col_1
5. Select a particular column: prepend the selectors in 1., 2., 3., to the selector in 4. e.g. table.gdocs_pkW3HTGwg6SDbucCgANRiPw td.col_1
6. Select a particular row across all spreadsheets: tr.row_<x> e.g. tr.row_1 or tr.row_0 th
7. Select a particular row: prepend the selectors in 1., 2., 3., to the selector in 6. e.g. table.gdocs_pkW3HTGwg6SDbucCgANRiPw tr.row_1
8. Select a particular cell across all spreadsheets: tr.row_<x> td.col_<y> e.g. tr.row_2 td.col_2
9. Select a particular cell: prepend the selectors in 1., 2., 3., to the selector in 8. e.g. table.gdocs_pkW3HTGwg6SDbucCgANRiPw tr.row_2 td.col2

The second way is to create a new style class and specify it using the style attribute in the shortcode. Please refer to the stylesheets in gdocs/styles/ for examples. To use this method, create a stylesheet in gdocs/styles/ and prepend all style selectors in this new stylesheet with gdocs.<class-name> e.g. gdocs.acuity. Make sure you name your file using the class name as well. If you need to link to external images, create a folder in gdocs/styles/ and name it using the class name. Then, move your images and CSS file into the new folder. Finally, specify the style you desire in your shortcode, as follows:

[gdocs st_id='...' wt_id='...' type='spreadsheet' style='<style>']

For example,

[gdocs st_id='...' wt_id='...' type='spreadsheet' style='acuity']

If you have tried this plugin, please leave feedback at my blog. Thanks!