Google Sheets WordPress Syncing
Displaying and syncing a Google spreadsheet (Google Sheets) on WordPress
There are certain conceivable situations where it would be ideal to be able to automatically display information that changes regularly on a WordPress page. Examples include a price list, menu, wine list, and the like.
How do you display the data on your website
There are multiple ways to do that, from very advanced to super simple.
Preparation for displaying a Google Sheet
- Create a Google Sheet with the desired information
- Take the width into account (a spreadsheet with 80 columns is difficult to display on a screen)
- Preferably choose no background (just white) so you don’t have problems with too much or too little color in the background.
- Decide whether you want lines between the columns or rows or not; a restaurant menu looks much better without lines.
- Consider the font size as it will appear on a website: 15 px or 16 px is a nice font height.
- It is wise to create a narrow blank column on the far left and right (otherwise the text will hit the edge).
- Once you are satisfied, go to File / Share / Publish to the web in Google Sheets.
- There, select ‘Entire document’ and ‘Web page’.
- Google Sheets will show you a URL. Save this!
- Make sure ‘Automatically republish after changes’ is checked. Test the URL in another browser window and check if the layout is to your liking.
- Here you can see an example of the Google spreadsheet.
Display Google Sheet via the EmbedPress plug-in
- Install the EmbedPress plugin (the free version is sufficient).
- Go to the correct page or create a new page.
- Place the EmbedPress Gutenberg block.
- Paste the URL into the field that appears, choose a width and height (900px for both is often fine), and save the page.
- View the page; the spreadsheet will appear.
- Don’t forget to check if it works as desired on mobile as well; sometimes you need to adjust the spreadsheet or the dimensions in the EmbedPress block.
- If you don’t see anything yet, it sometimes takes up to 5 minutes.
Display Google Sheet via the HTML block
- Go to the correct page or create a new page.
- Insert an HTML block.
- On the same page in Google Sheets where you retrieved the URL, you can also select ‘Insert’.
- You will then see an iframe code. Copy this code.
- Paste this code into the HTML field on your WordPress page.
- Now the HTML code needs to be adjusted slightly: After <iframe and before: src=”https://docs.google.com/…. insert this code: width=”800″ height=”600″.
- Then it will look like this: <iframe width=”800″ height=”600″ src=”https://docs.google.com/…etc
- You can, of course, adjust these dimensions in pixels.
- Save the page.
- View the page; the spreadsheet will appear.
- Don’t forget to check if it works as desired on mobile as well; sometimes you need to adjust the spreadsheet or the dimensions in the HTML block slightly. If you don’t see anything yet, sometimes it takes up to 5 minutes.
Note: If the layout is incorrect (for example, too far to the left on the page), place the HTML block in a container or a column and center it.
Below is a simple example of a Google spreadsheet on a WordPress page using HTML.
Conclusion
Naturally, in terms of layout and design, there are other (more elegant) solutions for publishing changing information. However, this solution is free of charge and enables a client to modify content without having access to the website. The only thing the client needs is a Google account.
Note
Of course, you can give each menu item (meat, fish, wine, etc.) its publication and its accordion.
Other solutions
Ninja tables (premium version), Tableberg tables, and Flextable can all read and display Google Sheets. Greenshift also has a block that can display Google Sheets on a webpage. The Great Restaurant Menu WP plugin is also ideal; however, it works without Google Sheets, and the editor requires access to the website.
