Categories
Uncategorized

Angular WordPress

The WordPress folks have been busy creating a RESTful API, and that is good because it is the way of the future. This API will be the basis for Single Page Applications (SPA).

The API could also (hand waving here) be used for communications between web services.

The RESTful API makes it possible for a SPA web site client (the Javascript in your browser) to make AJAX calls to the web server API, and display the returned information. Then the web page can be snappy fast. When you click on a button, there is no need to refresh the whole page. Just the part that needs to change. I say button, but this applies to menus and other controls in the page. Likewise, when the user interacts with the SPA, the information she enters would get POSTed to WordPress via the API.

My interest is in the heart of the WordPress page: the posts, as seen by a visitor (the admin UI is important too, but it can wait). Traditional WordPress displays a list of posts, and you can scroll down to see more. I would prefer to see a list of excerpts, each with a ‘more’ control so you can see the whole post. I do not want to be inserting ‘Read More’ tags manually. And I want the ‘more’ button to be snappy: no page refresh needed. This becomes possible with the RESTful API. How is it done? There are a few things needed:

  • Install you own WordPress. I suspect this is needed, because I am adding files to the WordPress root directory.
  • Install the WP REST API plugin as instructed at http://v2.wp-api.org/
  • Write some JavaScript for AJAX calls. I like to organize it using AngularJS, as instructed at https://angularjs.org/

WordPress uses a single entry Facade pattern: the default route is handled by index.php. An Apache rewrite rule directs all viewing requests to index.php. For example, this post is viewed at http://blinkmonitor.com/2016/04/angular-wordpress/ .
But it is easy to add a SPA web app on  separate web site by using your own custom html and  Javascript.  This Javascript would contain AJAX calls to populate the post viewing area. For example, this post can be viewed at http://leirtech.com/ (several posts appear on this page, and this post is a few down from the top one). In both sites, the blog content is being supplied from the same back-end database. But the leirtech.com site does not provide any way to edit the post contents. It could provide this if I took the time to develop the front-end.

The standard WordPress root directory looks like this:

$ ls -l /usr/share/wordpress
total 164
-rw-r--r-- 1 root root 418 Sep 24 2013 index.php
-rw-r--r-- 1 root root 5035 Oct 6 2015 wp-activate.php
drwxr-xr-x 9 root root 4096 Feb 29 14:18 wp-admin
-rw-r--r-- 1 root root 271 Jan 8 2012 wp-blog-header.php
-rw-r--r-- 1 root root 1369 Oct 3 2015 wp-comments-post.php
lrwxrwxrwx 1 root root 36 Feb 3 08:48 wp-config.php ../../../etc/wordpress/wp-config.php
-rw-r--r-- 1 root root 2853 Dec 16 04:58 wp-config-sample.php
drwxr-xr-x 6 root root 4096 Feb 29 14:18 wp-content
-rw-r--r-- 1 root root 3286 May 24 2015 wp-cron.php
drwxr-xr-x 14 root root 12288 Feb 29 14:18 wp-includes
...

We will create the separate web site with these files and directories:

-rw-r--r-- 1 rleir rleir 5953 Apr 14 10:48 index.html
drwxrwxr-x 2 rleir rleir 4096 Apr 14 10:44 js
drwxrwxr-x 2 rleir rleir 4096 Apr 12 15:01 img
drwxrwxr-x 2 rleir rleir 4096 Apr 12 15:01 css

The directories contain, for a start:

js/app.js
js/services.js
js/controllers.js
css/app.css
img/quotes-meta.gif

The WordPress dashboard will still be accessed via domain.com/wp-admin/something.php, but when you are reading posts you will be using domain.com/index.html.
The index.html contains, for a start:
<!doctype html>
<html lang="en" ng-app="ricksiteApp">
<head>
<meta charset="utf-8">
<title>LeirTech Consulting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

More to come as I sort this out.

Leave a Reply

Your email address will not be published. Required fields are marked *