A Better Blogroll

Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

Aug 8th in Javascript & AJAX by Chris Coyier

A traditional blogroll is a simple list of other sites, often in the sidebar, that are related, owned by, or otherwise friendly to the home site. Blogrolls are a great idea and on-point with the spirit of blogging, but how is a casual reader to know if any of these sites are truly of interest? Let's improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.

PG

Author: Chris Coyier

Chris Coyier is web designer and developer from Madison, WI currently residing in Portland, OR. He enjoys old time banjo music, photography, and bringing ideas to live with XHTML, CSS, and jQuery.

Step 1 - The Idea and the Technologies

For our example, we will be using the TUTS family of sites. The idea here is to build a "widget" (for lack of a better term). Along the top of our widget will be a line of logos from each of the different sites in our blogroll. The TUTS family have lovely simple block logos which will make this easy, but the concept could be adapted to any logo. Each of the logos will act as "tabs" or buttons which when clicked, will display recent headlines from the respective site. Here is quick overview of the technologies we will use

  • Of course we will be using XHTML/CSS to build and style the widget.
  • We will use jQuery and the Coda Slider plugin for the fun animation.
  • The recent headlines will be dynamically pulled using PHP and SimplePie.

Because of the use of PHP, you won't be able to download the source code, open it up on your local machine, and view the demo. You'll need to either run PHP on your local machine, or upload it to your own server to play with it.

Step 2 - Designing

Design first, code later. I find the results are always better this way. A little playing around in Photoshop and we have a simple-yet-modern design to work with:

step 1

Note the use of guides. Being as clean and accurate with your design work is just as valuable as being clean and accurate with your code! Note that the PSD files will be included in this demo.

I don't want to go into a ton of detail about how all the design work was done and how all the images were sliced out. Instead lets take a look at each one and I'll quickly explain.

body background Image for the background texture. Repeats across the entire body element.
tab Image for the PSDTUTS tab. Bottom half is for "on" position, top half is for "off" position.
tab Image for the VECTORTUTS tab. Bottom half is for "on" position, top half is for "off" position.
tab Image for the NETTUTS tab. Bottom half is for "on" position, top half is for "off" position.
tab Image for the AUDIOTUTS tab. Bottom half is for "on" position, top half is for "off" position.
tab Image for the "body" of the widget. This can repeat vertically so it can grow as tall as needed.
tab Image for the bottom of the widget.
tab Image for the "next" button, for moving ahead to the next tab.
tab Image for the "previous" button, for moving back to the previous tab.

Step 2 - Downloading the Files

Normally we might start by coding the XHTML/CSS we need for the widget first. That is usually the best way to go so you can ensure clean and semantic markup. However, for this example, I believe it will be easiest for us to download all the components we need to make this thing work, and then code around that. This is because the jQuery plugin "Coda Slider" we are using has a specific HTML structure it likes.

You'll need a home directory for this project, so go ahead and create a new folder. Then create an index.php file, a style.css file, and we'll need folders for images, inc, and js. More organization! Then download the following things:

  • Download the latest jQuery to your js folder and include in your head section.
  • Download the Coda Slider plugin and include the plugin file, as well as the easing and easing compatibility JavaScript files in your head section.
  • Download SimplePie. Put the simplepie.inc file in your inc folder. You don't need to include anything on the page for this just yet, we'll get into this later.

When you are through, the top of your index.php file should be like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>A Better Blogroll</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

	<script src='js/jquery-1.2.6.min.js' type='text/javascript'></script>
	<script src="js/jquery-easing.1.2.js" type='text/javascript'></script>
	<script src="js/jquery-easing-compatibility.1.2.js" type='text/javascript'></script>
	<script src="js/coda-slider.1.1.1.js" type='text/javascript'></script>
</head>

Step 3 - The Markup

If you pop open the code for the demo that comes with the Coda Slider, you'll see there is quite a few "wrapping" DIVs going on. The whole slider is wrapped in one then all of the panels are wrapped in one, then each panel is wrapped and there is even an inner wrapper inside each panel. Looks a bit like "DIVitis" (The plague of amateur coders using way more DIVs than necessary). Fret not, however. While I can't argue that there is a lot of DIVs going on here, each of them serves a purpose unique to the slider and is necessary for its form and function. In fact, our unique design complicates things even more and requires the use of a few more DIVs here and there.

