Display Latest Post Outside of WordPress with JSON and jQuery

Pull the latest blog post from WordPress with JSON and jQuery, which works great on any static HTML page, PHP page or any CMS / Ecommerce platform you can imagine.

View Demo

quick note: the demo is not working momentarily since I had to disable the jSON API however the method is still valid.

The PHP and MagicPie RSS methods

There are two other methods you might want to try out, which are explained in this article, so I won’t go over them. The methods will throw a deprecated error if your hosting provider is using PHP5.

The shopping cart I used (Lemonstand) had the error reporting turned on, with no (easy) way to turn it of and so, the solutions didn’t worked with this platform, although they worked with a basic .php file.

Please follow the instructions closely, otherwise it will fail to work.

The JSON / jQuery method

1. Enable JSON API in the WordPress blog

First thing you need to install the following plugin in WordPress: http://wordpress.org/extend/plugins/json-api/.
Without it, we cannot pull the post information we need so make sure you also run a test to see if it works. The plugin is well documented so that should be straight forward.

Make sure the core option is activated and the API base has api as extension.

2. Include jQuery in the outside WordPress file

From this point on, we will work outside of WordPress where you want to show the latest post(s). For testing purposes you can even create a index.html file on your computer.

Next, we need to make sure we have the jQuery library included. You can link from the Google CDN for better performance:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script>

Or, you can also leave it included from WordPress so it will upgrade automatically along with WordPress (recommended)

3. Include the JSON / jQuery code within head tags

<script type="text/javascript">
var MYBLOG_LIMIT = 3;
var MYWRAPPER_CLASS = 'homeblog';

var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+"/api/get_recent_posts/";f+="?count="+d+"&page="+e+"&callback=?";jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};

var blog = WP.open('http://www.fldtrace.com');
blog.posts().all(function(posts){
  for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
      return (posts[i].thumbnail) ? '<a class="lastpost_title" href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a><a href="'+posts[i].url+'"><img src="'+posts[i].thumbnail+'"/></a>' : '<a href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a>';

    });
  }
});
</script>

