display latest post outside of WordPress preferably with JSON WordPress

Lucian Florian comments:

it is same domain so it shouldn't be problems.

Christianto comments:

Can you post the html structure (wrapper) where the title and image will be appended?

Christianto comments:

By using json plugin please try code below (untested) on your js

jQuery(document).ready(function($){
var wrapcontent = 'yourWrapperClass',
blogdirectory = 'blog'
numberpost = '5';

$.getJSON(blogdirectory+'/api/get_recent_posts/?count='+numberpost, function(data){
$.each(data.posts, function(i,post){
var featimg = $(img).attr('src',post.thumbnail);
$(.+wrapcontent).append(function(){
return (featimg) ? '<li><h4>'+post.title+'</h4>'+img+'</li>' : '<li><h4>'+post.title+'</h4></li>';
});
}
});
});


change the variable wrapcontent to your wrapper class where you want content to appear, numberpost to number of recent post, and blogdirectory to blog directory on the domain..

Let me know if this works or turn error..

Christianto comments:

Sorry there are syntax error try below.

jQuery(document).ready(function($){

var wrapcontent = 'yourWrapperClass',

blogdirectory = 'blog',

numberpost = '5';


$.getJSON(blogdirectory+'/api/get_recent_posts/?count='+numberpost, function(data){

$.each(data.posts, function(i,post){

var featimg = $(img).attr('src',post.thumbnail);

$(.+wrapcontent).append(function(){

return (featimg) ? '<li><h4>'+post.title+'</h4>'+img+'</li>' : '<li><h4>'+post.title+'</h4></li>';

});

}

});

});


Christianto comments:

Sorry my eyes start to fail, fix another syntax error, please try code below

jQuery(document).ready(function($){

var wrapcontent = 'yourWrapperClass',

blogdirectory = 'blog',

numberpost = '5';


$.getJSON(blogdirectory+'/api/get_recent_posts/?count='+numberpost, function(data){

$.each(data.posts, function(i,post){

var featimg = $(img).attr('src',post.thumbnail);

$('.'+wrapcontent).append(function(){

return (featimg) ? '<li><h4>'+post.title+'</h4>'+img+'</li>' : '<li><h4>'+post.title+'</h4></li>';

});

}

});

});


Lucian Florian comments:

Can you test it on a regular HTML file? I should work on your local computer if you have jQuery library.

Here is the address to the blog.
http://www.nycsinclair.com/blog/

P.S I tried the code locally and doesn't do anything. For the sake of simplicity let's give up on featured image now.

Christianto comments:

Any error on your browser console? if no error appear then the ajax url should be fix.
Change blogdirectory with your wp blog absolute address like http://yoursite.com/blog

jQuery(document).ready(function($){

var wrapcontent = 'yourWrapperClass',

blogdirectory = 'http://yoursite.com/blog',

numberpost = '5';


$.getJSON(blogdirectory+'/api/get_recent_posts/?count='+numberpost, function(data){

$.each(data.posts, function(i,post){

var featimg = $(img).attr('src',post.thumbnail);

$('.'+wrapcontent).append(function(){

return (featimg) ? '<li><h4>'+post.title+'</h4>'+img+'</li>' : '<li><h4>'+post.title+'</h4></li>';

});

}

});

});


The featured post image still intact, don't worry it won't turn any error if not exists.

Christianto comments:

Also adjust var wrapperclass to place where you want to the content to append (using class).

Christianto comments:

Lucian this is the code with your absolute blog url...

jQuery(document).ready(function($){

var wrapcontent = 'yourWrapperClass',

blogdirectory = 'http://nycsinclair.com/blog',

numberpost = '5';


$.getJSON(blogdirectory+'/api/get_recent_posts/?count='+numberpost, function(data){

$.each(data.posts, function(i,post){

var featimg = $(img).attr('src',post.thumbnail);

$('.'+wrapcontent).append(function(){

return (featimg) ? '<li><h4>'+post.title+'</h4>'+img+'</li>' : '<li><h4>'+post.title+'</h4></li>';

});

});

});

});


Lucian Florian comments:

It was an error with your code: at the bottom I replace } with });

But still nothing displays. the wrapper class div is present.

Now firebug shows a system error:
GET http://nycsinclair.com/blog/api/get_recent_posts/?count=1 200 OK 566ms
firebu...rver.js (line 169)

Christianto comments:

In json api plugin setting, what is the api base?

Lucian Florian comments:

If you take a look here it should explain in detail all parameters: [[LINK href="http://wordpress.org/extend/plugins/json-api/other_notes/"]]http://wordpress.org/extend/plugins/json-api/other_notes/[[/LINK]]

Christianto comments:

The url of your json for recent post is http://localhost/wordpress27/api/get_recent_posts?count=5, its correct, u can check it by yourself.

I check it on localhost right now. The URL of json is correct, firefox firebug also response this request and pass the json to jquery.

But it wont do anything, even if I only call alert('hello') function on callback function. If the data pass correctly, the callback should be run.

Can you write alert('hello') on $.getJSON function, to see if the callback is worked. Only alert('hello')

jQuery(document).ready(function($){

var wrapcontent = 'yourWrapperClass',

blogdirectory = 'http://nycsinclair.com/blog',

numberpost = '5';


$.getJSON(blogdirectory+'/api/get_recent_posts/?count='+numberpost, function(data){

alert('hello');

});

});


Lucian Florian comments:

alert not working either. This is something you can test yourself in a html file locally. If it works there should work in my shop too.

Christianto comments:

Ok Lucian, I use other jquery plugin to fix this.
I try on localhost and run perfectly. This will fetch your title and featured thumbnail if exists.
Please change NYCBLOG_LIMIT value to show recent post number, and NYCWRAPPER_CLASS value to your wrapper class where the content will be appended.


var NYCBLOG_LIMIT = 5;
var NYCWRAPPER_CLASS = 'post';

var WP={open:function(b){var a={posts:function(){var d=10;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://nycsinclair.com/blog/');
blog.posts().limit(NYCBLOG_LIMIT);
blog.posts().all(function(posts){
for(var i = 0; i < posts.length; i++){
jQuery('.'+NYCWRAPPER_CLASS).append(function(){
return (posts[i].thumbnail) ? '<li><h4>'+posts[i].title+'</h4><img src="'+posts[i].thumbnail+'"/></li>' : '<li><h4>'+posts[i].title+'</h4></li>';
});
}
});


Please try and tell me the result in your site..

Lucian Florian comments:

Thanks Christian, it works now but I have 2 issues:
- I need only last post. I put the limit one but it still gets all posts
- the title should be linked to the post itself. If is to complicated it should link to the blog index.

Christianto comments:

The NYCBLOG_LIMIT variable not working, now its works, and the title will link to the post.


var NYCBLOG_LIMIT = 1;
var NYCWRAPPER_CLASS = 'post';

var WP={open:function(b){var a={posts:function(){var d=NYCBLOG_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://nycsinclair.com/blog/');
blog.posts().all(function(posts){
for(var i = 0; i < posts.length; i++){
jQuery('.'+NYCWRAPPER_CLASS).append(function(){
return (posts[i].thumbnail) ? '<li><a href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a><a href="'+posts[i].url+'"><img src="'+posts[i].thumbnail+'"/></a></li>' : '<li><a href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a></li>';
});
}
});



Please vote me,
Thank you..

Lucian Florian comments:

Thanks Christian, it works good now. For information, is any change an update of jQuery Library will break this? I'd like to know a bit more about the plugin you used.

Also can you send me a PM with your email in case client will want more work done? For extra payment of course.

Christianto comments:

I think it won't break, before I minimize it, I see the only jQuery API used by the plugin is $.getJSON, basically its extended version of jQuery getJSON pair with WP plugin JSON API.

The only think you should worried is namespace pollution(variable), since the plugin using WP as the method name. Maybe other plugin using that name too..

For more info this is [[LINK href="http://plugins.jquery.com/project/jquery-wordpress"]]the plugin page[[/LINK]]

Thanks for the offer, I will try to help best I can..
But posting in this site would be a good start, since you will get multiple solution not only from me..

Thank you

Lucian Florian comments:

One more thing before selecting you the winner. How do I show the post excerpt too, in case client wants it? If it doesn't take long.

Thanks for info and for your help.

Christianto comments:

Just call the excerpt object from the posts ( posts[i].excerpt ), and adjust the returning html, for example :

return (posts[i].thumbnail) ? '<li><a href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a><a href="'+posts[i].url+'"><img src="'+posts[i].thumbnail+'"/></a><span>'+posts[i].excerpt+'</span></li>' : '<li><a href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a><span>'+posts[i].excerpt+'</span></li>';

posts[i] object basically is WP json plugin post response object(see on plugin docs). So posts[i].id will return post id, etc..