CHAPTER 1

Building Web Apps with WordPress

This book will help you build anything with WordPress: websites, themes, plugins,
web services, and web apps. We chose to focus on web apps because you can view
them as super websites that make use of all of the techniques we will cover.
There are many people who believe that WordPress isn’t powerful enough or meant
for building web apps; we’ll get into that more later on. We’ve been building web apps
with WordPress for many years and know that it’s absolutely possible for you to use it
to build scalable applications.
In this chapter, we start by defining what web app’s are and then cover why Word‐
Press is a great framework for building them. We also describe some situations in
which using WordPress wouldn’t be the best way to build your web app.

What Is a Website?
You know what a website is: a set of one or more web pages, containing information,
accessed via a web browser.

What Is an App?
We like the Wikipedia definition: “Application software (app for short) is software
designed to perform a group of coordinated functions, tasks, or activities for the ben‐
efit of the user.”

What Is a Web App?

A web app is just an app run through a web browser.

1
Note that with some web apps, the browser technology is hidden—for example, when
you’re integrating your web app into a native Android or iOS app, running a website
as an application in Google Chrome, or running an app using Adobe AIR. However,
inside these applications, there is still a system parsing HTML, CSS, and JavaScript.
You can also think of a web app as a website, plus more application-like stuff. There is
no exact dividing line where a website becomes a web app. It’s one of those cases
where you just know it when you see it.
What we can do is explain some of the features of a web app, give you some examples,
and then try to come up with a shorthand definition so that you know generally what
we are talking about as we use the term throughout the book.

You will see references to SchoolPress while reading this book.

SchoolPress is a web application we are building to help schools
and educators manage their students and curricula. All of the code
examples are geared toward functionality that may exist in School‐
Press. We talk more about the overall concept of SchoolPress later
in this chapter.

Features of a Web App

The following are some features typically associated with web apps and applications
in general. The more of these features there are in a website, the more appropriate it
is to upgrade its label to a web app.1
Interactive elements
A typical website experience involves navigating through page loads, scrolling,
and clicking hyperlinks. Web apps can have links and scrolling, too, but they tend
to use other methods of navigating through the app.
Websites with forms offer transactional experiences. An example would be a con‐
tact form on a website or an application form on the careers page of a company’s
career website. Forms allow users to interact with a site using something more
than a click.
Web apps will have even more interactive user interface (UI) elements. Examples
include toolbars, drag-and-drop elements, rich text editors, and sliders.

1 Many of the ideas in this section are influenced by the following blog posts: “What is a Web Application?” by
Dominique Hazaël-Massieux, and “What is a Web Application?” by Bob Baxley.

2 | Chapter 1: Building Web Apps with WordPress

Tasks rather than content
Remember, web apps are “designed to help the user to perform specific tasks.”
Google Maps users get driving directions. Gmail users write emails. Trello users
manage lists. SchoolPress users comment on class discussions.
Some apps are still content focused. A typical session with a Facebook or Twitter
app involves about 90% reading. However, the apps themselves present a way of
browsing content different from the typical web browsing experience.
Logins
Logins and accounts allow a web app to save information about its users. This
information is used to facilitate the main tasks of the app and enable a persistent
experience. When logged in, SchoolPress users can see which discussions are
unread. They also have a username that identifies their activity within the app.
Web apps can also have tiers of users. SchoolPress will have administrators con‐
trolling the inner workings of the app, teachers setting up classes, and students
participating in class discussions.
Device capabilities
Web apps running on your phone can access your camera, your address book,
internal storage, and GPS location information. Web apps running on the desk‐
top may access a webcam or a local hard drive. The same web app might respond
differently depending on the device accessing it. Web apps will adjust to different
screen sizes, resolutions, and capabilities.
Work offline
Whenever possible, it’s a good idea to make your web apps work offline. Sure, the
interactivity of the internet is what defines that “web” part of web app, but a site
that still works when you drive through a tunnel will feel more like an app.
With Gmail, you can draft emails offline. Evernote allows you to draft notes off‐
line and then synchronize them to the internet when connectivity is restored.
Mashups
Web apps can tie one or more web apps together. A web app can utilize various
web services and APIs to push and pull data. You could have a web app that pulls
location-based information like longitude and latitude from Twitter and Four‐
square and posts it to a Google Map.

