Displaying Recent Posts On a Non-WordPress Page
Listing recent posts on a WordPress page is easy – there are various widgets and theme functions available just for that purpose. But what about a non-WP page, or even a different site? That’s not that hard either – simply grab some posts from the blog’s RSS feed and output them on your page. In this post I’ll explain how you can do that either with JavaScript or PHP.
JavaScript – The Easy Way
If you just want a simple box containing the most recent entries, you’re in luck – there won’t even be any programming involved. You can use one of the many free JavaScript scripts that can display RSS feeds in a variety of formats. Personally, I recommend Feed2JS. It’s straightforward and minimalistic, yet still fairly configurable. And if that doesn’t suite you, there are many alternatives available – just google “rss to javascript”.
JavaScript RSS widgets have the advantage of simplicity and minimal server performance impact (the feed is loaded client-side). However, if you want to do something more advanced, like filtering posts by author, a ready-made script might not be enough. Also, the output generated by JavaScript isn’t part of the page HTML – something to consider if you’re concerned about SEO.
PHP – The Slightly Advanced
You can also use a PHP script to fetch, parse and display recent posts. There are lots of ways to do this, but I’ll focus on one of the easiest approaches. We will use the SimplePie RSS parser to handle all the boring parts – loading the feed, parsing it, caching, etc.
Lets get started. First, Download SimplePie. You’ll get a .zip archive with a number of files, but for this you’ll only need one of them – simplepie.inc. Put this file somewhere your PHP script(s) can access it. For example, if you want to display your recent posts on http://example.com/stuff/page.php, you could put simplepie.inc in the stuff directory. Also, create a cache subdirectory in the same folder – SimplePie will automatically use it for caching the RSS feed.
Next, put this script somewhere on your page (change $feed_url to match your blog’s feed) :
<?php
$feed_url = 'http://w-shadow.com/feed/';
$max_items = 5;
//Load SimplePie
include 'includes/simplepie.inc';
//Fetch the RSS feed
$feed = new SimplePie($feed_url);
//Check for errors
if ($feed->error())
echo 'Error : ',$feed->error();
//Output up to $max_items posts
foreach ($feed->get_items(0, $max_items) as $item): ?>
<div class="item">
<h3 class="title"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3>
<?php echo $item->get_description(); ?>
<p><small>
Posted <?php if ($author = $item->get_author()){ echo ' by '.$author->get_name(); }?>
on <?php echo $item->get_date('j F Y | g:i a'); ?>
</small></p>
</div>
<?php
endforeach;
?>
The above script will load the specified RSS feed and display up to $max_items most recent posts. You can tweak the part between foreach and endforeach to format the output to your liking.
Additional Tips
To show recent posts from a single category use a category-specific feed URL instead of the blog’s main RSS feed. Usually you can get this URL by appending “/feed” to your category URL. For example, http://example.com/category/stuff/ => http://example.com/category/stuff/feed. More information is available in the WordPress Codex.
If you want to filter the feed to only show posts from a certain author or similar, you can check each item inside the foreach loop and skip those that you don’t want to show. For example, to only show posts from the author “James” :
if ($author = $feed->get_author()){
if ( $author->get_name() != 'James') continue; //skip if not James
} else {
continue; //no author specified, skip.
It’s also possible to aggregate multiple feeds with SimplePie – just replace the feed URL with an array of URLs and the parser will handle the rest. Example :
$feed_url = array(
'http://domain.com/feed.rss',
'http://anothersite.org/blog/feed/',
'http://www.example.com/rss'
);
This way you can display recent posts from several blogs just as easily as from a single blog.
And that’s it. Good luck 🙂 Feel free to drop a comment if you have any questions.
Related posts :
Subscribe via RSS
Get Updates by Email
If an RSS item has a single category, you can display it like this :
if ($category= $item->get_category()) { echo $category->get_label(); }As for the rest of your question, how (and if) it can be done depends entirely on your feed structure and blog configuration. For example, you can’t really get the category and profile links from a typical FeedBurner feed without some ingenious hacking.
Thanks. Good tip.
I’m having one issue though. If the feed pulls in a blog post where the original title contains a “-” symbol (i.e. HTML = –), the resulting code on my site for that – is ‘ – ‘.
So instead of the title appearing as:
“Ben Pleasants – Four Poems”
I get:
“Ben Pleasants – Four Poems”
Any idea on how to resolve that?
Thanks!
It’s either an encoding problem (in which case the SimplePie documentation might enlighten you), or an opportunity for applying htmlentities() with extreme prejudice. Personally, pre-processing the title with htmlentities() would be the first thing I would try.
Checked the documentation and tried htmlentities(). No luck. I also switched to utf-8 encoding. Again, no luck though. The feed seems to be ok. When I run it through the SimplePie demo (on their site) it shows up just fine. It only shows up “wrong” on my site.
Any further ideas?
Check the HTML source of your page. I’ve had a similar problem where the symbols were actually correct in the HTML but my browser had decided to use the wrong encoding/character set when displaying that page.
That’s the only remaining easy-to-check thing I can suggest without having seen your actual script.
The html for the odd text looks like: “Ben Pleasants – Four Poems”
So it’s not getting interpreted correctly… I’m using a simplified version of your php above:
error())
echo ‘Error : ‘,$feed->error();
//Output up to $max_items posts
foreach ($feed->get_items(0, $max_items) as $item): ?>
<a href="get_permalink(); ?>”>get_title()); ?>
Oops, code got truncated. I’ll try to send to you directly if you don’t mind….
Sure, send it in. My email is whiteshadow[at]w-shadow[dot]com
How can we include thumbs in to this?
That will depend on how/if the thumbnails are displayed in the feed. If they’re part of the content, either the get_description() or get_content() method should work to retrieve content + thumbnail. If not, you may need to use a hack like this to add them.
First I want to say you are awesome! Thank you for sharing this.
I wanted to know if you or anyone on this blog would be give me advice on how to pull the blog post images from my WP blog as well and I’d like to set the max items to a smaller value and have a ‘load more’ button.
Don’t mean to be a bother but I’m still new to PHP/MySQL & JavaScript. I’m grinding away on books and practicing everyday! 🙂
Much thanks!
First off I would like to say wonderful blog! I had a quick question that I’d like to ask if you do not mind. I was interested to know how you center yourself and clear your mind prior to writing. I’ve had a difficult time clearing my mind in getting my ideas out.
I do take pleasure in writing however it just seems like the first 10 to
15 minutes are wasted simply just trying to figure out how to begin.
Any recommendations or tips? Cheers!
Feel free to visit my homepage: waist to height ratio calculator
Even better than that is using javascript code to get latest posts because sites like Weebly and other content creation sites support javascript which means any site that allows you to input javascript you can display a widget with your blogs latest posts. Check out http://affiliateswitchblade.com/blog/postsscroller