How to Retrieve Data from Firestore and Display on WordPress

#wordpress #firebase #tutorial #webdev

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
Article 3: How to Work With Firebase Custom Claims in WordPress

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');

Test the shortcode on a page or post

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

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

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.