How to Retrieve Data from Firestore and Display on WordPress

Dale Nguyen - Nov 2 '19 - - Dev Community

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

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. 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');
Enter fullscreen mode Exit fullscreen mode

Test the shortcode on a page or post

Add shortcode to a page/post

Shortcode works!!!

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');
Enter fullscreen mode Exit fullscreen mode

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

custom js location

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

Custom JS shows

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)
Enter fullscreen mode Exit fullscreen mode

Check the code on the WordPress post.

Firestore data retrieved

Yay, firestore data is retrieved

If you are interested in the Integrate Firebase plugin for Wordpress, please give it a read.

. . . . . . . . . . . . . . . .