I started thinking… “Man, having some lame post explaining that I’m off developing and hacking WP is almost as bad as having a big fat image saying that I’m ‘Under Construction’ (see this).”
As a result, I figured loading some dynamic content that tracks the latest 5 things I’m up to on the web would be far superior.
I was in luck. It just so happened that not too long ago I had played around with SimplePie. The SimplePie website describes SimplePie as “a very fast and easy-to-use class, written in PHP, that puts the ‘simple’ back into ‘really simple syndication’”. I used a great css-tricks video tutorial as a guide and decided to play around to make SimplePie track my web activity from the last week.
It went great. My initial exposure to working with SimplePie was quick, intuitive, and strait-forward. It took me a couple of hours to learn all I needed to know and code up what I wanted SimplePie to do for me. It should be stated that while I’m comfortable with php, I am by no means am a master or guru or even consider myself really all that experienced.
As a result, I was extremely pleased when I found the SimplePie Plugin for WP. I downloaded, installed and went to work. (Don’t forget to get the SimplePie Core Plugin, you need it so the classes the WP plugin uses are understood!) Since I was familiar with the basic concept of how SimplePie worked it was a breeze, I coded what I needed (This time I only wanted to track the 5 most recent items.), integrated it into the theme I recently installed (Which, by the way, finding a theme that is intelligently and cleanly coded like Manifest is makes this go faster too. Kudos Jim!) and added some css classes to make it look pretty.
I put the very strait forward SimplePie code into the Header Template.
<div id="simplepie">
<?php
echo SimplePieWP(array(
'http://digg.com/users/MaSimo/history.rss',
'http://twitter.com/M_A_Simo',
'http://feeds.pandora.com/feeds/people/simo5436/favorites.xml',
'http://feeds.pandora.com/feeds/people/simo5436/favoriteartists.xml',
'http://feeds.pandora.com/feeds/people/simo5436/nowplaying.xml',
'http://delicious.com/M_A_Simo',
), array(
'items' => 5,
'cache_duration' => 1800,
'date_format' => 'M jS, g:i a'
));
?>
</div>
I also took advantage of the template system that the WP Plugin uses and edited one of the .tmpl files that came with the plugin. After some tinkering and a little thought I came up with the following as my defined .tmpl…
div id="simplepie">
{IF_ERROR_BEGIN}p class="error">{ERROR_MESSAGE}/p>{IF_ERROR_END}ul>
{ITEM_LOOP_BEGIN}
li>
p class="title">strong><img src="{ITEM_PARENT_FAVICON}" alt="{ITEM_PARENT_TITLE}" title="{ITEM_PARENT_TITLE}" /> a href="{ITEM_PARENT_PERMALINK}">{ITEM_PARENT_TITLE}/a>/strong>/p>
br />
p class="simplepie_content">a href="{ITEM_PERMALINK}">{ITEM_DESCRIPTION}/a>/p>
p class="date">{ITEM_DATE}/p>
/li>
br class="clear" />
{ITEM_LOOP_END}
/ul>
/div>
**See Note In Commets RE: Above Code**
Great, I got SimplePie to parse the feeds I wanted and embed it into WP where I wanted, but now I needed to make a few .css classes so it would match the look of my current theme. I whipped up the following, still a bit dirty and rough, I’ll be the first to admit.
#simplepie{
margin-top: 10px;
margin-bottom: 70px;
}
#simplepie ul{
margin 0 auto;
background: #FBFBFB;
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
}
#simplepie li{
padding: 5px 5px 0px 5px;
display:block;
font-size:1.5em;
border-bottom: 1px solid #EAEAEA;
}
#simplepie p.simplepie_content{
text-align: left;
display: block;
padding: 0 10px 10px;
}
#simplepie p.date {
display: block;
font-size: .7em;
margin-bottom: 10px;
}
#simplepie li:last-child{
border-bottom: none;
}
br.clear {
clear:both;
display: block;
height: 0;
}
Almost there! Now I just edited a few already made classes that controlled the links how I liked and made them target the html that the .tmpl rendered as the SimplePie Plugin parsed my code.
#mainNav, #simplepie a:link,
#mainNav, #simplepie a:visited{
color: #999;
}
#mainNav, #simplepie a:hover,
#mainNav, #simplepie a:active{
text-decoration: underline;
color: #2E301C;
}
Viola! The result??? Well, you should be seeing it, just above the post area. Simple, strait-forward, & I hope it keeps you at least cursorily entertained while I’m working on my theme.