Using Pods Framework to add Schema.org Data to WordPress Widgets

Why use structured data on your website?

Google and other search engines use schema.org formatted structured data to power rich snippets in search results. For instance, when searching for ‘ticketmaster omaha’ in Google, the following listing appears:

These rich snippets make a search listing stand out, and therefore make it more likely someone might click on your listing. Check out what Google has to say about schema.org.

Creating schema.org event data with Pods Framework

If you use WordPress, you can easily create a re-usable rich snippet widget with the Pods Framework. Here’s how!

Install Pods Framework plugin

Either search for ‘Pods Framework’ in your WordPress admin plugins area, or download Pods here.

Create pod and fields

If you’re new to the Pods Framework, you can learn how to get started at the Pods website. I won’t be showing how to use the Pods Framework, so you’ll need to know how to create a custom Pod and add fields to complete this tutorial. Speaking of fields, create a new pod and then add the following fields:

Find the schema.org item type code for events

If you’d like to learn more about event item types, visit the event item type page on schema.org. Here’s what I use for my event item type.

<div style="background-color:#000000;padding:20px;" itemscope="" itemtype="http://schema.org/Event">
  <h1><span itemprop="name">[Event Name]</span></h1>
  <span itemprop="startDate">[Start Date]</span> - <span itemprop="endDate">[End Date]</span>
    <a href="[Website Address]" target="_blank">Event Website</a>
      [Venue Name]
      <div itemprop="location" itemscope="" itemtype="http://schema.org/Place">
          <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress"> [Street Address] </span>
            <span itemprop="addressLocality">[City]</span>, <span itemprop="addressRegion">[State]</span> <span itemprop="postalCode">[ZIP]</span>
          </div>
      </div>
</div>

Create and place a text widget with Pods code

Here’s my code with the Pods Framework integrated.

<div style="background-color:#000000;padding:20px;" itemscope="" itemtype="http://schema.org/Event">

  <h1><span itemprop="name">[pods]{@event_name}[/pods]</span></h1>
  <span itemprop="startDate">[pods]{@start_date}[/pods]</span> - <span itemprop="endDate">[pods]{@end_date}[/pods]</span>
  <a href="[pods]{@httpsite}[/pods]" target="_blank">Event Website</a>
  [pods]{@venue_name}[/pods]

  <div itemprop="location" itemscope="" itemtype="http://schema.org/Place">

    <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">

      <span itemprop="streetAddress">[pods]{@street_address}[/pods]</span>
      <span itemprop="addressLocality">[pods]{@city}[/pods]</span>, <span itemprop="addressRegion">[pods]{@state}[/pods]</span> <span itemprop="postalCode">[pods]{@zip}[/pods]</span>

    </div>

  </div>

</div> 

Either paste my code into a widget, or add your own code.

Create a sample post and add Pods Framework field data

Now that you’ve set everything up, it’s time to test it out! Create a new page called ‘Hello World Event’ and scroll to the bottom of the page to see the Pods fields you created. Add some test information to try out the new widget (remember the widget must be visible on this page).

What next?

Nothing! You’re done! Preview your page to see your handy-work! Replicate this strategy for other schema.org item types such as places. To see the event item type in action, check out my WordCamp Omaha event page and view source. This page uses the same concept except with Divi 2.0 visual layout editor instead of widgets.

Have a question, need clarification, or have your own implementation ideas? Give me a shout in the comments or @ifyouwillit on Twitter!