PWA with WordPress Without Coding — Part 3/6
Adding Themes and Plugins
We now add the themes and plugins that we will be working with. I have found the ones we will be using on our website after much research. I explain my decisions below
Theme:
For my theme, I will be using the Astra Theme. It has the following features:
- It is free
- It is fast and light
- It supports the Elementor page builder
- Its code is available on GitHub: https://github.com/brainstormforce/astra
- It does not charge for WooCommerce integration
Page Builder:
I will be using a Page Builder to implement my design quickly. (This tutorial really is sans code.)
- Elementor is the most feature-complete free page builder, and makes it really fast to build really stunning designs.
- It has a very responsive community
- There are many plugins that add missing functionality and elements to Elementor.
- Developed on GitHub: https://github.com/pojome/elementor
I installed some other plugins to add some elements that Elementor does not have in its free tier.
<Alternative Page Builder>
If I was building this website for someone else, I’d go with LiveComposer. It allows editing WordPress’ default post templates. The end result is stunning and fast as well.
PWA:
Searching for “PWA” in the plugin directory yields many results:
What do you pick when you have so much to choose from? Luckily, we have a clear winner and that discussion deserves a whole section of its own.
Picking a PWA Plugin
Plugin plugin which plugin do I choose?
We begin by revisiting a small principle of design.
Consistency
[Universal Principles of Design- Page 56]
We want the experience between platforms to be consistent. We want the same experience regardless of the platform. Design that people can associate with us. Design that strengthens the brand, enhances learn-ability and gains trust. Consistency is imperative to gaining user trust. This is why:
Progressive should augment, not replace Responsiveness
-Yours Truly
I experimented with all the PWA plugins, out of the ones that did not give me fatal errors and straight out didn’t work, two plugins, namely:
- WP-AppKit — Mobile apps and PWA for WordPress, and
- Progressive Web Apps
tried to install a separate PWA based mobile theme called mosaic theme. IMHO, this destroys consistency. This approach leads to drastically different experiences between platforms and I would not go for such a solution, ever.
An understanding of consistency gave me clear expectations for my use case. The plugin I was looking for should:
- not visually alter my site,
- add the PWA features
Thus augmenting, not replacing my already responsive website.
This makes a strong case for the one plugin:
Super Progressive Web App:
Super Progressive Web Apps is a WordPress plugin that adds PWA features to WordPress. It has the following features:
- Developed openly on GitHub:
https://github.com/SuperPWA/Super-Progressive-Web-Apps - Does not install any additional theme
- Developers are very responsive to Github issues as well as support tickets
- Releasing new features consistently
- Focused on adding PWA features rather than creating a theme market
Now that we have all the themes and plugins installed, we will watch some design videos and design our front page in the next part.
Series Index:
- Making a PWA with WordPress Without Code — Part 1/6
Introduction
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-from-scratch-part-1-sans-code-69c1b9cbf955 - Making a PWA with WordPress Without Code — Part 2/6
HTTPS On Shared Hosting
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-1-d1fa54d9a120 - Making a PWA with WordPress Without Code — Part 3/6
Adding Themes and Plugins
<here> - Making a PWA with WordPress Without Code — Part 4/6
Design/Wireframing
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-3-1355bf8320a2 - Making a PWA with WordPress Without Code — Part 5/6
The Home Page
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-4-4a024606d04f - Making a PWA with WordPress Without Code — Part 6/6
End Results
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-5-8290b0077132
