Ask your WordPress questions! Pay money and get answers fast! (more info)

display latest post outside of WordPress preferably with JSON

  • SOLVED

First of all I made it working fine on a simple PHP page with SimplePie RSS library. The problem is that it needs to be integrated in a shopping cart and there we have the PHP error reporting turned on. The error is that "sanitation" code used in SimplePie is deprecated in PHP 5.3.

<strong>[UPDATE]: Shopping cart and blog installed under same domain. Blog in a subdirectory.</strong>

I have also tried this method, but the cart gives another error about some deprecated code in WordPress.
[[LINK href="http://www.corvidworks.com/articles/wordpress-content-on-other-pages"]]http://www.corvidworks.com/articles/wordpress-content-on-other-pages[[/LINK]]

However, I think the following JSON solution might work, but I don't have the jQuery knowledge to show it up on my site.
This plugin enables JSON in WordPress:
[[LINK href="http://wordpress.org/extend/plugins/json-api/"]]http://wordpress.org/extend/plugins/json-api/[[/LINK]]

This is the data returned (plugin has more options to play with if you read instructions):
[[LINK href="http://nycsinclair.com/blog/?json=1"]]http://nycsinclair.com/blog/?json=1[[/LINK]]

I'd like to show the latest post title linked to the post. Eventually the featured image if present.

Let me know if this would be possible or if you think other solution will work better. (I tried other RSS libraries like Magick Pie, LastRSS but no luck.)

Answers (5)

2011-04-28

Christianto answers:

Did you mean by 'outside wordpress' is showing on different cms/sites using ajax request?
So the title and featured image if present can be return and used in that different cms/sites?

I think you know due to security reason most ajax request should be same origin (domain/subdomain).

Or this is just fetch the data on the same site using ajax request and json, using the json API plugin...

I never knew that there is plugin that will provide wordpress content in json format natively, very interesting...


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..

2011-04-28

Jarret Minkler answers:

Have you tried loading the Zend RSS lib in?


Lucian Florian comments:

I was thinking about that too, but decided no waste more time with something that might have deprecated code in it.


Jarret Minkler comments:

Deprecated isn't bad, yet. Zend's should also not be deprecated.

So basically in jquery all you do is take that URL and do an ajax request to it ... then you set whatever elements you want from the json returned
For example:

posts = json.posts;

//First post
post = posts[0];
$('#comments').append(post.title);


Jarret Minkler comments:

$.ajax({
url: "http://nycsinclair.com/blog/?json=1",
context: document.body,
success: function(resp){
// then mess with the response here
}
});

2011-04-28

Sébastien | French WordpressDesigner answers:

you want create a page which display the last post, that's it ?


Lucian Florian comments:

yes, it will be on a specific portion of the page. I attached a screenshot.


Sébastien | French WordpressDesigner comments:

could be the age in the same directory of wordpress ?


Sébastien | French WordpressDesigner comments:

create a file "test.php
if the page "test.php" is on the root of the server, paste this code in test.php :
<?php
// Include Wordpress
define('WP_USE_THEMES', true);//TRUE = to use your wordpress theme
require('./directory_of_wordpress/wp-load.php');

?>
<?php get_header(); ?>
<?php query_posts("posts_per_page=1");
if ( have_posts() ) : while ( have_posts() ) : the_post();
the_title();
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
endwhile; else:
endif;
wp_reset_query();
?>
<?php get_footer(); ?>

change the path of wp-load.php as you need
After, go to http://yoursite.com/test.php


Lucian Florian comments:

I also pointed out that I tried this method and doesn't work with the shopping cart. It works in a normal PHP file.

This is the error I get. Unless WordPress updates the code it cannot be used.
<em>Assigning the return value of new by reference is deprecated
$wp_the_query =& new WP_Query();</em>


Sébastien | French WordpressDesigner comments:

have you try without query_posts ?
Could you try without query post and tell me if it's ok, please

2011-04-28

John Cotton answers:

You shouldn't need a plug-in to do this.

Decide on a custom url that won't conflict with your site and then pop this into your theme's function file:


function latest_post_as_json() {
global $wp;

if( $wp->request == 'latest-post-as-json') {
$post = new WP_Query(array('posts_per_page' => 1));

if( $post ) {

$id = get_post_thumbnail_id($post->post->ID);

if($id) {
$post->post->thumbnail = wp_get_attachment_thumb_url( $id );
}

echo json_encode($post->post);

}

exit;
}

}
add_action('template_redirect', 'latest_post_as_json');


You'd call that with http://my-site.com/latest-post-as-json

Change the args for the WP_Query to whatever you want.


Lucian Florian comments:

My issue is, how do I show that on a separate page with jQuery? Please see the attached screenshot of the elements that need to be appended.


John Cotton comments:

Assuming your HTML looks a bit like this:<div id="externalBlock"><h1 id="blocktitle"></h1></div>


jQuery.getJSON('/latest-post-as-json/', function(data) {

jQuery('#blocktitle').text = data.post_title;
jQuery('#blocktitle').after(data.post_content);

//etc
});


John Cotton comments:

Actually, this is a bit more readable:


<div id="externalBlock"></div>

<script>
jQuery.getJSON('/latest-post-as-json/', function(data) {
jQuery('#externalBlock').append('<h1>'+data.post_title+'</h1>');
jQuery('#externalBlock').append(data.post_content);

//etc
});
</script>


Lucian Florian comments:

Your function returns something
http://nycsinclair.com/blog/latest-post-as-json

However, I tried your jQuery code in the site and doesn't not work. Is nay change you can test this on a local file? It should work on your end.

I tried calling the url absolutely:
http://nycsinclair.com/blog/latest-post-as-json

2011-04-28

Denzel Chia answers:

Hi,

If you are interested I can write you a simple rest api plugin for your blog.
and a function to interact with this api, so as to retrieve the latest post on blog and display on your shopping cart.

But first of all I need to know the following information.
1) is your shopping cart a wordpress installation?
2) does your web hosting support Curl? it is ok if you are not sure.

If you are interested, I will need a ftp access, and wordpress admin access for your blog and shopping cart. because I need to test the rest end point and integrate both websites.

Please send you credentials to [email protected]
Please send them within 30 minutes, because it is late in my time zone and I need to sleep.

Thanks.
Denzel


Denzel Chia comments:

Hi,

Had not received any reply yet. I assume you are giving up this opportunity to have a rest api for your blog for only $20.

Thanks.
Denzel