A lot has happened since Part III of my series in building a Single Page Application with WordPress, I was going to finish with IV and V, but that would seem so inappropriate considering the huge shift that has happened.

While writing my tutorials here and documenting my build, I was building 1 thing, which was mostly an e-comm dashboard. This idea went on hiatus when another idea hit me and I decided to build it instead.

Birth of CodingOfficeHours.com

CodingOfficeHours.com was an idea I had when I realized a  lot of people would email, Skype, or Facebook message me asking for help. If I had a spare moment, I’d always happily help. I thought about the current state of online learning, with things like Google Helpouts and others coming up in the mix. If you want to read more about the COH idea and where it came from, as well as the mission, head over to the COH Blog.

Creating the AngularJS Application

I know I have covered code samples in the other articles, but figured I’d just restart here and share with you what I am doing with CodingOfficeHours.com. I am not going to show too much about the inner workings of AngularJS, there are plenty of tutorials out there to get you started learning AngularJS. Feel free to contact me with specific questions though.
While I have a few pages (WordPress pages) running my AngularJS app on them, there is 1 primary page that handles 95% of it, and all my routes are built from there.

Step 1 – Page Template

The first step in creating the app is to create the main page it will live on, which is easily done with a page template in your theme directory:
My app page template:

If you are looking to make an actual page template, just add in in the necessary PHP comment at the top. I however chose just to use the default WordPress page template hierarchy (page-[slug].php).

Step 2 – Enqueuing

It is super important to enqueue scripts and styles appropriately in WordPress, for many reasons. The primary reason being you do not want to load scripts or styles that are not even being used on a page (load times). With AngularJS it is primarily scripts, so here is an example of how my enqueue structure looks like.. and as you can see I call the function in my page template before get_header();

I broke the enqueue code and JavaScript up into a few sections for ease of use and modularity. The first section is all the core required AngularJS, I call on it via Google’s CDN, but will eventually bring it local for faster loading and cacheing. The second section is for my application and things I define as global functions like new directives I have created, defining routes, and also my factories. The last section is dedicated to my controllers, I tried to keep name convention to angular-[controller] so it is easy to know a controller’s name and the file it lives in, although there are some files that contain multiple controllers (i.e dash).

Step 3 – Templates

An important part of AngularJS is the way you template things, and for most of my app I used routes to define with template to be used based on the URL path. I also will be adding in the use if UI Router for the added functionality, but for now I am defining out my routes using the default AngularJS method. Remember each route is defined by the controller that runs it, so make sure to setup your controller at the same time.

Once I have the routes in place and working with the controller, the really fun part begins. Coding the template and functionality behind it.

Templates are html files, simple. Unlike the PHP files of a normal WordPress theme, my application’s theme directory is majority HTML, each one the code of the that specific controller or application page.

This sample shows a <li> tag, repeating based on the subjects, you can see I added in a filter so that only those without a parent are displayed, thus powering my subject page filtering.

Step 4 – Test Test Test

Before I actually even went into private beta testing with users, I tested the crap out of my application. I signed up, deleted users, paid myself, and reviewed myself. I then opened up a password protected private beta, and had users do some testing. Now I am moving into a public beta now that more features have been added, and will be adding more robust AngularJS functionality as the site grows.

Try it for yourself

Want to get started but not sure where? Start with a basic blog theme… which I have already created! Just fork/download and install the theme and plugin to have a fully functional WordPress + AngularJS build!

Also check out the live AngularJS WordPress theme demo

Yes you can build an application with WordPress

So what have I learned from 1.5 applications? It can be done. WordPress can be used to build applications, the question you have to ask yourself before you start your build is “should you?”. CodingOfficeHours is pretty basic when you strip it apart. It is users, requests (content), payment (Stripe API), and Reviews (content). Nothing WordPress can’t handle if you were not building a client-side application. In fact, I could have built the whole thing as a WordPress theme, and called it a day, but that wouldn’t have been nearly as fun, and the user experience wouldn’t be anywhere near the same.
Do I think WordPress is ready to power many apps?
No, in my dream future, there will be a WordPress with the RESTful API built into core, and the dashboard a light-weight minimal version of what it is now (removing 90% of the dashboard functionality but leaving all of the codex API). Then I think WordPress could be a good platform that developers will see it as more an application framework, then just a blogging CMS.

There are 8 comments Join the conversation

Comments are closed.