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

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$20
display latest post outside of WordPress preferably with JSON

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.

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

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

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:
http://wordpress.org/extend/plugins/json-api/

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

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

This question has been answered.

attachment image View Attachment

Lucian Florian | 04/28/11 at 10:13am Edit

Previous versions of this question: 04/28/11 at 10:34am | 04/28/11 at 10:40am

(5) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    04/28/11
    10:22am
    Jarret Minkler says:

    Have you tried loading the Zend RSS lib in?

    • 04/28/11 10:30am

      Lucian Florian says:

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

    • 04/28/11 11:10am

      Jarret Minkler says:

      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);

    • 04/28/11 11:16am

      Jarret Minkler says:

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

  • avatar
    Last edited:
    04/28/11
    10:25am
    Sébastien | French WordpressDesigner says:

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

    • 04/28/11 10:35am

      Lucian Florian says:

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

    • 04/28/11 10:42am

      Sébastien | French WordpressDesigner says:

      could be the age in the same directory of wordpress ?

    • 04/28/11 10:51am

      Sébastien | French WordpressDesigner says:

      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

    • 04/28/11 10:59am

      Lucian Florian says:

      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.
      Assigning the return value of new by reference is deprecated
      $wp_the_query =& new WP_Query();

    • 04/28/11 11:05am

      Sébastien | French WordpressDesigner says:

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

  • avatar
    Last edited:
    04/28/11
    10:35am
    Christianto says:

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

    • 04/28/11 10:38am

      Lucian Florian says:

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

    • 04/28/11 11:04am

      Christianto says:

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

    • 04/28/11 11:34am

      Christianto says:

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

    • 04/28/11 11:47am

      Christianto says:

      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>';

      });

      }

      });

      });

    • 04/28/11 12:37pm

      Christianto says:

      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>';

      });

      }

      });

      });

    • 04/28/11 12:58pm

      Lucian Florian says:

      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.

    • 04/28/11 1:22pm

      Christianto says:

      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.

    • 04/28/11 1:25pm

      Christianto says:

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

    • 04/28/11 1:48pm

      Christianto says:

      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>';

      });

      });

      });

      });

    • 04/28/11 1:56pm

      Lucian Florian says:

      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)

    • 04/28/11 1:59pm

      Christianto says:

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

    • 04/28/11 2:06pm

      Lucian Florian says:

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

    • 04/28/11 2:27pm

      Christianto says:

      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');

      });

      });

    • 04/28/11 2:50pm

      Lucian Florian says:

      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.

    • 04/28/11 3:56pm

      Christianto says:

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

    • 04/28/11 4:07pm

      Lucian Florian says:

      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.

    • 04/28/11 4:13pm

      Christianto says:

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

    • 04/28/11 4:27pm

      Lucian Florian says:

      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.

    • 04/28/11 4:43pm

      Christianto says:

      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 the plugin page

      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

    • 04/28/11 4:52pm

      Lucian Florian says:

      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.

    • 04/28/11 5:07pm

      Christianto says:

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

  • avatar
    Last edited:
    04/28/11
    10:47am
    John Cotton says:

    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.

    • 04/28/11 10:53am

      Lucian Florian says:

      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.

    • 04/28/11 11:03am

      John Cotton says:

      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
      });

    • 04/28/11 11:08am

      John Cotton says:

      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>

    • 04/28/11 1:12pm

      Lucian Florian says:

      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

  • avatar
    Last edited:
    04/28/11
    12:15pm
    Denzel Chia says:

    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@denzeldesigns.com
    Please send them within 30 minutes, because it is late in my time zone and I need to sleep.

    Thanks.
    Denzel

    • 04/28/11 12:48pm

      Denzel Chia says:

      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

This question has expired.



Lucian Florian voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.