Here is the markup for the rest of the page, sans the actual content for each of the panels:

<body>
	
	<div id="blogSliderWrap">
		<div id="blogSlider">
			<div class="innerWrap">
				<div class="panelContainer">
					
					<div class="panel" title="PSDTUTS">
						<div class="wrapper">
	
							<!-- content for panel -->
	
						</div>
					</div>
	
					<div class="panel" title="NETTUTS">
						<div class="wrapper">
						
							<!-- content for panel -->
						
						</div>
					</div>
				
					<div class="panel" title="VECTORTUTS">
						<div class="wrapper">
						
							<!-- content for panel -->
						
						</div>
					</div>
				
					<div class="panel" title="AUDIOTUTS">
						<div class="wrapper">
						
							<!-- content for panel -->
						
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="push"></div>
	</div>

</body>

</html>

Notice how there is no markup for the list of logos at the top? That markup gets dynamically generated by the plugin based on how many panel it detects. It also gives each of the list items a unique class name. We will use these to apply the images we created. Pretty fancy eh? This makes it very easy to add and remove panels from this slider in the future. If you want a peak at the code it creates, you can use something like Firebug to view the source after it has been rendered:

step 3

Step 4 - The CSS

Now that we have the markup squared away, we can set about to styling. Again, rather than go through every single selector here, I'll just show you the entire CSS file and then below I'll go over some of the important points. There is also some commenting within the CSS you may find of interest.

	
/*
	GENERIC RESET & BASIC STRUCTURE
*/
* 									{ margin: 0; padding: 0; }
body 								{ font-family: Verdana, Arial, Helvetica, sans-serif;
						  		 	  background: url(images/body-bg.jpg); font-size: 11px; }
a 									{ /* remove the dotted outlines when clicking tabs */ 
						  		      outline: none; text-decoration: none; }
ul 									{ list-style: none; }


/*
	WIDGET STRUCTURE
*/
#blogSliderWrap 					{ width: 320px; margin: 50px auto;
									  background: url(images/widget-bottom-bg.jpg) 7px bottom no-repeat;
									  padding-bottom: 50px; position: relative; }
#blogSlider 						{ margin-left: 15px; padding: 25px 18px 0px 18px; width: 263px;
									  background: url(images/widget-middle-bg.jpg) center center repeat-y; }
.stripViewer 						{ position: relative; overflow: hidden; clear: both; }
.stripViewer .panelContainer 		{ position: relative; left: 0px; top: 0px; }
.stripViewer .panelContainer .panel { float: left; position: relative; width: 280px; }
.wrapper 							{ padding: 10px; }
.innerWrap 							{ width: 273px; overflow: hidden; }
#push 								{ height: 35px; }


/* 
	MAIN TABBED NAVIGATION
*/
.stripNav 							{ margin-left: 22px; position: relative; top: 18px; z-index: 99;
									  width: 285px; }
.stripNav ul li 					{ float: left; }

.stripNav li a 						{ /* Generic "CSS image replacement" */
									  display: block; height: 18px; text-indent: -9999px; }
/* The below class names are auto-generated by the JavaScript */
.stripNav li.tab1 a { background: url(images/tab-psdtuts.jpg) top center no-repeat; width: 63px; }
.stripNav li.tab2 a { background: url(images/tab-nettuts.jpg) top center no-repeat; width: 63px; }
.stripNav li.tab3 a { background: url(images/tab-vectortuts.jpg) top center no-repeat; width: 85px; }
.stripNav li.tab4 a { background: url(images/tab-audiotuts.jpg) top center no-repeat; width: 73px; }

.stripNav li a:hover, 
.stripNav li a:active, 
.stripNav li a:focus 				{ /* Restore focus styling that we removed when we removed outlines */
									  background-position: top center; }

