Delivering WordPress Content With Web Apps Using AngularJS

Delivering WordPress Content With Web Apps Using AngularJS

The recent conversation about WordPress themes shows just how much they dominate our thinking – and our navel gazing – when it comes to delivering our content.

But WordPress 4.0 4.1 expected to include the JSON REST API as part of the core, leveraging web apps to provide tailored, innovative interfaces unhindered by conventional website approaches.

In this article, we’ll hook up a sample AngularJS web app with your WordPress site and look at the challenges of delivering content via web apps.

Will the inclusion of the WP API in the core drive WP and web app integration?
Will the inclusion of the WP API in the core drive WP and web app integration?

WordPress as a web app framework has become something of a mantra, with Matt Mullenweg even suggesting recently that WordPress is “really a web operating system”.

Whether you buy into that vision or not, as WordPress evolves it’s certainly opening up opportunities for delivering content outside of the traditional theme-driven websites. Examples, though, are pretty rare: The Atlantic’s Quartz site – hosted on WordPress VIP, of course – is the most obvious but it lives in pretty rarified company.

So, how difficult is it to provide your WordPress content via a web app? Let’s find out.

Standing On Shoulders

As is almost always the way with the web, we can utilize an existing app. Indeed, a tutorial on building a web app from scratch is definitely beyond the scope of a single post and so this is more about hooking up an app to a WordPress site.

The app in question is wReader (demo) by Igor Minar, built using the AngularJS framework, Google’s contribution to the increasingly competitive and crowded Javascript app framework market.

Screenshot of the wReader app running with the content from a WordPress site
A quick way to get a web app up and running with your WordPress content

I’m not particularly advocating using AngularJS (the discussion about which framework to use is at least as robust as the equivalent CMS discussion). The wReader app is freely available and it seems more useful to go for an alternative approach given that BackboneJS has already proved itself to some extent.

If you decide to explore web apps further than the choice of framework will depend on the resources that you have access to and your own personal preference. If you are not a developer then don’t concern yourself about the technology – it’s not a critical factor in your project’s success, so let your developer decide – focus about the user experience.

wReader is a little old and doesn’t use the latest version of Angular but again I don’t think that matters. What we are concerned with here is the work required to integrate the web app with WordPress, rather than how to build the app itself.

The 30,000 Feet View

wReader was designed to provide a two-pane reader-style interface for the Google Chrome blog’s RSS feed (although it uses a JSON-formatted feed), so we’ll be tweaking it to make it work with a WordPress site.

It uses client-side storage for saving the items and provides (un)read and favoriting features.

We won’t be using the feed approach though. Whilst there are plugins in the Repository that will provide a feed in JSON rather than XML, integrating with the JSON REST API (WP API) seemed more appropriate given its impending inclusion in the WordPress core.

So, our basic steps are to:

  1. Add the WP API to a WordPress installation
  2. Modify the wReader app to load posts via the WP API and work with its format
  3. Make the app publicly available

Setting Up The Web App

Step 1 – Add the JSON REST API (WP API) To WordPress

Ryan McCue’s JSON REST API (WP API) has matured considerably since its birth as a GSOC project. Now at version 1.1, it’s ready for prime time and as previously mentioned is destined to become part of the WordPress core and the primary API for interaction with a WordPress installation.

Installing the plugin is the same as any other plugin: you can download it from the repository but the easiest method is to simply search and install it via your site’s Plugins menu options.

There’s no configuration required; once installed you are ready to go.

To test everything is working okay, type http://{your domain name}/wp-json into your browser location and you should get JSON formatted output with details about your site and the JSON supported methods.

If you get a 404 or other error then check that the plugin is installed and that you have permalinks set up.

Now type http://{your domain name}/wp-json/posts into your browser. It should return with a JSON formatted list of posts. You can control the content of that list by adding filter arguments to the URL. The arguments correspond with WP_Query, so the following URL will list the last 25 posts, in date descending order:

1
http://{your.domain.name}/wp-json/posts?filter['posts_per_page']=25&filter['orderby']=date&filter['order']=desc

