Twenty Twelve child theme thumb

Twenty Twelve Schema.org Child Theme

The great folks at WordPress have come out with a new default theme along with WordPress 3.4, and it is a very good one. Twenty Twelve is responsive, clean, and easy to work with. So of course I naturally had to add my Schema.org data back into it once I activated it!

Very similar to what I had done with Twenty Eleven, I created a child theme that extends the default Twenty Twelve by adding microdata into the markup. I also added in a three widget section to the footer, a feature of T11 that I missed in T12. Hopefully this can be of use to others as well. What follows is the same description from the T11 Schema.org child theme that I had previously written.

By adding Schema.org microdata to the Twenty Twelve theme, we gain several benefits. 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 Twenty Twelve Schema.org Child Theme: Twenty Twelve Schema.org Child Theme – v1.0

Fork this project on GitHub

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

Share and Enjoy

  • Twitter
  • Google Plus
  • LinkedIn
  • Email
  • RSS
  • HackerNews
  • Instapaper
  • StumbleUpon
  • Facebook

15 thoughts on “Twenty Twelve Schema.org Child Theme

  1. Hi, I chose Twenty Twelve as a base (mini framework) for my web dev. projects and I think your addition is really worth to be included!

    Are you planing to make more improvements to this theme, or it’s going to be static as your Twenty Eleven for schema.org?

    Reply
    1. Post author

      Thanks! I plan on tracking Twenty Twelve (hopefully better than I did T11) but don’t plan on adding new features other than the Schema.org markup. Is this what you’re thinking?

      Reply
  2. I have plan to create 2012 child theme and put some additional bits and snippets to make it better (according to my limited understanding).

    I was thinking about forking your project (in case of further improvements), but I guess then it’s gonna be better just to create new one.

    In any way thanks for doing good job with schema.org!

    Reply
    1. Post author

      Definitely fork it! With the wonders of Git you would be able to build on it as a base, add your own stuff, keep the two in sync when I update it, and could even put in pull requests to go back and forth between projects. Would be a very smooth way to go.

      Reply
  3. This is great. I love schema.org. Looking at your repo though, it seems like you’ve overridden so many files of the theme so that making it a child theme is almost pointless. I’m curious why you didn’t just fork it? Was it for the few files that don’t get overridden (at least functions.php).

    Reply
    1. Post author

      That’s right Mark, both for functions.php and for the styles. I’d much rather just check compatibility each time T12 is updated rather than bring over copies of files that had changed. Maintenance was easier on my end, and I didn’t really see any benefit to a fork.

      Reply
  4. Thanks for this., I’m using it for my child theme but, I’m getting an error
    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘twentytwelve_allow_schema_markup’ not found or invalid function name

    Reply
  5. Scott

    I ran my site through the structured data testing tool (using your theme) and was getting a missing “updated” field, I changed
    <time class="entry-date to <time class="updated in functions, is this ok to do? It did remove the error.

    Reply
    1. Post author

      Keep the entry-date class in there as well, so the tag should read <time class="entry-date updated" .... I’ll pop that in the Github repo as well.

      Reply
  6. Hi, Joshua,

    recently I was solving the question about the use of function_exists and noticed that you usually wrap it with IF after add_action or add_filter but standard Twenty Twelve functions are usually wrapped before add_action or add_filter.

    Is there any difference? And just to have same style, could I move ENDIF before add_action or add_filter?

    Thanks!

    I started discussion here:

    http://wordpress.org/support/topic/what-is-the-reight-way-to-close-if-function_exist

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>