WordPress with Google Sheets - SheetDB - Google Sheets REST API

Display Google Sheets data in a WordPress site

If you have data from a Google Spreadsheet that you want to show to your users, SheetDB have great Library for that. To install it go to your WordPress Dashboard. Then go to Plugins > Add New and search for: SheetDB

You can also download and install it manually, the plugin page is here: https://wordpress.org/plugins/sheetdb/

Install WordPress SheetDB API Plugin

From now on, you can use it like our handlebars library. You can also use the Square Brackets syntax to feel more WordPress like.

Let's make a simple table using this spreadsheet: https://docs.google.com/spreadsheets/d/1mrsgBk4IAdSs8Ask5H1z3bWYDlPTKplDIU_FzyktrGk/edit

To display the content, add the shortcode like this:

[sheetdb url="https://sheetdb.io/api/v1/YOUR_API_ID"][/sheetdb]

Content from within will be rendered as many times as there are rows in the spreadsheet (excluding the first row, which are column names). Each time a new row is rendered, you can refer to any value using the braces notation: {{column_name}}. Of course you can use html to style the result. Using {{name}} renders plain text only (HTML is escaped). To render safe HTML, use {{html:name}} — unsupported or unsafe tags/attributes are sanitized.

[sheetdb url="https://sheetdb.io/api/v1/58f61be4dda40"]
{{id}} – {{name}}<br>
[/sheetdb]

The result of this code is here:

{{id}} – {{name}}

Additional attributes

You can use following optional attributes:

  • limit – The number of rows that should be returned
  • offset – Row from which it should start (how many rows to skip)
  • search – You can search for specific data in your sheet. If you want to use more than one condition join them using & symbol. Example: search="name=Tom&age=15"
  • sheet - Specify the sheet (tab) you want to work with
  • sort-by – The column you want to sort by
  • sort-order – sort in asc or desc order
  • element - the element that will contain all content, defaults to div

HTML rendering and safety

  • Using {{name}} renders plain text. Any HTML is escaped and will not be executed or rendered.
  • Using {{html:name}} allows most safe HTML tags to render (e.g. a, p, ul, li, strong, em, img etc. with safe attributes). Potentially dangerous tags and attributes (e.g. <script>, <iframe>, <object>, <embed>, inline on* event handlers, and javascript: URLs) are stripped/sanitized.

This behavior is intentional for security reasons to prevent XSS and code injection from spreadsheet content.

Security

For best security, configure your SheetDB API as read-only: enable only GET and disable POST, PATCH, and DELETE in your API settings. This prevents anyone from modifying your data via exposed API URLs or keys.

Query strings and slots

You can also use query strings and slots. More information on Plugin site, on our post about JS library and in the documentation.

Your content will always be up to date. A Google spreadsheet is a nice place to store backend data, you can share it with anyone and everyone knows how to use it ;)

Video

Have question?

If you have any questions feel free to ask us via chat or .

Good luck!

Code to display Google Spreadsheet content