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.

He shows how it works with Angular UI-Router, the WordPress REST API and then gets into how you can customize the styling, template / layout and JavaScript functionality. The project wraps up with a few great ideas of how you can take this project and reuse it for other purposes.

 

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.

Learning how this theme works can benefit developers as they learn how single page applications work, and how JavaScript frameworks in general interact with the WordPress REST API. Whether built as a WordPress theme or decoupled completely from WordPress, using JS frameworks to build applications powered by the API is something we will see a lot more of in the next year.

 

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.

Angular 2

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

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

Templating can be tricky in WordPress, however luckily if you have basic HTML knowledge, it is actually easier with the AngularJS theme. In the root of the theme you will find list.html and single.html. These two html files power the 2 views that you see while clicking around from homepage to post. There isn’t any PHP involved in either of these templates, but if you want to add/move/remove data I’d recommend learning JavaScript templating syntax using curly brackets {{data}}.

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.

Adding Functionality with JavaScript

All JavaScript can be found in assets/js/angular-app.js I chose not to break it apart into many files since I wanted to keep the site very simple. You can find the ui-router settings on lines 32-42 each state defined out by the name, URL, html template and controller that powers it. To see how this works, check out the ui-router documentation.

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.

Create an Awesome Design Powered by JavaScript

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.

The tricky part is that SEO wise, JavaScript frameworks aren’t the best, and really shouldn’t be used as the main blog site which has high marketing potential. The sub-idea around this would be that these be internal-use sites, where SEO might not be a big concern.

Building a Widget within Another Theme

I have taken what I have created here a number of times to create micro-apps that live within normal WordPress themes. Most recently on roysivan.com I have an easy to look at filter for my work, GitHub projects, and speaking engagements. This grid while seeming easy, is powered by the REST API and AngularJS, it is a micro-app widget. It adds a dynamic  UI in an overly static page, and is a great way to showcase content without loading it all and just hiding / showing with JavaScript.

 

Share Your Work!

Have an example project you have built based on this?

Let Zac know and we will feature it here!