/* It is neccessary to repeat the image paths here */
.stripNav li.tab1 a.current { background: url(images/tab-psdtuts.jpg) bottom center no-repeat; }
.stripNav li.tab2 a.current { background: url(images/tab-nettuts.jpg) bottom center no-repeat; }
.stripNav li.tab3 a.current { background: url(images/tab-vectortuts.jpg) bottom center no-repeat; }
.stripNav li.tab4 a.current { background: url(images/tab-audiotuts.jpg) bottom center no-repeat; }


/* 
	SUB NAVIGATION
*/
.stripNavL a, .stripNavR a 			{ display: block; position: absolute; width: 75px; 
							 		  height: 22px; text-indent: -9999px; }
.stripNavL a						{ bottom: 35px; left: 45px; background: url(images/previous.png); }
.stripNavR a 						{ bottom: 35px; right: 45px; background: url(images/next.png);
}


/* 
	HEADLINES STYLING 
*/
.panel ul 							{ width: 240px; }
.panel ul li a 						{ border-bottom: 1px solid #C1B599; color: #303030;
						  		  	  display: block; padding: 7px 10px; }
.panel ul li:last-child a 			{ /* Remove bottom border on last list item
	   							  	  Hooray for pseudo selectors! */
								  	  border: none; }
								  	  /* Unique rollover colors for each list */
.panel ul#psd-list li a:hover 		{ background: #b20202; color: white; }
.panel ul#net-list li a:hover 		{ background: #4a8c7f; color: white; }
.panel ul#vector-list li a:hover 	{ background: #1f5293; color: white; }
.panel ul#audio-list li a:hover 	{ background: #4f7c11; color: white; }
  • The outer-most wrap (#blogSliderWrap) contains the background image for the bottom of the widget. Laying on top of that is the "expandable" part of widget, which contains the vertically-repeatable background image (#blogSlider)
  • In order to keep the content from appearing to "fly in" from outside of the main white area, yet another wrap was needed (.innerWrap) that slims the inside down even further to prevent that. This is unique to our super-cool drop shadowed design.
  • As I mentioned earlier, the markup for the main navigation is generated on-the-fly by the JavaScript, but that doesn't mean we can't still style it with CSS. The style for (.stripNav) uses relative positioning to kick it over into place as well as ensure that it is on top of all over page elements.
  • We use the unique class names the JavaScript gives us to use basic CSS image replacement and apply our images to each tab. Note that shared attributes (like height) are applied generically while unique attributes (like width) are applied specifically.
  • The JavaScript also auto-generates two special page elements for moving ahead a single tab or moving backward a single tab. We apply images and positioning to these as well
  • Ultimately, each panel will contain and unordered list of headlines. We will give each of these a unique ID. For a bonus nice touch, each of them will have a rollover color that matches the logo color of the originating site.

Step 5 - Activating the Slider

Now with the images, markup, and CSS all in place, we can kick off the slider. Include the following JavaScript at the bottom of your head section.
<script type='text/javascript'>
	$(function () {
		$("#blogSlider").codaSlider();
	});
</script>
Now we have a perfectly functional slider, with nothing in it.
step 3

Step 6 - Pulling the Headlines with SimplePie

SimplePie is a PHP feed parser which makes it pretty darn easy to pull in RSS feeds and use the content as we wish. In our example, all we need are the headlines and links, but pulling the feed is always the same regardless of what you use. At the very top of your index.php file, include the following PHP code:
<?php
	require_once('inc/simplepie.inc');
	$total_articles = 10;

	$psdtutsfeed = new SimplePie('http://feeds.feedburner.com/psdtuts');
	$psdtutsfeed->handle_content_type();
	for ($x = 0; $x < $psdtutsfeed->get_item_quantity($total_articles); $x  )
	{
		$psdtutsarticles[] = $psdtutsfeed->get_item($x);
	}
?>
This code will go out and get the RSS feed from the main PSDTUTS RSS feed (http://feeds.feedburner.com/psdtuts). Then we create an array of the 10 most recent headlines. Now down in our "panel" for PSDTUTS, we'll need to cycle through this array and echo out the linked headlines. Here is the new code for the PSDTUTS panel:
<div class="panel" title="PSDTUTS">
	<div class="wrapper">

		<ul id="psd-list">
			<?php
				foreach ($psdtutsarticles as $item)
				{
					echo '<li><a href="' . $item->get_link() . '">' . $item->get_title() . '</a></li>';
				}
			?>
		</ul>

	</div>
</div>
You can guess where we need to go from here... We need to do the exact same thing for each of our four panels. No need to list all the code out here, as all we do is create new variables for each of the feeds, pull them in, and create new arrays for each of those feeds. Then we loop through each of those new arrays just like we did for PSDTUTS to echo out the linked headlines. Notice how the unordered list we used for the PSDTUTS headlines had a unique ID of "psd-list". That isn't entirely necessary, but I have used that as a hook in this example to apply a different rollover color for each headline list. Our widget is now nearly complete!
step 6

Step 7 - Fixing up IE

Despite being fully valid code, both IE6 and IE7 were showing some quirks with the background images. Oh well, our super-cool drop shadow isn't in any way necessary. We can leave it in place as "progressive enhancement" for folks with quality modern browsers and pull it out for IE, leaving just a simple white box. Include an IE-Only Stylesheet in your head section like so:
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
Then create the style-ie.css file in your home directory and include the following:
#blogSliderWrap {
	background: white;
	width: 285px;
	position: relative;
	overflow: hidden;
}

#blogSlider {
	background: white;
	width: 285px;
	padding: 0;
	margin: 0;
}

