So I have been thinking about adding Microformats to a local Darwin Events and lifestyle WordPress website I run, but never got round to implementing them. That was until I got some inspiration from the Darwin Web Standards crew at a DWS meetup group session about Microformats and their use in semantic markup.

Major props should also go to Richard Baxter for his post, Mark-up Your Events Online with Microformats as his article gave me all the info I needed to implement microformats using The Events Calendar WordPress plugin. I would highly recommend reading Richard’s article as it explains with I am doing below with find and replace.

It is very easy to add hcalendar microformats to The Events Calendar!
All you need to do is make some minor edits to single.php (The Events Calendar version, not your WordPress theme version). Below I have simply given code to find and then replace in single.php. Leave a comment if you need further clarification.

Find:

<div id="tec-event-meta">

Replace with:

<div id="tec-event-meta" class="vevent">
	<a class="url summary" style="display: none;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br />

Note, I have used display:none because my titles are generated out of the functions.php file. You may just need to add class=”url summary” to your standard post title.

Find:

<dd><?php echo the_event_start_date(); ?></dd>

Replace with:

<dd>
    <span class="dtstart"><br />
        <span class="value-title" title="<?php echo the_event_start_date(); ?>"><br />
            <?php echo the_event_start_date(); ?><br />
        </span><br />
    </span>
</dd>

Find:

<dd><?php echo the_event_end_date();  ?></dd>

Replace with:

<dd>
    <span class="dtend"><br />
        <span class="value-title" title="<?php echo the_event_end_date();  ?>"><br />
       		<?php echo the_event_end_date();  ?><br />
        </span><br />
    </span>
</dd>

Find:

<dd><?php echo the_event_venue(); ?></dd>

Replace with:

<dd>
    <span class="fn org"><?php echo the_event_venue(); ?></span>
</dd>

Find:

<dd>
	<?php tec_event_address( $post->ID ); ?>
</dd>

Replace with:

<dd>
    <span class="adr"><br />
       <span class="street-address"><?php echo the_event_address( $post->ID ); ?></span>,<br />
       <span class="locality"><?php echo the_event_city( $post->ID ); ?></span>,<br />
       <span class="region"><?php echo the_event_state( $post->ID ); ?></span><br />
    </span>
</dd>

That’s it!!! Pretty easy huh?!

You can test your microformats with Google’s Rich Snippets Testing Tool.

Here is a direct link to a test of one of my Darwin Event pages.

For those wonderful little rich snippets to appear under your results in the serps, you will need to request this from Google using this form.

Related Posts

No related posts were found, so here's a consolation prize: Add A New Nextgen Gallery to WordPress.