How to show data from Google Spreadsheet in a Wordpress site

Agata Urbańska
Sheetsu
Published in
3 min readAug 24, 2017

There might be situations where you need to show data that is changing quite often and you don’t want to edit it every time in a Wordpress. Or, some 3rd party tool is updating your data in a Google Spreadsheet and then you are asking yourself - how can I show this data on a simple Wordpress site?

It’s easy with Sheetsu. All you need to have is a Wordpress website and a Google Spreadsheet with data you want to show.

Where to start?

Create a new account on Sheetsu if you are not a member yet. On your dashboard go to SNIPPETS and generate a new one.

Sheetsu snippets dashboard

You will be redirected to a page where you can find most suitable snippets for your website. Let’s start with a Simple Table.

It’s pretty easy to install it by yourself, but if you have a more difficult case don’t waste your time and contact us - Sheetsu team will help you immediately.

Sheetsu created a Simple Table snippet on your dashboard. Copy URL, so you can see the Google Spreadsheet behind it.

Simple Table on dashboard
Spreadsheet with Simple Table

Your Simple Table in a Google Spreadsheets. It’s filled with our random (Star Wars ftw! 🚀). Let’s change it to your data.

Don’t change row 1 in the spreadsheet. It tells Sheetsu script about the column names. If you want to have less or more columns in a table, just remove them from the Google Spreadsheet file AND remove (or add) the proper line to the part of the code.

Headers of the table are in the second row of the Google Spreadsheet. We wrapped it in the <b></b> HTML block, to make it bold. Feel free to change them.

Play along with the rest of the spreadsheet.

Set up a table on a website

You’ve:
- created an account with Sheetsu
- generated a table snippet
- modified the table content

It’s time to insert Simple Table snippet into Wordpress website. To do that:
- login to your Wordpress admin panel
- go to Appearance, then Editor
- in Templates open Theme Footer
- paste the following line of code before the </body> tag:

Theme Footer edition

Copy previously generated snippet of a Simple Table and paste it into Post or Pages. Remember to use text mode! It’s critical you paste HTML into HTML.

Wordpress Page editing in text view

Done! 💥💥💥

Simple Table on website

Now what?

Change your table as you want - add columns, remove rows, update or delete records. Have fun with editing!

The process of adding other snippets (testimonials, agendas, contact forms, pricing tables) is actually very similar to this one.

It’s easy and fast whether you are a serious web developer or an amateur just starting your adventure with website building.

Drop us an email at team@sheetsu.com. We are happy to talk with you.

--

--