Display RSS Feed Using jQuery UI Accordion | jQuery RSS Reader
With Search Engine Optimization becoming so popular, many people are finding themselves scattered across the internet. You’ll often find clients who want to be able to aggregate all of their online interaction into one place. RSS is a great way to do this and jQuery makes it very easy to manipulate the feed and display it however you want. Read more on this slick jQuery RSS reader:
What we’ll be doing is using some PHP to read our RSS feed, spitting out some HTML, and then formatting it using jQuery UI’s Accordion plugin.
1. Get the RSS feed.
For this example I’m using the RSS feed from a good friend of mine’s blog. It’s a WordPress blog which means you can access the feed simply by adding “/feed/” to the URL. His normal URL is http://jsimp90.wordpress.com/ so http://jsimp90.wordpress.com/feed/ will take me to his RSS feed.
If you view the source of this page, you can see the elements that make up the feed. In this case we’re going to use the link, title, and description from the feed to supply content to our site and build our jQuery RSS reader.
2. Create the functions.php file
Being that this is a PHP file, you cannot work on it locally without having PHP installed on your computer. One of the easiest ways to do this would be to install WAMP Server. There are many tutorials out there on how to do this.
Create a new folder. Call it rss-accordion. If you’re using WAMP Server, you’ll want to make sure this folder is in your www directory. In your rss-accordion folder create another folder and title it includes. Now in your includes folder create a new file called functions.php.
Put the following code into your functions.php file:
<?php
function getFeed($feed_url) {
$content = file_get_contents($feed_url);
$x = new SimpleXmlElement($content);
echo '<div id="accordion">';
foreach($x->channel->item as $entry) {
echo "<h3><a href='$entry->link' title='$entry->title'>" . $entry->title . "</a></h3>";
echo "<div><p>" . $entry->description . "</p></div>";
}
echo "</div>";
}
?>
Jeffrey Way does a great job of explaining this code in depth in his tutorial on How to Read an RSS Feed With PHP.
As you can see, in this example we are looping through the content of the RSS feed and spitting out the link, the title, and the description for each post.
3. Create the index.php file
So now we have a function that will read our RSS feed. Next we’re going to create an index.php file. Create a new file in your rss-accordion folder and call it index.php.
Your index file is the file that will automatically be loaded by the web browser. For this example, if you navigate to your rss-accordion folder in your browser, it will automatically load your index.php file. Put the following code in your index.php file.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross Distinction Demos - jQuery RSS Accordian</title>
</head>
<body>
<?php require_once "includes/functions.php"; ?>
<aside>
<?php getFeed('http://jsimp90.wordpress.com/feed/');?>
</aside>
</body>
</html>
For this example, we’re using an HTML5 doctype and we’re using a new HTML5 tag called aside.
Here’s the gist of what’s happening:
- require_once grabs our functions file so that our index.php is read as if our code from functions.php was directly in the file.
- in our aside, we’re calling our getFeed function and passing it the RSS feed url.
- the getFeed function spits out the html code we told it to in our functions.php file.
When you load up the page in your browser you should see something similar to the following:
3. Download jQuery UI’s Accordion
So now that we’re reading from the RSS feed, it’s time to manipulate its layout using some jQuery. jQuery has a fantastic user interface library called jQuery UI. It can be a little confusing to use if you’ve never played around with it, but hopefully this tutorial will help. To build this jQuery RSS reader, we’re going to use jQuery UI’s accordian widget.
Go to http://jqueryui.com/demos/accordion/. Take a minute to look at the different features that jQuery UI offers. We’ll be using the default functionality.
Once you’ve looked around a bit, click on the download tab.
Click “deselect all components”.
Only select Core, Widget, and Accordion. These are the only three we’ll be needing.
If you go back and look at the accordion page, you’ll see that it lists Core and Widget as it’s dependencies. That’s why we need these.
I chose the UI Lightness theme.
Now click download.
Here’s where it gets a little tricky so stay with me.
I like to keep my plugins separate from my other files so that after I configure them, if I want to use them on another section of the site or on another site entirely, I can easily access them and copy them over. That said, let’s create a plugins folder inside our rss-accordion folder.
Open up the zip folder that you just downloaded from jQuery UI:
- Copy the css folder and paste it into your plugins folder
- Copy the js folder and paste it into your plugins folder
Here’s what your file structure should now look like:
4. Include your CSS and Scripts in index.php
Now that we have our files in the right place, we need to make sure we include them in our index.php. Here is what your index.php should now look like:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross Distinction Demos - jQuery RSS Accordian</title>
<link type="text/css" href="plugins/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="plugins/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="plugins/js/jquery-ui-1.8.17.custom.min.js"></script>
</head>
<body>
<?php require_once "includes/functions.php"; ?>
<aside>
<?php getFeed('http://jsimp90.wordpress.com/feed/');?>
</aside>
</body>
</html>
As you can see, we added a link to the jQuery UI’s custom style sheet on line 5, a copy of jQuery that came with jQuery UI on line 6, and a copy of our custom jQuery UI script that includes the accordion functionality on line 7.
5. Initialize the Accordion function
If you reload your demo page, you’ll notice that nothing changes after we add our scripts. This is because we have to initialize our Accordion feature using some jQuery.
Add the following code to the bottom of your index.php file right before </body>:
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
We’re using a self-executing function meaning it will run automatically, without needing to call it somewhere else in the page. If you remember, in our functions.php file we used PHP to generate <div id=”accordion”>. Here we are telling jQuery to find that div and turn it into an accordion using jQuery UI’s library.
Your final index.php file should look like this:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross Distinction Demos - jQuery RSS Accordian</title>
<link type="text/css" href="plugins/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="plugins/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="plugins/js/jquery-ui-1.8.17.custom.min.js"></script>
</head>
<body>
<?php require_once "includes/functions.php"; ?>
<aside>
<?php getFeed('http://jsimp90.wordpress.com/feed/');?>
</aside>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</body>
</html>
If you refresh your browser you should now see something similar to this:
6. Add a little css
To get the same look as our final product, we have to take one more step and add some of our own css to the equation. You could do this directly in your index.php file with some inline styling, but for practicality purposes I’ll walk you through how I set mine up.
In your rss-accordion folder, add a new file called style.css. The only other actual file within this folder should be your index.php.
Copy the following into style.css
aside{
font-size:.7em;
width:20%;
float:left;
}
aside p a{
font-size:.9em;
float:right;
margin-top:10px;
}
All we’ve done is floated the accordion, which is in our aside element, to the left and given it a set width. We’ve also made the font-size a little smaller.
Then, to better distinguish the “continue reading” link, we’ve made the font-size a little smaller, pushed it all the way to the right, and pushed it down a bit.
Finished!
Well there you have it; a slick, easy to use jQuery RSS Reader. If you’ve found yourself scattered across the internet or have a client who is, one solution may be to use RSS to bring all of your information into one place.
24 thoughts on “Display RSS Feed Using jQuery UI Accordion | jQuery RSS Reader”
Leave a Reply
You must be logged in to post a comment.
This is a great tip particularly to those fresh to thhe blogosphere.
Short but very accurate information_ Appreciate your
sharing this one. A must read article!
Pretty nice post. I just stumbled upon your weblog and wanted to say that
I’ve truly enjoyed surfing around your blog posts. After all I will be subscribing to your feed and I hope you write again soon!
Great tutorial, thanks!
When a post is expanded, it does not always scroll to the top of that post, so what you see on the screen is a lower part of the content and you have to scroll back up to the start.
Is there a fix for this?
Thanks!
I see exactly what you mean in regards to mobile. If you’re looking to develop primarily for mobile, I might suggest a different approach then using an accordion. I really enjoy jQuery Mobile’s Nested Listviews as a UI solution. But to immediately answer your question, my recommendation would be to set the scroll height when the accordion section is activated. You can use the activate method combined with jQuery’s scrollTop function. The basic algorithm is:
Hope that helps!
Hi, great tutorial thanks!
Is there any way to ensure that the item you click always has the title visible at the top of the page. Sometimes I’m only seeing the bottom of the post and have to scroll up to the top, more noticeable on a mobile device.
Thanks!
Thanks for tutorial. I have one question: how to remove “-> continue reading” I will replace it with image
SimpleXML is spitting that out as a default. The easiest way to change the text of that link is through jQuery. Let’s say you want to change “->continue reading” to “More…”. In index.php, simply change
$(function() {
$( "#accordion" ).accordion();
});
to
$(function() {
$( "#accordion" ).accordion();
$( '#accordion p a' ).text( 'More...' );
});
Hi, I need help, i can´t do two accordion, in the index is ok, but un contact no..
In order to do two accordians you need to either write $( “#accordion” ).accordion(); twice, replacing “#accordian” with the div id of the second accordian, or you need to give both accordians a class of “accordian” and use “.accordian” instead of “#accordian”
I want to add 4 different feeds. I will use the div class accordian for each feed. My question is where to I indicate the feed url for each? Do I indicate the url for each feed in the index.php file? I understand that I include each accordian in a div class as you mentioned. But I am wondering where to specify the url for each feed.
Thanks
Jay that’s a great question. To fit your solution, all you would have to do is write the following (using your urls) wherever you want your feed to appear:
<?php getFeed('http://jsimp90.wordpress.com/feed/');?>
Every time getFeed() is called, it will create the div with a class of “accordian” for each feed. jQuery will then convert each div to an accordian.
This is a great tutorial, thank you. Can you put two or more of the accordions on one page (two different feeds)?
Absolutely. You can do this one of two ways:
Hi! Thank you so much for the tutorial! , i have learned a lot of this, one question.. how do i set up the links “read more” that you have.. mine dosent work. Thank you ! / Cheers Rasmus
If you are using a custom template, you can use the_permalink() function in the WordPress loop.
Hello! I have some problems with the links, no links I post in the post works, and the continue reading is just […] and, that link doesn’t work either.
Can you post the link of your site so I can see what you’re talking about?
I’m having exactly the same problem. Any help you can offer would be greatly appreciated. I’m building it into a wordpress theme that isn’t able to go live yet. I can email you over my code if that helps.
This tutorial helped me more than I can say.
Rick! Definitely feel free to email me your code. Pat@crossdistinction.com. I’m also looking to do another tutorial shortly explaining how to integrate this into WordPress, since that seems to be a common question.
A very nice tutorial. How can we integrate this in wordpress? thanks.
Thanks Steve. If you have access to your theme files in for wordpress you can do the following:
inside your theme file where you want the feed to display in wordpress
I think that covers everything. If you have any issues with it please let me know.
Hi there,
First of Great work on this! I made a custom one and im trying to get it into wordpress but i keep getting Warning errors. Do you by any chance have a tutorial or something? Because i did follow your small one here in the comments but still it didnt work for me. Thanks in advance for your replay.
I apologize for the late reply. Did you find a solution to this yet? If you have feel free to post it, otherwise I’ll try to do another tutorial incorporating it into WordPress.
Thanks man! your done a great job! you save my time