Mobile Apps
Since the first edition of this book was published back in 2012, web apps—and mobile
apps in particular—have taken off. On most websites, mobile devices have now over‐
taken desktop computers as the largest source of traffic (Source: Perficient, Inc.).

What Is a Web App? | 3

In 2012, the quintessential web app looked something like Basecamp, project man‐
agement software accessed through your desktop web browser. In 2019, the
quintessential web app looks like Twitter, a communication app accessed through
your iOS or Android phone.
Because in most cases, the majority of your users will be accessing your websites and
apps on a mobile device, we support a “mobile first” mindset when designing and
developing web apps. We cover how to get your WordPress apps running natively on
mobile in Chapter 16. We cover the basics of responsive design and having your web‐
sites show up properly for any screen size in Chapter 4.

Progressive Web Apps

Progressive web apps (PWAs) are websites that take advantage of modern browser fea‐
tures to behave as native apps in Android, iOS, or on the desktop. Specifically, web‐
sites that use service workers to function while offline have a web app manifest file to
define the app to the operating system (OS), and meet a few other requirements so
they can be launched as apps directly from the browser.
PWAs have been championed by the Google Chrome team, but are now supported on
iOS and most modern web browsers. A feature plugin for PWA support is in develop‐
ment to support the primary features of PWAs in WordPress core. You can use this
plugin turn your WordPress site into a PWA, and that is a good idea, but in reality
coding a PWA is more of a mindset than a simple conversion. Similar to the “features
of a web app” we just described, the main PWA site at Google has a checklist of fea‐
tures expected for most PWAs, including these baseline features:

• Site is served over HTTPS.

• Pages are responsive on tablets and mobile devices.
• All app URLs load while offline.
• Metadata is provided for Add to Home screen.
• First load is fast even on 3G.
• Site works cross-browser.
• Page transitions don’t feel like they block on the network.
• Each page has a URL.

In addition to the baseline features, there is a checklist of items for “exemplary”

PWAs that covers user experience (UX) and performance. Google’s Lighthouse tool
provides automated tests and reports for meeting the PWA criteria. Even fully native
apps or apps built for the browser can benefit from some of the suggestions in the
PWA checklists and Lighthouse reports.

4 | Chapter 1: Building Web Apps with WordPress

Why Use WordPress?
No single programming language or software tool will be right for every job. We’ll
explore why you may not want to use WordPress in a bit, but for now, let’s go over
some situations in which using WordPress to build your web app would be a good
choice.

You Are Already Using WordPress

If you already use WordPress for your main site, you might be just a quick plugin
away from adding the functionality you need. WordPress has great plugins for ecom‐
merce (WooCommerce), forums (bbPress), membership sites (Paid Memberships
Pro), social networking functionality (BuddyPress), and gamification (BadgeOS).
Building your app into your existing WordPress site will save you time and make
things easier on your users. So, if your application is fairly straightforward, you can
create a custom plugin on your WordPress site to program the functionality of your
web app.
If you are happy with WordPress for your existing site, don’t be confused if people say
that you need to upgrade to something else to add certain functionality to your site.
It’s probably not true. You don’t need to throw out all the work you’ve already done
on WordPress, and what follows are great reasons to stick with WordPress.

Content Management Is Easy with WordPress

Developed first as a blogging platform, WordPress has evolved through the years, and
with the introduction of custom post types (CPTs) in version 3.0, into a fully func‐
tional content management system (CMS). Any page or post can be edited by admin‐
istrators via the dashboard, which can be accessed through your web browser. You
will learn about working with CPTs in Chapter 5.
WordPress makes adding and editing content easy via a WYSIWYG (What You See Is
What You Get) editor, so you don’t have to use web designers every time you want to
make a simple change to your site. You can also create custom menus and navigation
elements for your site without touching any code.
If your web app focuses on bits of content (e.g., our SchoolPress app is focused on
assignments and discussions), the Custom Post Types API for WordPress (covered in
Chapter 5) makes it easy to quickly set up and manage this custom content.
Even apps that are more task oriented will typically have a few pages for information,
documentation, and sales. Using WordPress for your app will give you one place to
manage your app and all of your content.

Why Use WordPress? | 5