DiggingIntoWordPress

by Chris Coyier & Jeff Starr

WordPress JSON API Plugin

Posted by on

WordPress already kind of has an XML API. Basically, RSS feeds. WordPress creates feeds for all kinds of stuff: recent posts, comment threads on any Page or Post that has comments, category-specific, tag-specific, and more. The codex covers all this and we’ve also covered creating your own unique feeds that could literally be from any data in your WordPress database.

So RSS is pretty sweet. There are lots of feed parsers out there that can do cool stuff with feeds. XML is pretty cool. PHP5 has functions to make decently quick work of parsing XML.

But what if you are working with JavaScript? XML + JavaScript kinda sucks. The JSON format is approximately one million times easier to work with. Fortunately there is a kick-ass plugin for us!

The Plugin…

is by Dan Phiffer who created it for for working with the MoMA (Museum of Modern Art) blog. Apparently it’s some Frankenstein’s monster of Ruby on Rails and WordPress.

WordPress JSON API Plugin

All you need to do is install and activate it, and you’ll have access to a new URL structure that servers up JSON data.

At its most simple:

http://example.com/?json=1

Which will return delicious, delicious JSON:

{
  "status": "ok",
  "count": 1,
  "count_total": 1,
  "pages": 1,
  "posts": [
    {
      "id": 1,
      "slug": "hello-world",
      "url": "http:\/\/localhost\/wordpress\/?p=1",
      "title": "Hello world!",
      "title_plain": "Hello world!",
      "content": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<\/p>\n",
      "excerpt": "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!\n",
      "date": "2009-11-11 12:50:19",
      "modified": "2009-11-11 12:50:19",
      "categories": [],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "admin",
        "name": "admin",
        "first_name": "",
        "last_name": "",
        "nickname": "",
        "url": "",
        "description": ""
      },
      "comments": [
        {
          "id": 1,
          "name": "Mr WordPress",
          "url": "http:\/\/wordpress.org\/",
          "date": "2009-11-11 12:50:19",
          "content": "<p>Hi, this is a comment.<br \/>To delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.<\/p>\n",
          "parent": 0
        }
      ],
      "comment_count": 1,
      "comment_status": "open"
    }
  ]
}

The plugin page has comprehensive notes on how you can structure the URLs to get just what you need back.

Of course, the more that you want, the larger the size of the data is, the harder it has to work, and the slower it can be. The plugin allows you to trim down what it returns to speed things up if needed. This is how to get just 10 posts, with a specific custom field, and only a few other things:

http://example.com/?json=1&count=10&custom_fields=PostThumb&include=title,custom_fields,excerpt

What might you use this for?

jQuery UI has recently released a new feature: Autocomplete. I learned that it basically consumes JSON data to populate what it autocompletes with. So I decided to try and connect the two and make an autocomplete search box for this site.

Try typing in like “CSS” or something and you can see some articles autocomplete below the input. You can select one and press return to go to that post. It’s kinda cheezy, probably not something I would roll out live, but it was a fun demo to work on. If you want to see the JavaScript that powers it, check it out.

To be fair, I had to hack the plugin just slightly to get it to work. The autocomplete plugin wants a “value” and “label” data in the JSON, so I added them. It’s a pretty trivial adjustment so if anyone wants that code, let me know.

UPDATE: (2010/06/30) Demo temporarily removed for security.
UPDATE: (2012/10/02) Restored Demo with new, secure version of plugin.
UPDATE: (2013/09/17) Demo stopped working after WP update. Removed.

13 Responses

  1. David Krug June 1, 2010

    This is pretty awesome actually. Great things to come I’m sure now that someone has created this. Autocomplete search is just the beginning of things you could do with this.

  2. I have it installed but don’t really use it. Its a great plugin, does the job.

  3. Slobodan June 1, 2010

    Seems like a cool plugin, thanks for sharing. :)

    But the path to the autocomplete.js in the demo is wrong so it doesn’t work :)

    • Thanks for the heads up, some folder got moved, should be fixed now.

      • Slobodan June 1, 2010

        Still has some strange problems.

        In firefox doesn’t work at all and still shows the autocomplete.js as 404 page. When i try to open the js file it doesn’t work (404), but when i add the “www” it shows it.

        In Chrome it does work (strange, it shows the js file with and without the “www”) when i type in “c” for example, but when i continue typing “css” it shows nothing. Tried “WordPress” too, doesn’t work. Nothing except few single characters work.

      • Slobodan June 1, 2010

        Sorry, the 404 prob was caching issue, it loads it properly now. But the second prob is still there.

      • This problem is fixed now too. In the article I mentioned I needed to hack one of the plugin files. I had done that, but I think the plugin was upgraded and lost that hack. The point was that the JSON needed to have a value and label, so I re-hacked the post.php file (in the folder “models” to have:

        $this->set_value(‘label’, get_the_title($this->id));
        $this->set_value(‘value’, get_permalink($this->id));

        Around line 132.

  4. Very very cool, bye bye XML RPC :P

  5. Very nice information. This plugin can help us work with ajax much easier. Thanks, Chris Coyer.

  6. Brittany Boitnott June 3, 2010

    Hey, I have been reading for reviews of bloggers, and after hunting through bing, I came to this article, it really issweet article. Too bad I took long getting to . Bookmarked you already. I shall visit soon. Just keep writing and follower count will go up.

  7. Definitely saving this one. I have a Maui blog where posts are geotagged, and this will certainly make it easy those throw them together on a Google Map.

  8. This seems very useful. I will try this on my site. I have tough time searching my own posts.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry