How to Embed Google Sheets to WordPress (Tables and Charts)

Need to embed Google Sheets to 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.

How Visualizer helps you embed Google Sheets to WordPress

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:

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.

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:

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.

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 Google Sheets to WordPress, you should choose the Import data from URL option and select One time import:

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:

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:

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:

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

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:

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

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:

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:

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:

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:

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:

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:

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:

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!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Keep reading the article at ThemeIsle Blog. The article was originally written by John Hughes on 2020-03-26 05:13:00.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.