Add Markup To Any WordPress Theme

Make Google, Yahoo, and Bing like you more!

The last post I made on this topic was a bit too specific to the Independent Publisher theme and was more editorial like, which made it really hard to follow. So, at the request of Manish Suwal ‘Enwil’, I’ve decided to write a more generic version that should apply to most, if not all, WordPress themes.

Please note that the class names used below could be different in the theme you’re using, so it’s mostly important to just pay attention to the HTML tags themselves, unless you’re doing something with a div, span, etc.

There’s 6 steps, although step 6 has a few different parts to it.

1. First, you’re going to want this PHP function, a slightly modified version from Paul Lund. This function defines the schema type based on the type of content being displayed (article, author profile page, search results page, etc). Add this function to your themes functions.php file. The function is named html_tag_schema(). You can find it here:

2. Find the <html> section of your theme and add our html_tag_schema() function. This will output the proper result from html_tag_schema(). It should look like the following:

<html class="no-js" <?php schema_org_markup(); ?> <?php language_attributes(); ?>>

3. The page title tag is usually the same as the title of the page, so you can add this to your titletag:
<title itemprop="name"><?php wp_title(''); ?></title>

4. Now you’ll need to find the part of your theme that contains the_content() function. It could look something like this:

<div class="entry-content" itemprop="mainContentOfPage">
  <?php the_content(); ?>

5. It’s generally a good idea to let Google (and other search engines) know when an article/post was published. You can also tell them if/when an article has been updated. Both of these can be taken care of with markup:

<time class="entry-date" datetime="<?php the_date('c'); ?>" itemprop="datePublished" pubdate><?php the_time( get_option( 'date_format' ) ); ?></time>

6. You can apply markup to any image, but it’s easiest when your theme supports featured images. I think most themes do support Featured Images now, and if your theme doesn’t, just add Featured Image support yourself, or kindly ask the theme developer to add support. I could probably help you out, too.

6a.If your theme supports Featured Images, it should make use of the the_post_thumbnail() function. Find that function in your theme and replace it with this:
the_post_thumbnail( ‘thumbnail’, array(‘itemprop’=>’image’ ) );

6b.If the ‘thumbnail’ parameter value in your existing the_post_thumbnail() function is something other than ‘thumbnail’, make sure to keep that original paramater value. For example, if your the_post_thumbnail() call looked like the_post_thumbnail( array( 700, 700 ) );, adjust your the_post_thumbnail() function call to the following:
the_post_thumbnail( array( 700, 700 ), array(‘itemprop’=>’image’ ) );

6c.The array( 700, 700 ) piece can be replaced by whatever size you want. The first array value is the width, and the second is the height. There’s a variety of image sizes pre-defined by WordPress:

The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with the_post_thumbnail() and markup:
the_post_thumbnail(); // without parameter -> 'post-thumbnail'

the_post_thumbnail(‘thumbnail’,array(‘itemprop’=>’image’ )); // Thumbnail (default 150px x 150px max)
the_post_thumbnail(‘medium’,array(‘itemprop’=>’image’ )); // Medium resolution (default 300px x 300px max)
the_post_thumbnail(‘large’,array(‘itemprop’=>’image’ )); // Large resolution (default 640px x 640px max)
the_post_thumbnail(‘full’,array(‘itemprop’=>’image’ )); // Full resolution (original size uploaded)

the_post_thumbnail( array(100,100), array('itemprop'=>'image' ) ); // Other resolutions (100x100)

That’s it!

If you want to know more about, have a look at my original post. is also a wonderful resource, their documentation is excellent and would advise that you read through the Getting Started Guide, it provides a great overview of the concepts behind structured data and

Other Resources

Google has this little post about adding markup for organization logos. If you’re an organization, you should probably see what that’s all about.

Craig Bradford at says you’re behind if you’re not using yet. That post from Craig also has a lot of really good information for those new to and structured data.

Google also has a post about adding markup to videos, which could be really useful if you run a site with a lot of video content.

Searching the Google Webmaster Central Blog for “schema” yields some pretty useful results, too.


That’s all there is to adding basic structured data to your WordPress theme. You could obviously extend it to support more “things”, but I’ll leave that for you. If you did every step in this post, you’ll have markup for featured images, article publish and update time, main content declaration and structured data enabled title and head HTML tags.

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

View Results

Loading ... Loading ...
No structured data? You suck.

Have any questions, comments, or maybe even praise? Comments are open, as usual.


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


31 thoughts on “Add Markup To Any WordPress Theme

  1. Geez! you are at the top of the search for: “How to incorporate tags into a WordPress Theme” not just once but twice… you listing is there at the top and also in second place! This thing works eh? lol

  2. One tiny nit-picking point: the datetime should use ‘c’ to output the date in ISO format (is 2014-06-01 etc)

  3. 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.

  4. Hi, following step by step, but when i share to google plus, it show Could not Load website, can you help me.?

  5. I’m having an issue with .

    When I validate the code, I get the error “The property mainContentOfPage is not recognized by Google for an object of type Article.” any thoughts on what may be the issue

  6. Thanks for the great guide on setting up structured data ( on any WordPress theme. Implementing it manually is much better than using a plugin to to configure it automatically.

  7. Hi,guys. i have website developed in wordpress, which has archives it has no theme function.php or header.php,etc. the theme is Multimag premium child theme. then how can i had mark ups ,please can anyone help me out,. im learner……..

  8. I wonder, how is that in step 2 you have in code schema_org_markup() but the function is called html_tag_schema(), the whole website then goes down because of php error, am I right?

    Otherwise thank you for tutorial 😉

    1. There’s no way to implement across all themes in this manner. A plugin would need to be used, and even then it’ll miss a lot of schema attributes that could be used.

      E-commerce sites especially have a LOT of extra markup that can be added, to identify product name, description, price, sku, etc.

      I’d be happy to help you out if you’re needing some guidance or looking for someone to implement it for you.

  9. I don’t get it. I’m sorry I just started on this SEO thing. My name is addys. I want to know how to add it to my WordPress theme. Can all themes be edited like this? Or only certain ones?

  10. Thank you so much!
    I search for the datepublished format in wordpress.
    Hahaha so funny because the answer is ‘c’

    Nice tutorial

    1. Yah that “c” format character eluded me for a while as well. Guess I didn’t expect there to be a format character specifically for outputting ISO 8601 dates.

  11. Pingback: traiteur rabat

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.