Skip to content

Twenty Eleven Schema.org Child Theme

The default WordPress Twenty Eleven theme is beautiful and functional. I wanted to make it even more functional by including added microdata in the theme by default. Google, along with several other large companies like Bing and Yahoo, introduced Schema.org, a collection of microdata formats that can be used as a common machine language to identify bits and pieces of web pages. This theme incorporates that language and embeds it directly into your site.

Example?

Sure. Here is a side-by-side of the author section of a blog post (slightly abbreviated from the real source). Note the elements that were added, and then how Google’s rich snippets tool pulls them out.

Without Schema.org embedded

<article>
  <header>
    <h1>A blog post</h1>
    <div>
      Posted on <time datetime="2012-01-19T12:59:46+00:00" pubdate>January 19, 2012</time>
    </div><!-- .entry-meta -->
  </header><!-- .entry-header -->
 
  <div> ... Entry goes here ... </div><!-- .entry-content -->
 
  <footer>
    Category: <span><a href="#" rel="category">Programming</a></span>
    Tagged: <span><a href="#" rel="tag">javascript</a></span>
    By: <a href="#" rel="author">Joshua</a>.
  </footer><!-- .entry-meta -->
</article>

With Schema.org embedded

<article itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <h1 itemprop="headline">A blog post</h1>
    <div>
      Posted on <time datetime="2012-01-19T12:59:46+00:00" pubdate itemprop="datePublished">January 19, 2012</time>
    </div><!-- .entry-meta -->
  </header><!-- .entry-header -->
 
  <div itemprop="articleBody"> ... Entry goes here ... </div><!-- .entry-content -->
 
  <footer>
    Category: <span itemprop="articleSection"><a href="#" rel="category">Programming</a></span>
    Tagged: <span itemprop="keywords"><a href="#" rel="tag">javascript</a></span>
    By: <span itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">
        <a href="#" rel="author" itemprop="url">Joshua</a>
      </span>
    </span>.
  </footer><!-- .entry-meta -->
</article>

Google’s Rich Snippets Extract

Item
    Type: http://schema.org/blogposting
    headline = A blog post
    datepublished = 2012-01-19T12:59:46+00:00
    articlebody = ... Post content here ...
    articlesection = Programming
    keywords = javascript
    author = Item (1)

Item 1
    Type: http://schema.org/person
    name = Joshua
    url
        text = Joshua
        href = #

Download

Download the theme: TwentyEleven Schema.org Child Theme – v1.4 (Updated 11/6/2012 to v1.4)

I would appreciate any feedback you have or any bugs you notice, and you can get in touch with me here.

9 Comments

  1. Good work – Seems like you cracked most of it. I managed to put it onto a blog in French too (it did mean however a bit of additional coding was necessary). The only thing which does not seem to mark-up is the sidebar and main navigation. Not sure why as yet.

  2. Seems like the itemscope=”name” and itemscope=”description” is missing in the WPHeader. If they are included the rich snippets test finds the WP header.

    To do the authors using schema.org on all pages it is necessary to add them in a few places. If you want a copy of what I have done thne email me and you can do the diff on the themes.

    Just trying to workout why the sidebar and SiteNavigationElement is not showingin the snippets tester.

  3. Thank you! Looks very good! I changed the homepage to show the_excerpt rather than the_post, and included my Google ads code on the post page, but other than that, it’s just like you wrote it. Good work!

  4. sagbee sagbee

    Any further improvement ? I want to test it, but just need confirmation by joshua if he updated his theme ? 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *