WordPress JSON API Plugin
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.
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=1Which 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,excerptWhat 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 site1.
Autocomplete search exampleTry 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.
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.
1 Editor’s note: autocomplete search not available in the current theme.
About the author
Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.
13 responses
-
David KrugThis 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.
-
Manmohanjit SinghI have it installed but don’t really use it. Its a great plugin, does the job.
-
SlobodanSeems like a cool plugin, thanks for sharing. :) But the path to the autocomplete.js in the demo is wrong so it doesn’t work :)
-
Chris Coyier Post AuthorThanks for the heads up, some folder got moved, should be fixed now.
-
Slobodan
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
Sorry, the 404 prob was caching issue, it loads it properly now. But the second prob is still there.
-
Chris Coyier Post Author
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.
-
Slobodan
Works perfect now, thanks Chris.
-
-
-
-
Chris MVery very cool, bye bye XML RPC :P
-
RilwisVery nice information. This plugin can help us work with ajax much easier. Thanks, Chris Coyer.
-
Brittany BoitnottHey, 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.
-
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.
-
DaisyThis seems very useful. I will try this on my site. I have tough time searching my own posts.
