For now, follow me on twitter to find out more: @1020concepts @mobilewebdesign @shortye

I finally figured out how to extend Wordpress 3.1 with an Itunes RSS (http://itunes.apple.com/gb/rss/topsongs/limit=10/xml). I'm not sure if it's the perfect solution but it works and that's the main point.

1: Create an .inc file in your theme folder "simplepie-itunes.inc.php"

We are going to extend the SimplePie class. This is pritty easy and works the same for any other RSS feed you want to extend. Define the NAMESPACE from the RSS feed.

<feed xmlns:im="http://itunes.apple.com/rss" xmlns="http://www.w3.org/2005/Atom" xml:lang="en">  </feed>

Fetch the "xmlns:im=" url: http://itunes.apple.com/rss"

<?php
define("SIMPLE_NAMESPACE_ITUNES", "http://itunes.apple.com/rss");  

Extend the SimplePie_Item with a new Class "SimplePie_Item_Itunes".

 
<?php
class SimplePie_Item_Itunes extends SimplePie_Item {  
	...
}

To get the data from the tags in the feed, will need to define the functions that we are going to use in the Wordpress theme. Find the tag in the feed and copy the part after "im:" in the tag. Define the functions. The name of the functions is up to you, you can name it like you want. The functions will output the data as a string if i got it right.

 
<?php
class SimplePie_Item_Itunes extends SimplePie_Item {  
	function get_artist_name() {  
	    	$data = $this->get_item_tags(SIMPLE_NAMESPACE_ITUNES, 'artist');  
    		return $data[0]['data'];  
	}
	
	function get_song_title() {  
    		$data = $this->get_item_tags(SIMPLE_NAMESPACE_ITUNES, 'name');  
    		return $data[0]['data'];  
	}  
	
	function get_tag_name_of_choice() {
		$data = $this->get_item_tags(SIMPLE_NAMESPACE_ITUNES, 'tag_name_of_choice');
		return $data[0]['data'];
	}
}

That's pretty easy until now. The rest is simple as well but it took me some time to figure it out. "Call me stupid, but you are searching as well."

2: Add the RSS to you template

We are going to add the feed to the theme with core code from Wordpress 3.1. But instead of loading the "feed.php" file which the Wordpress Docs tell you to do, we include the "class-feed.php" file instead. Don't know why it doesn't work with the "feed.php" file but somehow the you will get an error telling you it can't extend the "SimplePie_Item" Class.

	<?php
	// include the SimplePie Class
	include_once(ABSPATH . WPINC . '/class-feed.php');
	// include uour custom Class extension for Itunes
	include_once(TEMPLATEPATH. '/simplepie-itunes.inc.php');
								
	// Get a SimplePie feed object from the specified feed source.
	$feed = fetch_feed('http://itunes.apple.com/gb/rss/topsongs/limit=10/xml');
	
	// Add the extende SimplePie class for Itunes
	$feed->set_item_class('SimplePie_Item_Itunes');
	
	// Checks that the object is created correctly
	if (!is_wp_error( $feed ) ) : 
		// Define the max items (In this feed there are only 10) 
	    $maxitems = $feed->get_item_quantity(10); 
	    
	    // Array of the feed.
	    $items = $feed->get_items(0, $maxitems); 
	endif;
	?>

We have now included the feed and extended the SimplePie Class.

3: Print the feed items in the theme, in a nice table

To print the artist name and song name we are going to use the extended class functions: "get_song_title()" & "get_artist_name()".

	<h1><?php __('Itunes Chart'); ?></h1>
	<table summary="Itunes top 10 UK">
		<thead>
			<tr>
				<th class="first"><?php __('Posistion'); ?></th>
				<th><?php __('Artist'); ?> & <?php __('Song title');?></th>
			</tr>
		</thead>
	   	<tbody>
		    <?php 
		    // if the feed is empty
		    if ($maxitems == 0) : 
		    ?>
		    	<tr><td>No items.</td></tr>
		    <?php endif ?>
		    <?php
		    // Loop through each feed item and display each item as a hyperlink.
		    $i=1;
		    foreach ( $items as $item ) : ?>
		    <tr>
		    	<td><?=$i;?></td>
		        <td>
		        	<a href="<?php echo $item->get_permalink(); ?>" title="<?php echo $item->get_date('j F Y | g:i a'); ?>">
		        		<!-- get the song title -->
		        		<strong><?php echo $item->get_song_title(); ?></strong></br />
		        		<!-- get the artist name -->
		        		<?php echo $item->get_artist_name(); ?>
		        	</a>
		        </td>
		    </tr>
		    <?php $i++; ?>
		    <?php endforeach; ?>
		</tbody>			
		<tfoot>
		</tfoot>
	</table>

Splitting the code up. Most is straight forward. We create a table with a table heading. The the tbody part is the where all the action is at. First a message when the feed didn't load or is empty. Then the actual parsing of the feed items. Here is where you will use you custom class functions.

<?php foreach ( $items as $item ) : ?>

Run through the array of items

<?php echo $item->get_permalink(); ?>

Link to iTunes store.

<?php echo $item->get_song_title(); ?>

Your custom class function for getting the song title

<?php echo $item->get_artist_name(); ?>

Your custom class function for getting the artist name

That's it. Easy does it, you can extend the class off course to get the album image or any other data from the feed. Good luck!

The last month was busy as hell. Found a new apartment, which means you need to move all the "meuk" (crap) you have. Fix some small problems in the new apartment (still working on that). Buy new stuff, be nice to my new house mate (Bart) and loads more.

There is a lot of working @ 1020concepts in the pipe-line. Really happy that things are picking up since I came back from my world trip.

Some projects I'm working on

• A Special Person, by Vincent van Onnembo
• Renee Wilson
• Advance Events, designing a new layout
• MetrixLab, updating the back-end and small changes

There is a lot more, post them real soon. This means I didn't found the time to design and update this blog or work on any of the other brilliant idea's I have. Still want to fix something for Browser fonts a overview of free css @font-face fonts, make a tribute to Jeffery Zeldman's famous quote; "To hell with bad browsers". Make a HTML5 boilerplate for Mobile like HTML5-Boilerplate by Paul Irish degrading or visa-versa.

Loads of stuff, but first things first, time to work some more

If you want to verify your website in Google webmaster tools via Google Analytics it's good to know that you should put the Analytics snippet in the <head> of your website. I normally put most of my code before the </body>, but that doesn't seem to work, as Google Webmaster doesn't find the snippet And be sure to use the updated async Analystics snippet.

For a new client of my, Matthijs van Roon, an Amsterdam based commercial photographer, I did an update on his website navigation. Before he loaded the every image on a new page. He wanted them to load without a page refresh.

The new navigation is a combination of Fancybox and jCarousel. The photos are loaded inside the page without a refresh, no AJAX as fancybox use image preloader and doesn't use a http request. Normaly fancybox uses an overlay to present the the photo's. I changed the javascript so I could append the photo's to an element inside the website. Cleared all the extra markup for title's, overlay and shadows.

At the bottom of every portfolio page there was a carousel with all the images presented in a category. This should move when a new image is loaded. I used jCarousel and implented it inside the code of fancybox. Now I can connect a group of images to an list and mark the list to be a carousel. On selecting a image in the list, the image loads and the carsousel moves the image to the front of the carousel.

Download the full code: Fancy-carousel.0.1.zip
View a live demo: Demo

Implementation

	<link rel="stylesheet" type="text/css" href="css/fancybox.css" media="screen"  />  
	//Make sure you set the width of the ul list with images for the carousel.  
	
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/easing.js"></script> 
	<script type="text/javascript" src="js/fancybox-carrousel.js"></script> 
	<script type="text/javascript"> 
		$(document).ready(function() {  
			$.fn.fancybox.build('#elementID');   
			$('a.fancybox').fancybox({     
				padding: 0, 
				//see fancybox documentation     
				container: '#elementID', 
				// append fancybox to element     
				carousel: true, 
				// create a carrousel     
				carouselElement: '.carouselClass', 
				// class of the div with list (ul) with all images     
				carouselVisible: 6, // items to show in carousel     
				carouselScroll:  1, // scroll carrousel    
			});   
			$("li.first a").trigger("click"); 
			// load fancybox on page load 
		}); 
	</script> 
	<div id="elementID">(here loads the image) </div> 
	<div class="carousel">  
		<ul>     
			<li class="first">
				<a rel="group" href="01.jpg" class="fancybox" title="group - 01.jpg">
					<img src="thumbs/01.jpg" class="thumbimg" alt="01.jpg" width="115" height="51"/>
		        </a>     
		    </li>     
		    <li class="">       
		    	<a rel="group" href="02.jpg" class="fancybox" title="group - 02.jpg">
		    	         <img src="thumbs/02.jpg" class="thumbimg" alt="02.jpg" width="115" height="51"/>
                </a>     
            </li>    
            <li class="">       
            	<a rel="group" href="03.jpg" class="fancybox" title="group - 03.jpg">         
            		<img src="thumbs/03.jpg" class="thumbimg" alt="03.jpg" width="115" height="51"/>       
            	</a>     
            </li>   
        </ul>
    </div>