WordPress application development ACF & Gravity Forms

Quite recently we have created a Fleet Management system – Fleet Medic, a WordPress application. In this article, I’ll go through the process of application development based on top of WordPress platform. Using two powerful, commercial plugins – Advanced Custom Fields Pro and Gravity Forms as the base. I will take the aforementioned website as an example.

First I’ll introduce the application features, supplemented with a couple of explanatory pictures. After that, I’ll explain the development approach and the plugins we have used in a bit more detail. Next, I’ll add a couple of code snippets along with their simple explanation using GitHub Gists.

Finally, I’ll summarize the process, go through possible loopholes, for instance, scalability problems, maintenance issues, privacy requirements, and post-delivery ongoing support.

Application Features

The application contains the following features:

• Front End
  • User Registration Login
  •  Custom Post Type (vehicles / invoices) Creation / Removal / Edits
  •  Content filtering
  •  content search
  • mailing, printing, phone calls
• Admin User Approval
• Admin Content Management and Edits

The platform is optimized for both desktop and mobile devices, with its current focus trending towards a simple mobile app. The following images show the application custom Front End panels:

Coding Approach / Used Plugins

To reduce the application in size and assure its scalability we’ve decided to use available Gravity Forms filters and hooks along with the power of Custom Post Types. The project is also using the Timber plugin and has been built with the Chisel generator framework provided by Xfive.co. Chisel, being a gulp based tool allows us to modularize .css and .js code, assuring proper and easy to maintain code structure. Once compiled the code is merged, minimized and deferred giving us a solid base for a mobile-optimized project.

Gravity forms plugin was used to setup all Front End facing forms. Its hooks and filters (some of these have been explained by us in the Gravity Forms blog series) were combined with ACF created post fields. Upon each form submission, the data is being saved as either Invoice or Vehicle directly inside the WordPress database.

Sample Code Snippets

The section covers sample Gravity Forms code snippets. The plugin has a lot of nice hooks that allow one to execute any code after the occurrence of a specific action, for instance: form submission, form validation, or form rendering. Similarly, the latter gives one an ability to pre-populate Gravity Form’s form with any arbitary data. In other words, we fetched the data from the database, pre-populating the form with user input values.

1. Gravity Forms Login Submission Handler

2. ACF to Gravity Forms pre-population

Summary

Vanilla WordPress is an extremely powerful piece of software. Custom Post Types, Custom Taxonomies or built-in APIs not only give one a lot of valuable tools to create a fully-fledged application but also deliver a solid base for a scalable platform. Besides wise use of certain plugins gives one an ability to extend the default functionality in nearly any suitable way.

Loopholes

With all that said there are some potential problems that some of you may not be aware of while creating a WordPress application. These are associated with a couple of factors:

• Scalability
• Security
• Code Quality
• Performance
• SEO
• Ongoing Support

First and foremost, my suggestion (a rule of thumb) is to avoid spamming any WordPress install with lots of plugins. Not only there’s a lot of unused code, but also, compared with a custom made app, the 3rd party code is much harder to maintain or modify. Whatsmore there’s no assurance that such code is free from security issues, like vulnerabilities, programming mistakes or invalid data sanitization.

Second, one has to take into account the code quality. Similarly to scalability and security, code quality values a lot. Installing several plugins not only adds a lot of unused lines it also makes the code longer to read and harder to understand.
Third, the more code and useless methods we have, the more server-side (and most likely user side) resources we use.
Fourthly, when it comes to SEO – it’s much easier to set things up yourself, provided that one knows a little bit of SEO than potentially using a non-SEO friendly code.

Finally and most importantly it’s much easier to provide ongoing support to a simple, logically, well-written piece of code (especially when working within a team), compared with an install full of arbitrary plugins.

Final Words

In conclusion, WordPress application development is not an easy task. As a result, we always try to take into account the fact that some other team may work after us and we try to keep the code as clean and well written as possible. Furthermore, programming is not an easy task. It may be frustrating, it may require a lot of iterations, fixes, debugging, patience, ongoing maintenance, code updates and support.

We hope that you found this article useful and interesting. If you would like to learn more about WordPress based application development or would like to have a similar app created do not hesitate to leave a comment down below or reach out to us!