3 Step Web App Workflow

The Workflow for building Web Applications with WordPress has 3 basic steps

  • Step 1. Planning
  • Step 2 Setup
  • Step 3 Development

Step 1. Get a Plan

A successful web application deployment should start with planning and organization before any design work or development starts. To demonstrate how the process works I will run through the process of planning a Web Application for the fictional Mayberry Community Watch.

Start by asking yourself a few simple questions. If your lucky these questions will lead to the real question, “How” the website accomplishes your goals.

  1. Why is this website needed.
  2. What will this website accomplish.
  3. Who are members of the intended website audience.

Let’s look at a “HOW” of a WordPress Web Application for a community watch program.

  1. Web Application Purpose: Sharing and Collaboration for the safety of Mayberry Residents
  2. Web Application Provides:
    1. News Feed of community safety incidents
    2. Collaboration between Mayberry Community Watch members
    3. Blog for Safety Tips
    4. Calendar of Community Watch Events
    5. Mayberry Community Watch Contact Information
    6. Contact Form to reach Mayberry Community Watch
    7. Donations Mechanism for helping with the operating cost
  3. Intended Audience – Concerned Residents of Mayberry and Community Watch Members.

Next Step is to get the Web Application organized. The HOW describes everything you will need to build the site. It is time to apply this information to the necessary content and application routines.

From the HOW we can build out the structure of the Mayberry Community Watch web application for the design and content. Building the structure produces the starting Site Map.

  1. Structure
    1. Home Page
    2. About Page
    3. Incidents Feed
    4. Blog Page
    5. Contact Page with Form
    6. Calendar Page
    7. Public Facing Help Page
    8. Members Section
      1. Define Member Roles
      2. Login / Logout
      3. Members Only Forum
      4. Blog Entry/Update/Delete
      5. Calendar Entry/Update/Delete
      6. Members Help/Password Recovery
      7. Donation Admin
    9. Side Bar
      1. Calendar Widget opens to Calendar Page
      2. Donate Now Widget
      3. Tertiary Navigation
      4. Search Widget

A WordPress Web Application is based on the Model View Controller which is an architectural pattern that divides the application into three interconnected parts. The view is the presentation or story of the web application that is presented to the audience. Careful planning of the presentation will ensure that a good UX or User Experience is consistent across all sections of the site structure.

  1. Mobile First
    1. Is your target audience primarily Mobile or Desktop?
    2. Is there a difference between Small, Medium and Large presentation?
  2. Content Strategy
    1. HOW gives you insight into your Keywords.
    2. Organization Determines what Content sections are needed.
    3. Use your Keywords and Organization to broadly build your SEO Strategy
    4. SEO Strategy creates broad headings for each content section.
    5. Build The Navigation Labels from the headings.
    6. Set a Content Flow Strategy
      1. What is the maximum word count of each article?
      2. How many paragraphs are expected?
      3. How will overflow be handled?
  3. Wire Frames
    1. Wire Frames or Mock-ups are very important to the successful deployment of a web application; unfortunately they are commonly skipped. Take a look at the example Wire Frame for the Mayberry Community Watch About Us page. This valuable tool synchronizes the designers, developers and content writers.
      1. The example clearly shows the site structure is built on a grid.
      2. The order of components and content flow is defined.
      3. The Navigation Structure and layout is defined
    2. Using wire frames will save you more time by reducing design and development time.
    3. Wire frames produce cleaner code.
    4. Synchronized design and development will dramatically reduce the amount of responsive media query patches.

Step 2. Set Up The Application

The WordPress MVC Application is built on the Plugin API. There are 2 main plugins needed for building the WordPress Application..

You will need to install the Timber plugin in order to add Twig Template Engine functionality to your Application. You can get and install the plugin from the Admin Dashboard > Plugins screen. Click Add New and then Search for Timber. Install and Activate the plugin.

The TImber Starter Theme is the WordPress Parent Theme. The Timber Starter theme is an excellent bare-bones WordPresss theme that is already setup for the Timber Twig plugins. You can get the Timber Starter theme from the Project GitHub. Download the Zip file and extract it to wp-content\themes. Do not activate it.

Create a new folder in wp-content\themes. The name of this folder should reflect the name of your web application. For example in keeping with the Mayberry Community Watch example I am naming my child theme mayberrycw.

A WordPress Theme requires two files. Open the folder and create the functions.php file and the style.css file. You can leave the functions.php file empty as the application favors the use of a site plugin over the functions.php.

Open the style.css file and include the following information. Replace the mayberrycw domain information with the correct information for you web application.

Theme Name: MayberryCW
Theme URI: http://themes/mayberrycw.org/
Description: Child Theme.
Author: Mayberry Community Watch
Author URI: http:http://themes/mayberrycw.org/
Version: 1.0

The application will use a CSS preprocessor so this style sheet is generally kept empty. This style.css will be the last style sheet loaded. It is a good place to make temporary style changes until and new file sheet can be complied

While you are here, you can go on and create a new folder in your child theme called views. Leave the folder empty for now.

The PODs Plugin is a multi function builder plugin that handles many common WordPress tasks such as creating settings option pages, custom content types and user roles. There are many plugins that accomplish these tasks. I like PODs because it only takes a single plugin to handle many different tasks.

WOW the WordPress Application is nearly setup, the cost has been free and we have less than an hour of time invested. The final step is creating the Core Site Application plugin. This plugin handles your models, routes, and back-end controllers.

The good news here is the basic creation of the plugin is just as easy as the previous 4 Steps due to the Work started by Tom McFarlin. The project was taken over by Devin Vinson. The current version of the project includes contributions by Josh Eaton, Ulrich Pogson and Brad Vincent.

Ready? Hop over to the WordPress Plugin BoilerPlate Generator. Fill in the fields as they pertain to your plugin information. Click Build Plugin and download the zip file.

Use the WordPress Admin Dashboard>Plugin Screen>Add New screen to install your new plugin. Click on Upload Plugin and choose the newly created ZIP file.

That’s All Folks! The basic application is now setup.

Step 3. Develop Your Application

Your file structure should now look like this . The Plugin Admin Folder is where your code for the Admin or back-end code is kept. The Plugin Public folder is where you place code that is public or front-end.

The documentation for the Plugin Boilerplate suggest that code that is shared for both the admin and public is placed in the includes folder. An example of shared code would be a Widget which contains code for the Admin Panel and the front-end. I personally like to create a third folder called shared for this code and make my hooks in the appropriate Admin or Public class.

The core plugin class includes\class-[plugin-name].php defines your application plugin and has 3 methods that you will use frequently.

  • load_dependencies() This is where you include the class files for your application. Out of the box the class-[plugin-name]-admin.php and class-[plugin-name]-public.php dependencies are already set-up for you.
  • define_admin_hooks() This is where all of the hooks related to the admin area functionality are registered
  • define_public_hooks() This is where all of the hooks related to the public facing functionality are registered

The class-[plugin-name]-admin.php is the admin-specific functionality of the plugin and the class-[plugin-name]-public.php is the public -specific functionality of the plugin.
Example: Enqueue a public script file for Mayberry Community Watch:

//In the includes\class-[plugin-name].php
private function define_public_hooks() {
    $plugin_public = new Mayberry_Community_Watch_Public( $this->get_plugin_name(), $this->get_version() );
    $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' );
//In the public\class-mayberry-community-watch-public.php file
public function enqueue_scripts() {
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/mayberry-community-watch-public.js', array( 'jquery' ), $this->version, false );