.stripNav {
	margin: 0;
	top: 0px;
}
Now everything is A-OK in Internet Explorer. The background is simply just white:
step 6
So there you have it, a better blogroll for all! Clearly, the technologies presented here can be used for all kinds of interesting things beyond a simple blogroll. The slider is a fantastic plugin that could used for a photo gallery, a portfolio, step-by-step instructions, or any number of applications. The ability to pull in RSS feeds to use on web pages is also very powerful (and potentially abuse-able). See the SimplePie documentation for all you can do with it, and remember to use it for the powers of good!

Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    pavs August 8th

    After visiting so many design sites you rarely get amused by new design technique, this is one of the few times that I was actually impressed with a design. Nice job done.

    ( Reply )
  2. PG

    James August 8th

    I just had a look at the DEMO and it’s a very cool effect and a nicely put together little widget. I’ll report back when I’ve had a proper read through! :)

    ( Reply )
  3. PG

    Lee August 8th

    Very Cool

    ( Reply )
  4. PG

    Sean Canady August 8th

    Nicely done!

    ( Reply )
  5. PG

    Tommy Day August 8th

    Wow, for some reason I never thought to use the coda slider on a smaller scale like that.

    ( Reply )
  6. PG

    Erik August 8th

    Great tutorial! Keep them coming :)

    (For people who are actually going to implement this, you might want to consider caching the feeds locally and only retrieve them - for instance - once an hour. That should dramatically reduce loading times and if you’re running a well-visited site, bandwidth as well.)

    ( Reply )
  7. PG

    Nate August 8th

    Nice tutorial and should be very useful.

    ( Reply )
  8. PG

    Connor August 8th

    Wow…this is an extremely useful idea…Thanks!

    ( Reply )
  9. PG

    Streamer August 8th

    Wow just amazing.

    ( Reply )
  10. PG

    Philo August 8th

    Great Tutorial!

    ( Reply )
  11. PG

    Colin Scroggins August 8th

    This is great! I would love to see a similar tutorial that dealt with scrolling between items in a single feed.

    ( Reply )
  12. PG

    Jaswinder Virdee August 8th

    noooooooooooooo i was going to make this! (just for myself so i could get a quick look at my fav blogs and then write a tut) dam you chris lol
    good post though very much like your css-tricks post on making an rss widget for an iphone

    ( Reply )
  13. PG

    Dan August 8th

    Nice! great tuts around here latley

    ( Reply )
  14. PG

    Bob Aman August 8th

    SimplePie is a great tool; by far the best parser around for PHP. Ryan’s done a great job with it.

    ( Reply )
  15. PG

    Tommy M August 8th

    Very clever tutorial, looks like it would fit nicely on an iPhone as well.

    ( Reply )
  16. PG

    Tom Leo August 8th

    I tried and failed at this tutorial, might try again latter. :(

    ( Reply )
  17. PG

    revy August 8th

    That is really cool. Would this work as a widget for wordpress and other like blogging tools?

    ( Reply )
  18. PG

    Moksha August 8th

    Thanks wonderful.

    ( Reply )
  19. PG

    Tom Hermans August 8th

    nicely done, ideal for a sidebar where you want to pull in headlines from affiliate sites and/or for SEO purposes as well.

    ( Reply )
  20. PG

    Jad Graphics August 8th

    Great tutorial. I hope to one day, implement that on my website, Jad Graphics

    ( Reply )
  21. PG

    Ben Griffiths August 8th

    SimplePie = Win.
    jQuery = Win.

    This tut therefore = Double Win.

    Thanks!

    ( Reply )
  22. PG

    Ryan Imel August 8th

    Good one, and very useful. Heck, this one might even be nice for the sidebar of ruts sites… Hint hint :)

    ( Reply )
  23. PG

    dlv August 8th

    “SimplePie = Win.
    jQuery = Win.
    This tut therefore = Double Win.”

    that’s it !!
    It’s usefull, it’s a really nice job!! thanks thanks!

    i agree with Erik who said:
    “(For people who are actually going to implement this, you might want to consider caching the feeds locally and only retrieve them - for instance - once an hour. That should dramatically reduce loading times and if you’re running a well-visited site, bandwidth as well.)”

    I’m a dummie ,so Erik if you’ve got knowledge to implement that, please write something to help us
    thanks

    ( Reply )
  24. PG

    Braden Keith August 8th

    I like this layout a lot. Very nice. Very clean.

    ( Reply )
  25. PG

    Bruce Alrighty August 8th

    Great Tutorial!

    @dlv Would you mind telling everyone how to cache the feeds.

    ( Reply )
  26. PG

    Shane August 9th

    Very nice tutorial and the demo looks good too. Thanks for posting :)

    ( Reply )
  27. PG

    Andrei Constantin August 10th

    Super nice

    ( Reply )
  28. PG

    Fouad Masoud August 10th

    i applied the same slider effect in one of my projects long ago. the biggest challenge of all was to flip it to work with Arabic direction “rtl”

    nice implementation here.

    cheers

    ( Reply )
  29. PG

    Ara Abcarians August 10th

    Great tutorial!

    ( Reply )
  30. PG

    insic August 10th

    very nice i will implement this in my site.

    ( Reply )
  31. PG

    Erik August 11th

    dlv and Bruce Almighty: It’s just a matter of writing data to a file and check if the current time minus the time that specific file was created/modified, exceeds the desired cache-time. If it doesn’t, it returns the cached data. If if does exceed the set cache-time, you refresh the data and overwrite that cached data. The files’ modified time of course gets updated as well, making it valid cached data again :-)

    dlv: No problem. I’ll whip something up.

    ( Reply )
  32. PG

    Mark Roberts August 12th

    Hi, this looks a really useful ‘widget’, but I’m having problems with the php stuff, being new at php it maybe a dumb question!, but where you say in step 6, ‘At the very top of your index.php file, include the following PHP code’, do you literally mean the very top of the doc, or the top of the head or the top of the body?

    Cheers

    ( Reply )
  33. PG

    Erik August 12th

    dlv: I wrote a little caching-class, but looking at SimplePie it seems to already have caching built-in. Just pass in a cache directory and duration as a 2nd and 3rd parameter when constructing. Like so:

    $psdtutsfeed = new SimplePie(’http://feeds.feedburner.com/psdtuts’, ‘path/to/cache/folder’, 3600);

    Just take a look at the SimplePie docs :)

    ( Reply )
  34. PG

    Matthijs August 16th

    Thanks for the great article.

    There’s a small but fatal error in the code. This creates an endless loop and memory exhaustion:
    for ($x = 0; $x get_item_quantity($total_articles); $x )
    that should be
    for ($x = 0; $x get_item_quantity($total_articles); $x++ )

    ( Reply )
  35. PG

    Taylor Satula August 21st

    Thats weird. I missed this one i didn’t see it get posted. I feel ashamed of my self.
    But the psd,nettuts,vector and audio tabs are a tad grainy when you look at the demo

    ( Reply )
  36. PG

    sue October 24th

    olah!

    ( Reply )
  37. PG

    Yung October 27th

    Great tutorial, but I have one problem… I just can’t seem to figure out why my slider is sliding left to right instead of right to left like one from the demo. Anyone know what I need to change to reverse the direction of the slide? Is there something in the js somewhere I’m missing?

    Thanks.

    ( Reply )
  38. PG

    Shannon November 7th

    This is a great tutorial, thanks Chris! Sometimes these tutorials seem fun without much use for real work, but this could work well for many clients, awesome!

    ( Reply )
  39. PG

    mikaweb November 23rd

    Hi, little question.
    Is this possible to order by website ?
    I have this :

    $this->simplepie->set_feed_url( array(
    ‘xml1′,
    ‘xml2′,
    ‘xml3′,
    ‘xml4′
    ));
    And I would like to order every feed.

    Thank’s

    Nice tutorial :-)

    ( Reply )
  40. PG

    Constantin Chirila November 27th

    Nice tutorial. I will try implement it into my blog.

    ( Reply )
  41. PG

    Angela December 2nd

    Great tutorial thanks chris!

    ( Reply )
  42. PG

    jcrog December 3rd

    can i make one of the tabs (the last one) go to a different URL instead of a Panel?

    if so How?

    ( Reply )
  43. PG

    nick December 4th

    I can’t seem to display the tabs. its not showing up in my Firefox,. and i’m sure i’m liking everything correctly. can anyone help?

    -n

    ( Reply )
  44. PG

    nick December 4th

    It turns out that wordpress’s head file can’t detect the

    $(function () {
    $(”#blogSlider”).codaSlider();
    });

    inside the header.php document. it works if i create a new .html file and paste everything that you provided, but in wordpress, the directory system is much more different.

    help!

    ( Reply )
  45. PG

    dMartian December 10th

    wow…
    you’re tutorials helped us beginners..

    post some….. :)

    ( Reply )
  46. PG

    lee December 15th

    Is there anyway to get the main content appear above the tabs?

    thanks

    ( Reply )
  47. PG

    WP Cult December 19th

    Very Nice

    ( Reply )
  48. PG

    Jerome January 21st

    Didn’t work in Chrome.

    ( Reply )
  49. PG

    mjaw January 31st

    Thank’s, is really cool

    ( Reply )
  50. PG

    ebflute February 1st

    Question from a newbie: Since JQuery has a folder in wordpress would it be possible to add the jquery files to the js in the includes directory? can I put the slider in the root of the wp-includes in the root of the js file? Is there any jquery conflict I might have to look out for?

    ( Reply )
  51. PG

    Johnny February 12th

    Is there a prize for the most annoying CSS layout ever? Yours is a contender. Otherwise I like the post.

    ( Reply )
  52. PG

    Diego February 14th

    I use the coda slider to separate a big form in six steps. How I can block the effect if the input data in one step isnt correct? I mean… the user fill the step one and it has and error in one field and I dont want to pass to the second step until the data is correct. How can implement this???

    thanks

    PD: sorry for my english… Im writting from Argentina

    ( Reply )
  53. PG

    Enrique March 26th

    Awesome tutorial
    I love the slider

    ( Reply )
  54. PG

    buffalo soldier March 31st

    Great !

    how can you make it slide automatically ?

    thanks !

    ( Reply )
  55. PG

    CgBaran Tuts May 5th

    Awesome tutorial i will try it soon thanks

    ( Reply )
  56. PG

    JR May 5th

    this tut is awesome… but it will take me exactly a year and a day to figure this out (since i have a coda slider on the index and i’m already getting a feeling that its going to conflict)… not too mention i dont even know how to adjust the settings on my current slider.

    thanks for the write up though

    ( Reply )
  57. PG

    nnugles May 22nd

    this is exactly what i was looking for but i can’t seem to get it to work. I’m getting:

    Invalid argument supplied for foreach()

    I’m running wordpress and have tried with and without the simplepie plugins.
    Anyone able to help?

    ( Reply )
  58. PG

    wpdigger June 3rd

    I was actually impressed with a design. Nice job done.…Thanks!

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    June 3rd