Connect Google Sheets to WordPress Without Plugins – Beginner Tutorial

WordPress is a versatile platform used by everyone from developers to bloggers. While those with development knowledge can unlock its full potential, even beginners can achieve a lot with it. In this guide, I’d like to show you a simple yet powerful technique: how to use a Google Spreadsheet as a lightweight database and display its contents on a WordPress site.

Why use a spreadsheet instead of writing directly in your blog? If you only need to show basic text once, sure, you can just write it directly into your WordPress page. But what if you want to display the same data across multiple pages — and update it frequently? In that case, editing every page manually becomes a hassle. By using a Google Sheet as your data source, you only need to update the spreadsheet — and the data on all connected pages updates automatically.

Here’s how and when this method can be useful:

1. When Is This Useful?

• To display data that changes regularly.
  For example, if product prices change, you only have to update the spreadsheet, not each page individually.
• To show the same information across multiple pages.
  Like event dates shown on several pages — just update the spreadsheet once.
• To display processed data from APIs.
  For instance, earthquake data pulled into the sheet via an API, then filtered (e.g., only the past week’s quakes) and displayed on WordPress.

2. Features and Limitations

• No coding knowledge required.
  Once the setup is done, you just manage everything through the spreadsheet.
• Simple to maintain.
  Paste the code into WordPress once; after that, managing content is easy.
• Unclear SEO benefits.
  Since the data is loaded via JavaScript, some search engines (like Bing) might not index the content properly.
• Scalability issues.
  High traffic could overwhelm the method depending on how it’s implemented.
• Security concerns.
  Since the spreadsheet must be shared via a public URL, never include confidential or sensitive information.

In this example, we’re using WordPress’s “Twenty Twenty-Four” theme. We also recommend avoiding cache-related plugins during this process, as they may interfere with how data is loaded.

3. Workflow – How to Connect Google Sheets to WordPress

1. Create a spreadsheet and generate a public CSV sharing link.
2. Write the HTML and JavaScript code to fetch and display the data.
3. Insert the spreadsheet link into the code.
4. Paste the code into your WordPress page or post.

4. Step 1 – Creating the Spreadsheet

As an example, let’s say we’re displaying event data with 3 columns:

• Column A: City name
• Column B: Date
• Column C: Event name

Once the sheet is ready, go to the sharing settings and enable link sharing as a CSV file. Copy the link — you’ll need it in the next step.

5. Step 2 – Embedding the Code

We’ll create HTML and JavaScript to fetch the CSV data and inject it into a <div> on the WordPress page. The script uses async () to load the data, then maps each cell to the appropriate HTML element. We also use <style> to apply basic formatting.

You can customize how the data appears — display it in a table, turn fields into clickable links, etc. If you’re unsure how, tools like ChatGPT can help you write or modify the code to suit your needs.

<div id="spreadsheet-data-container">
    <p>Loading data...</p>
</div>

<script>
(async () => {
    const csvUrl = 'YOUR_PUBLIC_SPREADSHEET_CSV_URL_HERE'; // ★ REPLACE THIS WITH YOUR PUBLIC CSV URL ★

    const container = document.getElementById('spreadsheet-data-container');
    container.innerHTML = ''; // Clear initial message

    try {
        const response = await fetch(csvUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const csvText = await response.text();

        // Simple function to parse CSV data
        // NOTE: For more complex CSVs (e.g., data containing commas or newlines), a more robust parser is required.
        const rows = csvText.split('\n').map(row => row.trim()).filter(row => row.length > 0);

        // To skip the header row (if the first row of your spreadsheet is a header)
        // const dataRows = rows.slice(1); // Skip the first row
        const dataRows = rows; // Treat the first row as data

        dataRows.forEach(row => {
            const columns = row.split(',').map(col => col.trim());

            // Check if A, B, and C columns exist
            if (columns.length >= 3) {
                const aCol = columns[0];
                const bCol = columns[1];
                const cCol = columns[2];

                const itemDiv = document.createElement('div');
                itemDiv.className = 'spreadsheet-item'; // Add class for styling

                const h3 = document.createElement('h3');
                h3.textContent = aCol;
                itemDiv.appendChild(h3);

                const dateP = document.createElement('p');
                dateP.textContent = `Date: ${bCol}`;
                itemDiv.appendChild(dateP);

                const singerP = document.createElement('p');
                singerP.textContent = `Singer: ${cCol}`;
                itemDiv.appendChild(singerP);

                container.appendChild(itemDiv);
            }
        });

    } catch (error) {
        console.error('Error fetching or parsing CSV:', error);
        container.innerHTML = '<p style="color: red;">Could not load data. Please check the URL.</p>';
    }
})();
</script>

<style>
/* Add styles as needed */
.spreadsheet-item {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}
.spreadsheet-item h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}
.spreadsheet-item p {
    margin: 5px 0;
    color: #555;
}
</style>

6. Step 3 -Insert Your Spreadsheet Link into the Code

Next, you’ll paste the link from your spreadsheet into the code you prepared in step 2.
Find the placeholder line:

const csvUrl = 'YOUR_PUBLIC_SPREADSHEET_CSV_URL_HERE';

Replace it with your actual sharing link. For example:

const csvUrl = 'https://docs.google.com/spreadsheets/d/e/1PACX-testesttesttesttesttestesttesttesttesttesttestest_xxxxxxxxxxx_wwwwwwww/pub?gid=0&single=true&output=csv';

7. Step 4 – Embedding into WordPress

Now it’s time to place the final code on your WordPress site.

• Open the post or page where you want the data to appear (it can be a regular post, a fixed/static page, or any section that allows custom HTML).
• Add a Custom HTML block.
• Paste the code you created in step 3 into this block.
• Save and publish the page.

That’s it!

8. Testing and Confirmation

Once you’ve published the WordPress page, you should see your sample data displayed.

Whenever you update the content in the Google Sheet, the changes will also appear on your WordPress page — but only when a visitor loads the page again. Keep in mind that there might be a short delay before updates are reflected, depending on caching or browser behavior.

9. Conclusion

Using a Google Spreadsheet as a lightweight database and displaying its contents in WordPress is surprisingly easy. While it’s not suitable for large-scale or high-security use cases, it can be incredibly effective for small websites or teams without a developer.

It’s a practical, low-tech way to keep your site dynamic and efficient — especially when you need to manage frequently updated content across multiple pages.

If you’re running a website on a budget or working solo, this technique could save you a lot of time. Give it a try!

• LLM and LLMO: How AI Is Reshaping the Future of Search and What It Means for SEO
• SEO Basics: What You Need to Know About Crawling, Rendering, and Indexing
• Easily Add a Full-Screen Intro Video to Your WordPress Site