This is important to know as the app does one load of posts so you’ll need to ensure that you are pulling in the posts that you want.

Step 2 – Modifying the wReader App

There are a couple of areas that we need to change in order to ensure that the app works with a WordPress site:

  • Calling the correct URL for the site’s WPI API
  • Using the new JSON format for assigning post attributes
Minor tweaks include adding categories and excerpts to the summaries
Minor tweaks include adding categories
and excerpts to the summaries

I also made a couple of aesthetic changes:

  • Add featured image support
  • Automatic display of the first item (rather than waiting until the user clicks on a post)
  • Displaying categories and excerpts on summaries

All these changes are included in my forked version of the app so I’m not going to go through them here. You do need to update the WPI API url, though, so once you’ve downloaded the app, navigate to js/services.js. On line 113 you’ll find:

1
var feedURL = 'http://www.test.dev/wp-json/posts?filter[post_status]=publish&filter[posts_per_page]=25&filter[orderby]=date&filter[order]=desc';

Replace the URL with the URL for your site.

Step 3 – Make The App Publically Available

The simplest method for this is to place the app in its own folder on your webserver (eg. http://{your.domain.name}/app and navigate to this page.

The more sophisticated approach would be to wrap this up as either a plugin or a theme for delivery. The advantage here would be the ability to automatically target specific platforms, sending mobile devices to the app rather than the website, for example.

Further Modifications

The beauty of this app, and the advantage of the AngularJS approach, is that it is relatively easy to modify the design and make small changes to the apps behavior.

With only one HTML file (index.html), changing the header, adding a footer or a splash page is relatively straight forward as it is only changing a single file and I would encourage the curious amongst you to experiment.

Where it starts to become complicated is when you want to make more substantial changes to the apps behavior, as that requires digging into the code and certainly more than my rudimentary knowledge of AngularJS and MVC design in general.

It’s easy, though, to get a test app up and running, to get a feel for how a web app might work for your site, to play with the interface, all without even having to worry about which framework you’re using let alone how to use it.

Issues In Delivering Content To Web Apps

One of the major advantages of being able to quickly set up an app such as wReader is the that it highlights some of the potential issues you might encounter in delivering your content outside of a WordPress theme.

The good news is that the WP API runs all the filters on the content before adding it to the output so the resultant HTML is identical to that provided to any theme running server-side.

Unfortunately, that means that the same HTML is chock-full of WordPress generated HTML (not quite as evil as Microsoft HTML but not far off) so there’s a large amount of work to be done in ensuring that the classes, in particular, are accounted for in the web app.

It may be possible just to include the style.css from your theme but the chances are that you will need to either update the app stylesheet or add a new one to cater for the embedded styles such as the image alignment, image captions, etc.

Any plugins that you use to layout your content will also require the appropriate styling to be made available to the app.

Aside from testing with your own site’s content, testing with the test content from wptest.io would certainly provide a decent stress test and the solution will likely be highly portable to any app given that most content will displayed via binding, regardless of the framework.

Screengrab highlighting an issue with an image which is too wide
Using wptest.io’s test content can highlight problem areas such as images that should fit but don’t

And, of course, I’ve been very specific about the use case here: delivering content. Anything that requires additional logic, from forums to e-commerce to CRMs to admin apps to apps that simply use WordPress as a web framework rather than a content server, is going to require moving most of that functionality to the app.

Time To Play

I’ve written before about the potential for WordPress acting as content server for multiple delivery mechanisms, from websites to web apps to mobile apps.

The move to apps seems to be happening at glacial pace and examples such as Quartz seem to be almost the exception rather than the start of a shift. Perhaps the inclusion of WP API as part of the WordPress core will kick-start any momentum of web apps.

If nothing else, web apps offer a great pathway to mobile apps when used in combination with PhoneGap or perhaps even AppPresser.

Web apps do have advantages, are definitely worth investigating and wReader is an easy way to have a play and explore what is possible without a massive investment in time, money or resources.

So have a play, see what’s possible and if you create something worth showing off, let us know in the comments below.