Structured Data Markup Helper Interface

Posted In GitHub

WordPress Theme Devs: Add Markup To Your Themes

I’m using the Independent Publisher theme. I made a child theme to add markup a few days ago. Instead of hoarding it, I sent a pull request on GitHub with the markup for inclusion in Independent Publisher.

Not sure what is? It’s a widely adopted microdata format, similar to microformats., however, is supported by all the major search engines, giving it a definite edge over other microdata. The FAQ at is definitely worth checking out.

Structured Data Markup HelperGoogle also has a Structured Data Markup Helper that helps you add structured-data markup to a sample page. Just give it a URL, select an element and choose which structured-data to apply.
Structured Data Markup Helper Interface
It’s not like there’s no WordPress themes without markup built-in, but there’s certainly not many. I don’t even have this built into my WordPress themes, I should update Rootdip with markup. Unwakeable, however, hasn’t been maintained in forever, and didn’t even exist back then.

There’s plenty of plugins for adding markup to your WordPress site, but I think it makes sense to just integrate it right into the theme. The theme developers know exactly where their tags are, preventing the need to add additional info to the end of the post that’s wrapped in markup.

I tried out the All In One Rich Snippets plugin, but it would require me to enter duplicate content (title, description, etc). It would also display a box at the end of each individual post page containing that extra, unnecessary content.

Because of that, I decided to just add the markup myself. It’s really very simple and only took about 15 minutes to do. Google likes data, and making Google happy is important to the ranking of your site. 15 minutes is definitely worth the time to do it right.

Paul Lund has an excellent write up on adding to your WordPress theme. This post by Isabel Castillo basically spelled out how to add the proper attributes to images, which was one thing missing in Paul’s post.

Anyway, here’s what I’ve put together as a basic starting point for integrating into your WordPress theme. Stuff is probably missing, some stuff may be incorrect. If so, please let me know in the comments.

Should more WordPress theme developers start building markup into their themes?

View Results

Loading ... Loading ...

Before you begin

If your theme doesn’t include some of the tags mentioned below, like <header>, <footer> , <article> , and <time> , you can use regular <span> tags instead. Just make sure you keep the itemscope attributes and their values.

Modify single article file

This is usually single.php, content-single.php, or something similar. Find the <article> tag and add the following to the end:
itemscope="itemscope" itemtype="" itemprop="blogPost"

If your theme supports post thumbnails, find the_post_thumbnail(); function and replace it with something like this:
the_post_thumbnail( 'thumbnail', array('itemprop'=>'image' ) );

Now find where the post date/time is being displayed. You’ll want to wrap it in a <time> tag like below. You can also use a regular <span> tag as well, just be sure to add the itemprop="datePublished" and pubdate attributes.
<time class="entry-date" datetime="<?php the_time('Y-m-dTH:i:sO'); ?>" itemprop="datePublished" pubdate><?php the_time( get_option( 'date_format' ) ); ?></time>

Next find where the title is printed, usually between h1 tags, add an itemprop attribute with a value of name, like so:
<h1 class="entry-title" itemprop="name"><?php the_title(); ?></h1>

Now add another itemprop attribute wtih a value of mainContentOfPage to the div containing the_content(); WordPress function:
<div class="entry-content" itemprop="mainContentOfPage">

Modify header.php

Only a few easy changes in this file. First, change your <html <?php language_attributes(); ?>> to look like this:
<html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>

Next, change your <body> tag to this:
<body <?php body_class(); ?> itemscope="itemscope" itemtype="">

If your theme has a <header> element, change it so it’s similar to this:
<header id="masthead" class="site-header" role="banner" itemscope itemtype="">

Modify footer.php

If you theme has a <footer> element, modify so it resembles the code below:
<footer id="colophon" class="site-footer" itemscope="itemscope" itemtype="" role="contentinfo">

functions.php addition

Paul Lund wrote this function to define the schema type automatically for the type of content being displayed (ie: article, contact page, etc). You can see the <html <?php html_tag_schema(); ?> <?php language_attributes(); ?>> function in the functions.php file in the demo repo.

Ideal Implementation

Don’t modify the core files of the theme you’re using. It’s seriously wrong and makes upgrading your theme almost impossible. Instead, create a child theme. It’s really, really easy to do and will inherit all the functionality and styles of the parent theme. For your convenience, I’ve put an example child theme up on GitHub, tlongren/wordpress-child-example.

Since it’s a child theme for Independent Publisher, you’ll want to fork it and modify it to fit your theme. If you’re already using Independent Publisher, you should be good to download the repo, upload it to WordPress, and activate the new theme from the WP dashboard.

Why Implement

Because Google says so:

Historically, we’ve supported three different standards for structured data markup: microdata, microformats, and RDFa. Instead of having webmasters decide between competing formats, we’ve decided to focus on just one format for In addition, a single format will improve consistency across search engines relying on the data. There are arguments to be made for preferring any of the existing standards, but we’ve found that microdata strikes a balance between the extensibility of RDFa and the simplicity of microformats, so this is the format that we’ve gone with.

It also helps you define the default image that’s pulled when sharing a link on Google+ or Facebook. Users will still have the option of choosing another image, but probably won’t when the featured image from your post is automatically there. And this is just one example of why you should at least consider implementing markup.

As usual, comments are open, so please let me know what I got wrong and what could be improved. I appreciate whatever feedback people offer.

This post is a mess

This one is much more concise and much easier to implement, you’re probably better off starting there.

Well, now what?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. :) is proudly hosted by DigitalOcean

About these ads
  • I completely agree with this. When I read the statement “SEO Ready” or “Optimized for SEO”, I instantly think about structured markup, i.e. has been implemented. This is not the case and usually requires for me to go in and add the functionality or better yet money wasted.

    • I definitely feel your pain Viktor.

      Often times, “SEO Ready” or “SEO Optimized” doesn’t even seem to take structured data into consideration.

  • I want to add this to my theme ( But it looks complicated. Do I copy paste the codes you’ve shared, or do I have to add something else — like my theme’s domain name at some places?

  • Pingback: Add Markup To Any WordPress Theme – Tyler Longren()

  • Clare Swindlehurst

    Thanks for this – I downloaded that schema plugin and hate that box – they say it has to be shown but I have no idea why. My theme includes some schema but not all so this was useful to make the additions. BTW it would be good if you put that ‘this post is a mess’ link at the top of the page as I’d worked though this on my theme before being linked to your improved post 🙂

  • I am wondering how to implement JobPosting Schema for my WordPress Job listing website. Can you please give me an idea. No Plugin is supporting JobPosting. Please give me an idea to implement JobPosting Schema for my WordPress Website If I want to apply Schema automatically for every Job Posting in my website with Company Name, Job Name, Date and Place.