You need to configure the next options

  • var MYBLOG_LIMIT = 1; will define how many posts will show. By default is 1.
  • var MYWRAPPER_CLASS = ‘homeblog'; – the class name of HTML element where the post(s) will be shown.
  • var blog = WP.open(‘http://www.fldtrace.com/’); – this should link to your blog main domain (mandatory)
  • by default, will be shown the post thumbnail and title both linked. The rest is CSS customization, including adjusting the thumbnail size.

4. Define the place where the post should show up

Apply the following class to an element somewhere within body tags:

<div class="homeblog">
</div>​

Notes

Additionally you can pull more post information using the plugin’s JSON API documentation.

I’d say this method gives us a lot of freedom of showing posts from WordPress anywhere you need, compared to the PHP method where we have limitations.

38 Responses to “Display Latest Post Outside of WordPress with JSON and jQuery”

  1. I followed your instructions and I got this error.

    Error: Smarty error: [in customer/home.tpl line 18]: syntax error: unrecognized tag: open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+”/api/get_recent_posts/”;f+=”?count=”+d+”&page=”+e+”&callback=?”;jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j/var/www/vhosts/skinsplendor.com/httpdocs/include/lib/smarty/Smarty.class.php on line 1092

  2. Have you enabled the JSON plugin on the blog, from the 1st step?

    If yes, then you can test the code on a regular static html page to make sure you don’t get un-related errors.

    Make sure the path to the blog is correct

  3. Hello,

    I came across this since I was looking for a way to just simply feed the latest blog post onto my static html page. I too have followed the simple instructions but nothing is showing up on the index.html. No thumbnail or title link shows up. I made sure the JSON plugin was installed and activated. The path to the blog is correct. So I’m not sure what else I might be missing. Any ideas?

    Thanks!

  4. ok guys I ran another test following my own tutorial and I noticed I missed a quote when I included the jQuery library (not big if an issue if you had it included already).

    Second, I updated the link to the demo store to point to my site where I have the plugin installed and it works.
    LE: I also added a view demo page at the top of tutorial.

  5. Hello.

    I have activate the core option of the JSON API in my WordPress plugin settings.
    I copy all your sample code exactly to my html page.
    Run with your data is okay.
    When I change the sample url to my url, it is not show anything.
    When I type ?json=1 after my url in a browser, then I see some posts.

    What do I wrong?
    The only thing is that my url has a subdomain (no WWW).
    Do you have any idea?

  6. For some reason the jSON API plugin probably doesn’t work properly with your installation. Check to see if you have any plugin conflicts by de-activating them temporarily.

  7. Thanks for your quick reply.
    I have try the whole thing on another subdomain from me, there it is working.
    Hmmhmm, now I have to find out what is wrong with the first one :)

  8. Would be a really cool solution but unfortunately I can’t get it to work either. The test page works but I guess plugin conflicts prevent it. Too bad.

  9. This doesn’t work and I have the api plugin working correctly.

  10. Works like a charm – thank you very much!

  11. Well done. it works fantastic!
    Now I have another question…

    How can I load and display a post, which the user has clicked on before?

  12. Hi,

    Thanks a lot for your work.

    Is it really mandatory to have :
    var blog = WP.open(‘http://www.mydomain.com/’);
    instead of :
    var blog = WP.open(‘http://www.mydomain.com/blog/’);

    Is there a workaround ?
    Thanks :)

  13. Hello,

    This WP class looks and works impressive, but lack comments, documentation and stuff. It’s the only out of the box wordpress jsonp implementation i found in the web.

    This could transform in to a popular, useful project.

    Anyway – good job man, many thanks!

  14. Hello,

    I’ve gotten your script to work, however, the thumbnails from my WordPress site are not showing up. Only the titles.

    I’ve tried replacing:

    var blog = WP.open('http://www.fldtrace.com/');
    blog.posts().all(function(posts){
      for(var i = 0; i < posts.length; i++){
        jQuery('.'+MYWRAPPER_CLASS).append(function(){
          return (posts[i].thumbnail) ? ''+posts[i].title+'' : ''+posts[i].title+'';
     
        });
      }
    });
    
    

    with

    var blog = WP.open('http://www.fldtrace.com/');
    blog.posts().all(function(posts){
      for(var i = 0; i < posts.length; i++){
        jQuery('.'+MYWRAPPER_CLASS).append(function(){
          return (posts[i].medium) ? ''+posts[i].title+'' : ''+posts[i].title+'';
     
        });
      }
    });
    
    

    I switched out pulling the “thumbnail” with “medium”. I tried all sizes, but the only way I can pull images in is by replacing “thumbnail” with “content”, which pulls the whole post.

    Do you have any suggestions?

    How are you uploading and saving your images in WordPress?

    Thanks

  15. Sorry all the code didn’t show up in the first post it.

    The full code is here. I changed:

    var blog = WP.open('http://www.endofphotography.com');
            blog.posts().all(function(posts){
                             for(var i = 0; i < posts.length; i++){
                             jQuery('.'+MYWRAPPER_CLASS).append(function(){
                                                                return (posts[i].thumbnail) ? ''+posts[i].title+'' : ''+posts[i].title+'';
                                                                
                                                                });
                                             }
                             });
    

    Changed to:

    var blog = WP.open('http://www.endofphotography.com');
            blog.posts().all(function(posts){
                             for(var i = 0; i < posts.length; i++){
                             jQuery('.'+MYWRAPPER_CLASS).append(function(){
                                                                return (posts[i].medium) ? ''+posts[i].title+'' : ''+posts[i].title+'';
                                                                
                                                                });
                                             }
                             });
    

    Also, I didn’t mention, but when I pass your URL to your blog. It works.

  16. Hi Paul, I have a project I need to try this method so I’ll let you guys know how it works with latest WP and plugin versions.

  17. Thanks Lucian!

    Yeah, I was going to mention that I’m using the latest version of WordPress 3.3.1. I don’t know if that is why.

    After messing with the code, I got it to work with my project after all. It’s probably a hack. Only thing is that I’d like the date to show up as well, but other than that it works well!

    Here is the part of the code that I changed:


    var blog = WP.open(‘http://www.endofphotography.com/’);
    blog.posts().all(function(posts){
    for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
    return (posts[i].content) ? '’+posts[i].title+”+posts[i].content+” : ”+posts[i].date+”;

    });
    }
    });

    I’m passing ‘content’, instead of ‘thumbnail’, in the return function and I took out the “<image src.." out of the code. Works for my blog! Works for your blog as well, however, the formatting is slightly different.

    Also, I wrapped them in "” instead of “” link tags, because this project is for an app and I don’t want the user to click any links that would force them out of my app.

    Anyway, great work! !

  18. Above comment, last part should read:

    Also, I wrapped them in DIV tags instead of A tags i.e. link tags, because this project is for an app and I don’t want the user to click any links that would force them out of my app.

  19. Sorry, code should read.


    var blog = WP.open('http://www.endofphotography.com/');
    blog.posts().all(function(posts){
    for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
    return (posts[i].content) ? ''+posts[i].title+''+posts[i].content+'' : ''+posts[i].date+'';

    });
    }
    });

  20. OR maybe:

     var blog = WP.open('http://www.endofphotography.com/');
            blog.posts().all(function(posts){
                for(var i = 0; i < posts.length; i++){
                    jQuery('.'+MYWRAPPER_CLASS).append(function(){
                return (posts[i].content) ? ''+posts[i].title+''+posts[i].content+'' : ''+posts[i].date+'';
                                                                
                   });
                }
            });
    

    Sorry again, feel free to delete any redundant posts!

  21. I’m using this and it works brilliantly…

    I’ve included some extra code to allow the post content and date to be shown. However, I was wondering if and where I could include the argument ‘date_format’ as specified in the JSON-API plugin docs to allow me to show only the day month and year as apposed to the default formatting.

    Thanks

  22. Fantastic little plugin and some useful comments on this blog. I’ve noticed though, that it will only start pulling in your posts if you remove them and add new ones – did anyone else have these problems?

    Also, I’m trying to wrap each post in a div class, so I can add some styling – how do you achieve this?

    Does anyone know how to include the content AND the featured image together? It seems I can only have one or the other… how would I write this?

    Many thanks.

  23. I am working with this and I seem to be running into issues with no data being appended to the html page.

    Is this a problem with new WordPress installations after a certain version?

    Any fixes?

  24. Got it working with Paul’s code. His March 22nd at 2:50PM post.

  25. Yeah I managed to sort it through that post too! I’ve also maanaged to use logic and wrap each within a div. Now if I could only limit the post character length…

    Here’s my code, hope it helps someone…

    var MYBLOG_LIMIT = 1;
    var MYWRAPPER_CLASS = ‘homeblog';
    var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+”/api/get_recent_posts/”;f+=”?count=”+d+”&page=”+e+”&callback=?”;jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};
    var blog = WP.open('http://cavortcreative.com/blog/&#039;);
    blog.posts().all(function(posts){
    for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
    return (posts[i].thumbnail) ? '’+posts[i].title+’‘+posts[i].content+’Read More →‘ : ”+posts[i].title+”+posts[i].content+’Read More →‘;
    });
    }
    });

  26. @James – Glad I was able to help. Were you able to get it showing with the date?

    @Ed – Tried your code but didn’t work. Maybe something got left out when you pasted it. I was having that trouble as well

  27. This is great and working perfectly for me. I also need to change the format of the date and could you please tell me how to use the author object to display the author name? Many thanks

  28. Your code is great. Thanks for sharing! I do have one thing I’d like to add. Is there a way to exclude categories.

    It seemed to work with the normal json plugin by adding the code below to the wp functions.php, but when I activated json api and implemented your code, it’s showing all categories. Thanks!

    function myFilter($query) {
    if ($query->is_feed) {
    $query->set(‘cat’,’-173,-183,-176,-185′);
    }
    return $query;
    }

    add_filter(‘pre_get_posts’,’myFilter’);

  29. I dont know how to write any jqeury / javascript

    I have the below code working based on the above.
    But I need to be able to limit the characters (for example to 200) then have a read more button with link to the post. Would anyone please be able to modiify the code to what I would need.

    Thanks

    var MYBLOG_LIMIT = 2;
    var MYWRAPPER_CLASS = ‘latest-blog-post';

    var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+”/api/get_recent_posts/”;f+=”?count=”+d+”&page=”+e+”&callback=?”;jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};

    var blog = WP.open('http://www.healthinsurance-spain.com/blog/&#039;);
    blog.posts().all(function(posts){
    for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
    return (posts[i].content) ? '‘+posts[i].title+’‘+posts[i].content+” : ‘‘+posts[i].title+’‘;

    });

    }
    });

  30. *Make sure the core option is activated and the API base has api as extension.*

    How do u do this? As mine isnt working and i am sure i havent done that.. pls help me.

    thanks..

  31. is there a php version?

    how do i limit the number of characters in the content?

  32. I finally got everything to work and I updated wordpress and everything stopped working. is there anything I could can do it get it working again. TIA

    var MYBLOG_LIMIT = 5;
    var MYWRAPPER_CLASS = ‘homeblog';

    var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+”/api/get_recent_posts/”;f+=”?count=”+d+”&page=”+e+”&callback=?”;jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};

    var blog = WP.open('http://citysightseeingtoronto.com/blog/?json=1&#039;);
    blog.posts().all(function(posts){
    for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
    return (posts[i].thumbnail) ? '‘+posts[i].title+’‘ : ‘‘+posts[i].title+’‘;

    });
    }
    });

  33. @Owusu: in WP admin, go to Settings > JSON API > find the Core Controller listing and if it says “Activate” click on it. If it say “Deactivate”, don’t. It’s already activated and you are having some other issue :)

  34. I got it to work and it displays the post title and image but I wanted to know how to make it pull the excerpt and limit the amount of words?

  35. Hi, very nice your solution, I was looking for something like that for a long time and, finally, there we go! I would like to ask you something: How can I retrieve all data returned from the query results via JSON into an array? I will need to import all posts from a WP blog into an external database which is used by a customer website however I have no idea how to get it. I need to know also if is possible to retrieve the posts date.

    Thanks!

  36. I was looking for answers to some of the questions in this article, how to get the thumbnail and excerpt.

    I am using wordpress 3.5 –

    for thumbnail instead of posts[i].thumbnail use:
    posts[i].attachments[i].images.thumbnail.url

    for excerpt use:
    posts[i].excerpt

    hope this helps someone.

    Thanks
    Stephen

  37. if i could update my post – it should be attachments[0] to get the first image in posts[i]

    NOT attachments[i]

  38. I have the same question as Chris from 5/1/2012 and I do not see an answer. Can anyone point me in the right direction? I’m looking to change the date formatting and I’ve seen numerous examples but none using this setup. How and where do I add the date_format argument?