Simon Ho | Software Developer Blog

Introduction This blog describes how to build a Wordpress theme which the frontend displays a calendar (using jQuery FullCalendar). The Wordpress as backend which the PHP codes communicate with Google Calendar (via Google API service account) to perform loading/saving event(s). 15-seconds short demo outcome video (no sounds): System diagram of this tutorial: Note: Unlike other common tutorials, this tutorial chooses Server-to-Server communication approach . This does NOT require users to authenticate and consent. The Source Codes You can download the source codes from this Github repo Prerequisite WordPress 4.9+ PHP 7.0+ Composer 1.6+ A Google Account Initialize the backend project First of all, you’ll need to create a project directory. Link the directory to your WordPress theme directory (assume the WordPress is installed in /var/www/html ). The Linux command: $ mkdir google-calendar-wordpress $ cd google-calendar-wordpress $ ln -s $(pwd) /var/www/html/wp-content/themes/google-calen...

This is the 2nd part of the blog: Progressive Web App Wordpress Theme Part 1 . Last time the Progressive Web App performs in the local server properly. This part will integrate it with WordPress Theme. Test it in real WordPress server, and Android phone as well. Let’s get started. Produce a Wordpress Basic Theme As WordPress Theme Development document mentioned , it does require at least three basic files. I store those files in directory /wp-files were under the project root. 1. Theme Stylesheet /wp-files/style.css : /* Theme Name: PWAWP-Theme Theme URI: https://wordpress.simonho.net/ Author: Simon Ho Author URI: http://www.simonho.net Description: Progressive Web App Wordpress Theme Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: pwawordpress Tags: pwa, one-column This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. ...

After I read two articles: Progressive Web Apps Are The Next Big Thing and More Surprising Statistics About WordPress Usage . I decided to build a Wordpress theme which integrated Progressive Web Apps (PWA) to see how cool it is when two “Big Thing” mix together. TL;DR To avoid Too Long; Didn’t Read. I break the whole procedure into two blogs. In part 1, I will build a Progressive Web App in the local server. What PWA features to be built here? According to PWA wiki , the PWA will be progressive enhancements. The final webapp will be: Responsive design: I choose Bootstrap 4 because it’s mobile-first design. Contents retrieve from Wordpress CMS via REST API . It’s a natural way the App is developed in Javascript. Offline support: The PWA still can run and display the contents when no Internet connection. Installable on Android home screen: I w...