In this project, resident author and Angular for WordPress Guru, Roy Sivan, goes through an Angular 1.X WordPress Theme he has been continuing to evolve.
An Overview of the Theme
The AngularJS theme for WordPress is a simple single page application theme powered by the WordPress REST API. It can be used both as a boilerplate to extend functionality, or as a snapshot of what Single Page Applications can look like if built as a default WordPress theme.
The technologies in this project rely primarily on WordPress. As of 4.7 with the WordPress REST API now in core, it is simple to get going with nothing more than the base WordPress install. The theme is primarily powered by AngularJS 1.x or version 1 of AngularJS, as well as Angular UI-Router for added functionality in routing. I chose to use ui-router because it adds state-driven routing, which comes in handy for larger builds.
The Theme Out of the Box
There are 2 main version of the theme, however if you are just starting out, you will want to stick to version 6. As of writing this version 6 is the master branch, however as soon as version 7 is ready, it will be stored in the v6 branch and updates will stop.
Version 6 of the plugin is Angular 1.x powered by the WordPress REST APi which can be found in WordPress Core (as of 4.7), previously the REST API v2 plugin. Out of the box you get a pretty simple list page and detail page. Both pages have extended functionality to add, edit or delete a post, as well as add a comment on a post.
If you plan on using v6, the theme does not include menu or sidebar support anymore. There is a great plugin for adding in menu support via the API called WP API Menus which will add in the support for the API, but will require some work in the header.php or Angular templates.
Out of the box version 6 of the theme runs Angular 1.x. I am currently working on a new branch v7 which may be done by the time you read this (early 2017). There are many benefits to moving to Angular 2, including it being the newer technology. Also, I am making the Angular 2 theme ready for 100% decoupled use as a front end framework outside of WordPress. With just a few small changes the theme will be able to run outside of WordPress, but still getting the same data from your website. You will be able to put this either outside the WordPress ecosystem but on the same server, or on a completely different server.
I will probably update this article, or create a new one more fully once the Angular 2 theme is ready for use.
Customizing The Theme
Since this really is a developer’s boilerplate, customizing isn’t basic. Customizations are meant to be adding in new controllers, routes, and overall functionality.
However if you are looking to make something simple to get a better understanding of how it works, there are some basic customizations that can be done, which still require code.
Styling can be changed pretty easily. The _more-style.scss file under assets/scss is a great place to start. Keep in mind that you will to have the gulp watcher running to compile the CSS every time you make a change and save.
Template / Layout
This is going to be a big difference when it comes to Angular 1 and 2. Angular 1 is a little more user friendly with the HTML attributes, while Angular 2 is slightly more advanced, but I would say still easier than learning more advanced PHP.
This is another area where Angular 1 and 2 differ, moreso than the templates. While it is easy to create 1 JS file which powers all the JS needed for this theme, it must be broken up in Angular 2 into more granular components. Angular 2 also doesn’t currently need ui-router, as the routing system is pretty good out of the box, but time will tell if ui-router finds a need to upgrade it.
Project Ideas Based on This Theme
There are many things that this thing can transform into, however right now it is a pretty bare bones Angular + WordPress demo & boilerplate.
I am not much of a designer, so the overall theme is very basic. When looking at other JS framework powered themes which have full transitions going from view to view, this theme is pretty dull. I think there is a good amount of potential to create an awesome theme which is really a masterpiece of UI.
Building a Widget within Another Theme
Share Your Work!
Have an example project you have built based on this?
Let Zac know and we will feature it here!