How to Retrieve Data from Firestore and Display on WordPress
Tags: wordpress, firebase, tutorial, webdev
Published: 2019-11-02 17:43:13



---
description: I wrote a Plugin to integrate Firebase to WordPress a long time ago, but haven’t put a proper guide on how to use it yet. In this tutorial, I will show you how to retrieve the database from your Firestore and display it on the WordPress website.
---

> If you are interested in the Integrate Firebase PRO version, read the fully updated documentation: https://firebase-wordpress-docs.readthedocs.io/

+ Article 1: How to integrate Firebase to WordPress
+ Article 2: [How to Retrieve Data from Firestore and Display on WordPress](https://dev.to/dalenguyen/how-to-retrieve-data-from-firestore-and-display-on-wordpress-abj?id=199634)
+ Article 3: [How to Work With Firebase Custom Claims in WordPress](https://dev.to/dalenguyen/how-to-work-with-firebase-custom-claims-in-wordpress-4913?id= 211659)

I wrote a Plugin to [integrate Firebase to WordPress](https://github.com/dalenguyen/firebase-wordpress-plugin) a long time ago, but haven’t put a proper guide on how to use it yet. So I start updating some tutorials on how taking advantage of the Integrate Firebase plugin for your WordPress website.

In this tutorial, I will show you how to retrieve the database from your Firestore and display it on the WordPress website. Before that, make sure you have:

+ Install and active Integrate Firebase plugin
+ Update the firebase configuration on the Firebase dashboard
+ Make sure that Firebase security rules allow you to access the document with or without logging in

## Step 1: Create a custom shortcode

You can do this by edit functions.php in your current theme

```
// functions.php

// custom firebase short code 
function custom_firebase_func($atts)
{
    return "<div id='custom-firebase'>Test</div>";
}
add_shortcode('custom_firebase', 'custom_firebase_func');
```

Test the shortcode on a page or post

![Add shortcode to a page/post](https://thepracticaldev.s3.amazonaws.com/i/q55b2j9mzyi1iutqfopj.png)

![Shortcode works!!!](https://thepracticaldev.s3.amazonaws.com/i/gi8bdmpgfpw5tx3wsgnp.png)

## Step 2: Add custom javascript file

Again, you can do this by editing your functions.php

```
// functions.php

// Custom JavaScript for Firebase
function custom_firebase_scripts_function()
{
 wp_enqueue_script('custom_firebaes', get_template_directory_uri() . '/js/custom-firebase.js', array('firebase_app', 'firebase_auth', 'firebase_database', 'firebase_firestore', 'firebase'));
}
add_action('wp_enqueue_scripts', 'custom_firebase_scripts_function');
```

Your custom-firebase.js will be under js/ folder

![custom js location](https://thepracticaldev.s3.amazonaws.com/i/8812y9eetfkfszrq46gq.png)

Verify it on the front-end. You have access to firebase now.

![Custom JS shows](https://thepracticaldev.s3.amazonaws.com/i/pnrpbsatbf1ywhkq87yr.png)


## Step 3: Retrieve and display data from Firestore

Now, it’s all about JavaScript. You can customize, modify and do whatever you want.

```
(function ($) {
    'use strict';
    $(document).ready(function () {
        const showFirestoreDatabase = () => {
            const db = firebase.firestore();
            const firestoreEl = jQuery('#custom-firebase');
        
            // You can get the collectionName and documentName from the shortcode attribute
            const collectionName = 'users';
            const documentName = ‘document-1'
        
            if (collectionName && documentName) {
                const docRef = db.collection(collectionName).doc(documentName);
        
                docRef.get().then(doc => {
                    if (doc.exists) {
                        // console.log('Document data:', doc.data());
                        let html = '<table>';
                        jQuery.each(doc.data(), function (key, value) {
                            // You can put condition to filter your value
                            // and it won't show on the frontend
                            html += '<tr>';
                            html += `<td> ${String(key)} </td>`;
                            html += '<td>' + value + '</td>';
                            html += '</tr>';
                        })
                        html += '</table>';
                        firestoreEl.append(html)
                    } else {
                        // doc.data() will be undefined in this case
                        console.error('Please check your collection and document name in the [firestore] shortcode!');
                    }
                }).catch(error => {
                    console.error('Please check your collection and document name in the [firestore] shortcode!', error);
                });
            } else {
                console.warn('Please check your collection and document name in the [firestore] shortcode!');
            }
        }
        
        showFirestoreDatabase()
    })
})(jQuery)
```

Check the code on the WordPress post.

![Firestore data retrieved](https://thepracticaldev.s3.amazonaws.com/i/vc21h4q9kbga5hsy4w0h.png)

Yay, firestore data is retrieved

If you are interested in the [Integrate Firebase plugin for Wordpress](https://github.com/dalenguyen/firebase-wordpress-plugin), please give it a read.