Introduction.
WordPress is #1 blogging platform. It’s easy to use, powerful, very extensible, there are literary millions of themes, plugins and widgets.
According to some sources, It powers around 32% of the web sites. That’s huge!
Problem.
I tried to pull some data from one WordPress to another WordPress installation. As I normally do, first I checked if some fancy plugin or widget exist in enormous WordPress plugin repository. After a while, I did not find (did not conform all my needs) any nice and easy solution.
So, I dig deeper. After a bit of investigation, I found out that WP 4.7 introduced very useful feature: REST API Content Endpoint. Problem solved!
I found REST API reference here: https://developer.wordpress.org/rest-api/reference/
Integration.
In general, there are two ways to integrate RESTFUL services into web pages:
- Client side by some JavaScript framework, e.g. React, Vue.js, or just plain JavaScript. Major issue with this approach is cross-domain calls, which can be difficult to handle. One solution to this problem is to proxy data over own backend.
- Server side integration. In this approach server side pulls the data, generates response and send it to web client. In the case of WordPress server side PHP executing engine handles this. Because I wanted also to include some kind of caching mechanism this was the natural solution to try.
WordPress RestAPI Content Endpoint.
My idea was to display latest blog posts in destination WP installation. After quickly reading the specifications I could easily get data form source WordPress installation by:
|
1 |
curl -X GET -k -i 'https://www.jenx.si/wp-json/wp/v2/posts?context=embed' |
response is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
HTTP/1.1 200 OK Server: nginx/1.16.0 Date: Thu, 06 Jun 2019 11:57:24 GMT Content-Type: application/json; charset=UTF-8 Transfer-Encoding: chunked Connection: keep-alive X-Robots-Tag: noindex Link: <a href="https://www.jenx.si/wp-json/">https://www.jenx.si/wp-json/</a>; el="https://api.w.org/" X-Content-Type-Options: nosniff Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages Access-Control-Allow-Headers: Authorization, Content-Type X-WP-Total: 9 X-WP-TotalPages: 1 Allow: GET [{ "id": 949, "date": "2019-06-02T06:23:58", "slug": "unit-testing-xamarin-forms-overcome-you-must-call-xamarin-forms-init-problem", "type": "post", "link": "https:\/\/www.jenx.si\/2019\/06\/02\/unit-testing-xamarin-forms-overcome-you-must-call-xamarin-forms-init-problem\/", "title": { "rendered": "Unit testing Xamarin Forms. Overcome “You MUST call Xamarin.Forms.Init()” problem." }, "excerpt": { "rendered": " When unit testing Xamarin Forms, sooner or later you hit at “You MUST call Xamarin.Forms.Init()” problem. In this blog post I will investigate one way how to deal with this issue.<\/p>\n", "protected": false }, "author": 1, "featured_media": 0, "_links": { "self": [{ "href": "https:\/\/www.jenx.si\/wp-json\/wp\/v2\/posts\/949" }], "collection": [{ "href": "https:\/\/www.jenx.si\/wp-json\/wp\/v2\/posts" }], "about": [{ "href": "https:\/\/www.jenx.si\/wp-json\/wp\/v2\/types\/post" ... removed from brevity |
So, from source WordPress I got all I needed. I had adta in JSON form. Ideal form for integrating into systems.
WordPress backend code – PHP example.
I used PHP Everywhere plugin for WordPress to enable injecting PHP code into pages or posts. After I was able to put some PHP logic in my posts/pages, I insert code similar to this (Note, code is not production ready, but for the first review is just ok).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php $url = 'https://www.jenx.si/wp-json/wp/v2/posts?context=embed'; $data = file_get_contents($url); $posts = json_decode($data); foreach ($posts as $post) : ?> <div class="post-column clearfix"> <article class="post type-post status-publish format-standard hentry"> <header class="entry-header"> <div class="entry-meta"> <span class="meta-date"> <a href="<?php echo date('F j, Y', strtotime($post->{'date'})); ?>" rel="bookmark"> <time class="entry-date published updated"><?php echo date('F j, Y', strtotime($post->{'date'})); ?></time> </a> </span> </div> <h2 class="entry-title"> <a href="<?php echo $post->{'link'} ?>" rel="bookmark"><?php echo $post->{'title'}->{'rendered'} ?></a> </h2> </header> <div class="entry-content entry-excerpt clearfix"> <?php echo $post->{'excerpt'}->{'rendered'} ?> <a href="<?php echo $post->{'link'} ?>" class="more-link">Continue reading »</a> </div> </article> </div> <?php endforeach; ?> |
I did similar for Recent posts sidebar and Category listing and integrated in WordPress page and make it as start page.
Result.
So, my problem was solved, just quick look at source and destination web page.
Destination WordPress portal.
Conclusion.
WordPress version 4.7+ exposes data over RestApi service. This is very useful feature because it enables WordPress data to be exposed and used by external systems via Restful services.