Since WordPress announced they will be rolling a REST API into the CMS, I have been very interested in the future of WordPress development. With the release of the new WordPress.com, it is apparent Javascript is going to play a large roll in the future of WordPress development.
TL;DR – I have been playing with Angular and created an app that uses the WP REST API. You can download it from GitHub here. You can also see a demo here.
Many of you know, I run a couple WordPress theme shops and a course that teaches how to build WordPress themes with Bootstrap. Because of this, I am always interested in the future of WordPress and new opportunities.
The WP Rest API is a game changer for WordPress development. You will no longer need to create themes in order to display WordPress content. You can simply use the API to interact with WordPress to create, read, update, and delete any content you want without even touching the WordPress Dashboard.
It’s awesome.
For current WordPress theme/plugin developers and myself, it is time to step up your Javascript game! There are already hundreds of articles online that go over “how Javascript is eating the world” and if it can be built in JS, it will be. So if you haven’t already started to learn JS, now is the time.
Angular
To get started, I wanted to build an app that uses the WP REST API to pull in my posts and display them. Seems pretty easy right.. Simply do a GET request to a certain URL and iterate through each post. Done.
Yeah, it is that easy if you already know a JS framework or have experience working with JSON data in your language of choice. As a theme dev and FED, I never really picked up this skill set so I hit the Google machine with my millions of questions, since making apps is not that easy for everyone and that’s why many people get professional services to help them with this, as a great app development company online which can develop different types of apps.
I had always heard a lot of good things about Angular, so that is where I started. React is also awesome, but I went with Angular since it has been around longer and would in turn have a lot of available information online for beginners like me. Angular 2 is also in beta and is going to be completely different than Angular 1, soooo yeah. As of FED you soon realize you NEVER stop learning. I personally think it is fun.
My learning style kinda sucks… I can’t just read/watch how to code something and retain it. I need to reverse engineer things and build things myself over and over. Repetition is key for me, luckily there is a lot of information and examples online, also getting help from a XAM Consulting – react developer sydney can be very helpful.
This means my Google searches were things like “angular rest example”, “angular example apps”, “angular rest tutorials” etc. These searches turned up a ton of great tutorials and articles.
I started reading, following along, coding, and watching everything I could get my hands on. I even paid for some courses including udemy, codeschool, pluralsight, etc. Again, the key for me is repetition and seeing how something is done over and over.
As I moved through the courses, I started to see how people arranged angular code and how things started to fit together. Once I had the basics, I moved onto trying to find some Angular WordPress examples.
This turns up a lot of WordPress themes built with Angular. Which seems kind of useless to me… I don’t understand why you would want to continue to build PHP based WordPress themes and localize your JS in order to use Angular? For me, the whole purpose to use the REST API is to get away from PHP based themes and start using other powerful frameworks.. Please correct me if you have different feelings about this.
This brings up the front-end of WordPress. If you currently install WordPress you will automatically have a default theme set. As we move forward, what is going to happen to the people that only want to use the API?
For example, I install WordPress on a server and then just use the API to display my content. In this case, a theme isn’t needed. What will we do in this case?
Solutions could be:
- Create a blank theme. A minimal WordPress theme only needs to include a style.css file and index.php. Maybe we just create a simple theme that has nothing in it?
- Maybe WordPress adds some sort of flag in the Dashboard to turn on/off the front-end?
- Any ideas?
Anyway, the reason I want to use the API is to build JS applications and front-ends. Not more traditional PHP based WordPress themes.
Starting the Build
After all the courses and tutorials I feel I have enough Angular knowledge and am ready to start building something WordPress related.
Just like with theme development, I like to start off with some bare bones. I normally start with underscores.me as the starter theme when creating new WordPress themes. I started searching for some Angular starter projects.
With anything else, there are hundreds of Angular seed projects that will get you started. The problem I had with some of these is how they included hundreds of script calls to the different Angular files. Once you start creating a few services, directives, and other Angular related files you start to get a pretty bloated looking index file.
I fell in love and have been using Gulp for theme development for some time now, so I thought there has to be a better way that people are setting up Angular apps. After hitting the Google machine again, I stumbled across an article on Medium titled Best Practices for Building AngularJS Apps by Jeff Dickey (CLI Engineer at Heroku).
This article was exactly what I was looking for in an Angular starter app. In the article he goes over how he sets up a sample Angular app and uses Gulp to concatenate everything into one file.
Great starting point!
Adding Features
Once I had the starter app running, it was time to integrate the REST API and starting playing around with different Angular features.
Here, I started reading about the different ways to use Angular services to GET API data. After more reading and Googling, I found Todd Motto‘s blog and his Angular styleguide. He just so happens to be a Developer Expert at Google and speaks at conferences about Angular. Perfect.
At this point, I started to learn about the best ways to arrange Angular code and best practices. Reading over the styleguide, I started to change my code. One of the biggest changes was cleaning up the controllers and moving the service calls to the ui-router resolve property.
There are a couple ways he explains to arrange Angular code that I couldn’t get to work correctly, but got as close as I could without breaking the app.
After reading over his blog and styleguide, I also updated my Gulp file to wrap my minified code in an IIFE!
Slowly starting to make this Angular app awesome.
Bootstrap
Little did I know, the Angular community has all these awesome modules, directives, and scripts that are available to include in your Angular application. Kind of like plugins in the WordPress community.
Since I have always been a fan of Bootstrap, I decided to include UI Bootstrap. With this included, I started making my app look more like Bootstrap and started playing with the included directives.
Search Typeahead
Once UI Bootstrap was included in my project, I thought it would be neat to include the typeahead directive to autocomplete and search the WP REST API. Pretty neat feature, but boy was it challenging to figure out!
Other Goodies
If you look over the code you will notice some other features. These include:
- pagination
- page transition animation
- loading bar and spinner
- ui router nested views
- page titles
Now What?
I posted all the code for this project on GitHub and called it ngWP. Would love to see/hear how you are using it for your projects. Feel free to submit PRs if you add any features or find any bugs.
Check out the demo.
If you are an Angular dev, please point out things that could be optimized or done a better way!
This is just the start of my Angular adventure. Keep an eye out for more and enjoy.