Embed Google Sheets to WordPress

Need to embed Google Sheets into WordPress? In this post, we’ll teach you how to add Google Sheets data to WordPress in two ways:

  1. Visual charts – use a Google Sheets spreadsheet to generate bar graphs, line graphs, pie charts, and lots of other formats.
  2. Tables – embed a Google Sheets spreadsheet as a responsive table, along with useful features like search and filters.

We’ll show you step-by-step how to do this using the free Visualizer plugin – no code required.

Embed Google Sheets with Visualizer

Full disclosure – Visualizer is a Themeisle plugin. It lets you pull data from Google Sheets (and other sources) and transform it into a professional-looking graph or table on your WordPress site.

In addition to creating basic data tables, Visualizer also gives you access to a broad range of charts and table styles. All you have to do is format the data in a way the plugin can understand, and it’ll generate ready-to-go graphs for you:

A combo chart built using Visualizer.

Visualizer can also help you include tables with advanced features such as pagination, internal search, and filtering. That means even if the data you’re importing already uses a table, the plugin can still help you make it more user friendly.

Importing Google Sheets as a table on WordPress

With the premium version, you can even auto-sync charts – as you update your data in Google Sheets, those changes will automatically sync with your WordPress site.

How to add Google Sheets to WordPress using Visualizer (in three steps)

If you want to follow this tutorial, you’ll need two things:

  1. Your existing data in Google Sheets.
  2. The free Visualizer plugin. You’ll want to install and activate it before continuing with the tutorial.

Step 1: Add a new chart and select which style to use

With the plugin active, you’ll get access to a new Visualizer tab within your dashboard. If you click on it, you’ll see a list of all your existing charts. Click on the Add New button at the top to get started:

Adding a new chart.

The first thing you need to do is select a style for your Google Sheets data. Which one you should choose will depend on your data and what you want readers to take away from it:

  • To embed a data table, choose the Table chart style.
  • To embed visual charts, you can choose from a range of different chart styles.

For a visual chart, you’ll want to pick the style that will best help you visualize your Google Sheets data. CodeinWP has some good tips on how to choose the right chart style for your data.

Creating a new pie chart from Google Sheets on WordPress

Step 2: Import the data from Google Sheets

Using the free version of Visualizer, you can import data from a .csv file, a URL, or input it manually. To add data from Google Sheets, you should choose the Import data from URL option and select One time import:

Importing data from a URL.

Keep this tab open for now and head to Google Sheets to get your data. Let’s say you have a very simple table that shows you various quantities of fruits:

A simple Google spreadsheet.

The data is pretty simple to understand, but you’re going to need to give the Visualizer plugin a bit more context so it understands how to display it. To that end, the plugin supports multiple strings it uses to categorize data, including:

  • string
  • number
  • boolean
  • date
  • time date
  • time of day

For this example, all we need are strings and numbers. You can let the plugin know which column represents which element by adding those two strings at the top, right below the column title:

Adding strings to our Google spreadsheet.

Now the data is ready for the plugin to do its work. To generate the URL that you need for WordPress, open the Google Sheets File menu and select Publish to the web:

Publishing Google Sheets to prepare it for WordPress

In the menu that pops up, select Entire Document and Comma-separated values (.csv), then hit the Publish button:

Publishing Google Sheets to the web to import into WordPress

Now, Google Sheets will give you a link you can use to share your data. Copy the link and return to the Visualizer wizard in WordPress. Paste it into the corresponding field:

Importing data from Google Sheet to WordPress.

Click on the Import button and the plugin will automatically generate a preview of the chart or table to your left:

A preview of your new chart.

Finally, select the Create Chart button and Visualizer will save the graph to your library.

The same process above works for any of the charts, graphs, or tables that Visualizer lets you create. Below is the default table, prior to importing Google Sheets data:

Creating a table using Visualizer.

Visualizer also enables you to sort elements within your tables depending on their values.

At any point, you can check out your available graphs, charts, and tables by navigating to Visualizer > Chart Library:

Checking out your existing Visualizer charts.

If you want to modify any of the data visualizations you create using the plugin, there’s an edit button under each of them.

Step 3: Display your new chart in WordPress

Now that you’ve successfully imported your Google Sheets data into WordPress and used it to generate a chart or table, it’s time to publish it.

There are two ways you can add visualizations to your posts or pages:

  1. Shortcodes
  2. Blocks

If you look closely, you’ll notice a shortcode under each table or chart:

The Visualizer library.

You can copy that shortcode and place it anywhere you want on your website.

The second approach is to open the Block Editor and add a Visualizer Chart block to your post or page:

Adding a Visualizer Chart block to your posts.

The editor will ask if you want to display an existing chart or create a new one. If you select the former option, you’ll see a list of all your available charts – go ahead and select one:

Embedding a chart using the Block Editor.

Once the chart is in, you can edit the block as you would any other. The Visualizer plugin enables you to customize your charts on the go, including their layout and style:

Configuring your pie chart using the Block Editor.

Each type of chart has its own specific settings you can tweak to customize it. For instance, with a table, you can customize the pagination options, and enable responsiveness so it will be readable on mobile devices:

An embedded Visualizer table on WordPress from Google Sheets

Keep in mind that if you’re using the free version of the plugin, your charts and tables won’t update automatically if you make changes to the source spreadsheet in Google Sheets. You’ll need to generate a new URL using Google Sheets if you want to make an update.

Conclusion

Spreadsheets might not be sexy, but visual representations of them certainly can be. Using the right tool, you can easily pull data from Google Sheets to WordPress and, in the process, display it in a way your visitors will be able to grasp at a glance.

With the free Visualizer plugin, you can accomplish this exact process in three steps:

  1. Create a new chart or table and select what style to use.
  2. Import the data from Google Sheets.
  3. Edit and display your chart within WordPress.

If you want to automatically sync Google Sheets with WordPress and get access to other new features, you can also upgrade to the premium version of Visualizer.

For more on how to work with tables and charts on WordPress, check out our collections of the best:

Do you have any questions about how to embed Google Sheets to WordPress? Let’s go over them in the comments section below!

Yay! 🎉 You made it to the end of the article!

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!