Create A jQuery Mobile WordPress RSS Reader For Your Site

Anthony James —  January 1, 2012

In this screencast we will walk you through using Yahoo Query Language (YQL) in order to pull your WordPress RSS feed and parse it into a jQueryMobile web app. We will grab the thumbnail, link, title, and description in our app. And, we will also create a detail page to read the detail description that is given from the RSS feed.
Thank you to storbo726 for requesting this screencast!


Download Source Live Demo


Note:

Thanks GajusMusculus for adding in the comments how to solve the character issue. By adding into your header:
 <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>

Anthony James

Posts Twitter Facebook

Anthony is a Web Software Developer & Linux Systems Engineer. With 11 years of experience in these fields. He is also the founder and main contributor at Pinehead.tv. He is passionate about passing on his technical knowledge through training and educating others.

50 responses to Create A jQuery Mobile WordPress RSS Reader For Your Site

  1. Hi Anthony,

    first of all “Happy New Year”!
    I’m following your excellent tutorials since a couple of months now and the only thing I can say is : “Thumbs up”. Really a big help, especially on the mobile sector I’m interested in.
    This tutorial handles stuff I was searching for month’s…
    Thanks for this help!!!

    Best regards
    Thomas

  2. Thanks for the kind words. Any other tuts that your looking for that you might want us to create?

    • Great screencast again Anthonie, two questions i you don’t mind, One, is there a way to grab all of the content and ad this inside your mobile app or website and two, is there a way to get rid of these funky codes in the titles, codes like these ’s

      Makes the title look ugly really

      Thanks

      Dave

    • Hi Anthony,

      what I would like to know is the following:
      As using of PHP inside a native iOS-App is not permitted , how would you handle your example?
      The idea behind my question is building an iOS-App using jQueryMobile, PHP, JavaScript and Phonegap. Isn’t there a way to communicate with this rss-reader and JavaScript. I’m quite familiar with PHP, but not with JavaScript.
      And by the way: How do you like the 1.0 jQM-Version? I still face some problems on the animate n side… But great improvements anyway!

      Best regards from Germany
      Thomas

  3. Hi,

    Am new to all this mobile development and only came across your YouTube channel today.

    I don’t understand this example, can you explain why you needed to use Yahoo for the SQL, couldn’t you have just accessed the RSS feed directly from PHP ?

    Also what did jQueryMobile do ? I could see you included the .js file but not quite sure what it done.

    Dave

  4. Hello Anthony! :)
    Your tuts are great. I jus love the simplicity.
    Can you post some tutorials on making a restaurant e-menu app on jquery mobile.

    • DM me on twitter @pineheadtv and we can discuss what your looking for in the e-menu app.

  5. I still have the question about pulling in all the content of the post into the app instead of a link to the original post, is that possible or is it as simple as having your RSS feeds setting on full?

  6. What if you want to have more than one feed? Like a list with 4 feeds
    and you would click for each feed.

    Thanks
    JB

  7. Hi! I have donwloaded the source code and when I try to run it, it is not working.
    It says:

    Warning: Invalid argument supplied for foreach() in /homepages/22/d395491909/htdocs/e/reader.php on line 31

    What could be the problem with line 31?

  8. Basically it means the XML feed is no longer valid.
    Have you put in your xml feed?

    • I have just downloaded the source code and try to run it.

      The xml feed in the source code is http://feeds.feedburner.com/Pineheadtv and it seems it is working ok.

      On the other hand the live demo is working ok but I don’t know how I can get the source code of the live demo.

      Thanks in advance!

  9. Got the same problem as Pablo, set up the feedburner which is working fine http://feeds.feedburner.com/RedboxMultimediasBlog added and activated the wordpress plugin but still getting the error

    invalid argumentsupplied foreach() in / web1/user27078/website/index.php on line 12

    what XML feed are you talking about above ? bit of a newbie to this so would appreciate the help

    • I’ll take a look at it. Did you follow the tut and build it yourself or are you just wanting the code?

      • I did follow the tut (it is really a great tut!!) but after I follow the tut I get this problem, so I decided to just try to download the source code… same problem.

        • Source works fine, what issues are you having example? What is your xml url that your using?

      • Hi i followed the tut but even using your feed it is not working still getting the foreach arguement but have contacted my hosting company to see if they have white listed yahoo api. they say the problem is not at the server end, can you do me a favour and see if you can load http://feeds.feedburner.com/RedboxMultimediasBlog

        and have it display on your test server. Also still wondering what XML feed your talking about if I can view the feedburner fine in my browser thanks

  10. The source code given is not working, the live demo it working… why?

    • I downloaded the git source and tested it and it works fine. You might consider the type of xml feed your putting in or if there is an issue with your xml feed.

  11. Great tutorial, however, I’m having some problems.

    When the detail=$detail is added to the link, my links were literally displaying the entire post in the link.

    Anyway to solve this?

  12. For those having problem with the source code (including me) I have founded that the problem in my case was not the source code… the source code is working ok.

    This is the problem I had
    Warning: Invalid argument supplied for foreach() in /homepages/22/d395491909/htdocs/e/reader.php on line 31

    The only problem was that the php web server was not config correctly.

    However I am having another problem now: In my feed there is no any field called enclousure so I can not display images properly. I have been trying to use feedburner and blogs from wordpress and blogger.

    How can I have a blog with the same feed than pinehead.tv?

    Thanks in advance

    • Anthony James April 9, 2012 at 2:58 pm

      Pinehead.tv uses feedburner. What is your feed url? I’ll test it and see whats up.

    • im obviously haveing the same issues with my webserver as Pablo can Pablo tell us all that are having trhe same issues as to what the config should be inorder to get this to work

  13. Anthony can you do me a favour and see if my feed comes out ok would be appreciated

    http://feeds.feedburner.com/RedboxMultimediasBlog

    many thanks in advance, really want to get this working and would love to know what the webserver config issue i have is as i have talked to the hosting company and they say they dont have a problem

    • Also your feed doesn’t have images associated with it so i just removed the img src.
      Remember the rss only provides a “short description” of information. If you click the link it will take you to the next page (you’ll need to format it)

  14. It’s not a web server config issue it’s just your feed. Make sure you actually follow the screencast to learn how to build this since not every feed is the same.

    David here is your code, literally all i did was plugin your source and it worked. I needed to remove the \”\” on the link because of your link url’s but it still pulled in the feed without issue just not formatted well.

    http://tuts.pinehead.tv/jqmobile/rsswordpress/RedboxMultimediasBlog.zip

    So just know this, not every feed is the same. Just trouble shoot and ask questions based off your issue. You can do it at pinehead.tv/community.

    • Thanks for taking the time to have a look for me, much appreciated but still not working for me and getting the foreach arguement on line 34, even on Pineheadtv feedburner feed. Will re look at the screen cast and see if I can resolve the issue

  15. All of the content for the post on my feed is located under encoded. When I try to use that instead of desc it flips out and puts all of the content as list elements in reader.php.

  16. Hi again!

    In order to avoid this problem: “Warning: Invalid argument supplied for foreach() in line 31″ I had to allow URL fopen in my php web server.

    But I am still having problems with the RSS Feed. I am using WordPress + FeedBurner but I am not able to display images.

    Regarding the line 34
    $img = $post->enclosure->url;

    There is no any enclosure field in my RSS Feed. I have the field “media:content” but I can not parse that field because of the char “:”

    Any idea?

  17. Same problem… I am not able to display images from my feed!!

  18. DEMO ERROR:

    Pinehead.tv Simple Mobile Rss Site

    Warning: Invalid argument supplied for foreach() in /content/disk/sites/pinehead/www/tuts/jqmobile/rsswordpress/reader.php on line 35

    • Try again. Built a version for you to plugin your own feed and placed it in the wrong file.

  19. You can test your feed by changing the feed url on the end.
    tuts.pinehead.tv/jqmobile/rsswordpress/testyourfeed.php?feed=http://feeds.feedburner.com/PineheadTV

  20. Thanks so much for the tutorial; appreciate it. The code works on your feed, and I got it to work partially on my feed, but the problem I’m having is as follow:
    The description part of the feed is echoed together with the title (header), and does not progress to the description page once selected. Would appreciate any help/pointers you can provide.

    Thanks once again.

  21. Great tutorial. One quick question how would I have it just display 3 items of the RSS feed instead of all of them?

    • Anthony James July 22, 2012 at 2:04 am

      What you will want to do is add a for loop. That basically says as long as i < 4 then display the next one. Then inside of the loop you’ll count each i++ For example..

      for ($i = 0, $i <4, $i++) {
      RSS feed code.
      $i++
      }

      As soon as i = 3 it will stop pulling in the rss feeds.

  22. Hey Anthony
    I love your tutorials and everything on my rss reader works great, but was wondering how to get the date of the post in there as well, it calls it pubdate and I made a string called $date but when I put date=$date in the echo part nothing works. I have tried many things even shorthand calls but nothing seems to work. Also I would like to limit the posts to just like 5 or so, If you could help that would be great. How would I get files to you?

  23. Does anyone know how to add the “encoded” content on the details.php page? On the details.php page I want to view the entire full content of the post (not the description).

    Here’s my reader.php page (http://www.rodriguezproject.com/ifl-iphone-app/reader.php)

    Here’s my detail.php page (http://www.rodriguezproject.com/ifl-iphone-app/detail.php)

    Thanks in advance for your yelp,

    Matt

Trackbacks and Pingbacks:

  1. Wordpress RSS Reader « Are You jQuerying? - May 9, 2012

    [...] Download from http://tuts.pinehead.tv/2012/01/01/create-a-jquerymobile-wordpress-rss-reader-for-your-site/ [...]