I’m not even going to acknowledge my terrible blogging habits ( or in reality, lack thereof ) and get to a little something something that will hopefully be of some use to someone.

With html5 making a lot of noise and gaining steam ( Google Voice & Youtube as examples ), it’s only a matter of time.

On January 25th, 2010, a nice chap by the name of Nathan Staines released his html5 version of Elliot Jay Stocks‘ Starkers theme.

As I’m still in the process of learning the nuances of html5 I decided to use Starkers html5 as a learning ground. Being a typical twitter user I let the world know what I was up to. Nathan fairly quickly responded, asking my thoughts and recommendations on any adjustments, I replied in kind.

I sat down to see if I could tackle it, I’ve always been a bit wary of messing with the comments code for wordpress seeing as recursive code can get complicated if you don’t know exactly what is going on. I thought it was an excellent opportunity to learn and I came up with a (mostly) strait forward quick fix for now. I still want to go back and rewrite the wp_list_comments(); function but that will have to wait as I have other priorities.

My quick fix:

In the comments.php template file find this bit of code:

<?php wp_list_comments(...); ?> 

We’ll be using this instead:

<?php wp_list_comments('style=div&callback=html5_comment&end-callback=html5_closecomment'); ?>
'

In your theme’s functions.php file we’ll be adding the following code:

// Changes the trailing </li> into a trailing </article>
function html5_closecomment() {?>
	</article>
<?php
	}

// This is the new comment markup - edit as you feel necessary
function html5_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>

	<article id="comment-<?php comment_ID() ?>" <?php comment_class(); ?>>
		<header class="comment-author vcard">
			<?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

			<?php printf(__('<cite class="fn">%s</cite> says:'), get_comment_author_link()) ?>

			<p><time pubdate><?php edit_comment_link(__('(Edit)'),'  ','') ?></time></p>

			<p><?php echo $args ['style']; ?></p>

		</header>
		<?php if ($comment->comment_approved == '0') : ?>
			<p><?php _e('Your comment is awaiting moderation.') ?></p>
		<?php endif; ?>

		<?php comment_text() ?>

		<footer class="reply"><?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?></footer>

<?php
	}

<article>

    <article> 
    
    </article>
</article>
...
...

Usually, theme’s wrap the wp_list_comments(); call in an ordered list, this isn’t necessary for our super awesome html5 anymore since articles can (and I guess should) be nested. Personally I wrapped it in a div with “the_comments” as a class ( For styling purposes mainly. ).

These are the only changes I made to the starkers html5, take a look for yourself.

Feel free to use, modify and share as you like. Try to give references where they are due though, that’s all I ask.

Once I rewrite the function for wp_list_comments to handle ‘style=article’ I’ll let you all know.

More on html5

W3C html5 spec overview

WhatWG.org html5 Working Draft

html5Doctor

html5 Gallery

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.