Thesis 2.0 – Review Meta Box with Schema

review meta box with schema
Writing reviews just got easier

Thesis 2.0 has taken schema to a new level. With the amazing drag and drop HTML editor and template system it has never been easier to dynamically build awesome, clean and logically valid templates.

By logical, I mean that the way in which the HTML editor works. It works by visually displaying the skeletal structure of your site in the order it appears on the front end, allowing you to easily add additional HTML snippets of code precisely where it is needed and with the correct markup.

With that in mind I decided to take things one step further and created the Thesis 2.0 review meta box with Schema to allow you to review products like never before.

Seriously it doesn’t get easier than this.

Thesis 2.0 – Review Meta Box

The review meta box for thesis 2.0 comes with all the markup you need to neatly produce reviews with 100% valid schema as tested by Google’s Rich Snippet Tools.

For those concerned about w3 validity, the review meta box is also 100% validated as tested with w3 validation tools.

Features Version 1.0

  • All in one box, literally!
  • All options available directly in the Post editor
  • Option for Product Name
  • Customizable Minimum and Maximum scale
  • Star Rating system
  • Include image of the item being reviewed
  • Add your Affiliate link to the item being reviewed

Installation and Setup

The HTML layout

Visual Reference for the Layout demonstrated in the Video.

review meta box html structure

The remaining classes for styling purposes

  • Review Ratings Boxes: .review_meta_rating
  • Review Image: .review_image_box
  • Review affiliate: .review_affiliate
  • Review affiliate link: .review_affiliate a

Styling the review meta box

Copy and paste this CSS in the custom css tab in the CSS editor. Or create a single style package and paste it in additional CSS.

.review_meta_box {
    background: none repeat scroll 0 0 #FFFF99;
    border: 2px solid #FFCC66;
    display: inline-block;
    margin: 10px 0;
    padding: 10px;
}
.review_meta_rating {
    float: left;
}
.review_affiliate a {
    background: none repeat scroll 0 0 #30A146;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    display: block;
    padding: 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.review_affiliate a:hover {
    background: none repeat scroll 0 0 #03821b;
}
.review_image_box {
    border: 2px solid;
    float: left;
    line-height: 0;
    margin-left: 15px;
}

I look forward to seeing the variety of styles used.

Don’t have Thesis check it out here

Like this box? Why not buy me a Coffee.

Thesis 2.0 Box

Leave a Comment

Current month ye@r day *

Comments

  • Avinash D'Souza December 27, 2012, 5:01 am

    Pretty awesome box, Matthew!

    May I suggest when you’re making one of these tutorial posts that you include a demo post link as well so that we can see what it finally looks like?

    Reply
    • Matthew Horne December 27, 2012, 5:55 am

      Thanks, I added a link to a demo page on my test site.

      Reply
  • Philippe Zamor January 15, 2013, 6:37 am

    Hi Matthew, thanks a lot for sharing, I will definitely use this in the near future as I am putting together a cooking site and will be reviewing a few items and recipes. Would the process be the same if I want to create a custom posts for my recipes. Is it really more difficult? Maybe you could even show how it’s done… ;-)

    Reply
    • Matthew Horne January 15, 2013, 6:38 am

      Depends what theme your using, but the process of creating the meta fields and linking to a template are similiar.

      Reply
      • Philippe Zamor January 15, 2013, 3:26 pm

        ok thanks, I’ll give that a try.

        Reply
  • Claude Gable February 7, 2013, 3:00 pm

    Amazing Box! I got one question tho: is it possible for the Review Image Box to link somewhere else? I would love to implement this on my site! Thanks!

    Reply
    • Matthew Horne February 9, 2013, 6:22 am

      I can make that possible, all my boxes will be updated soon, to add an update system so you only download once, after that you get notified via thesis admin panel and update from there.

      Reply
      • Claude Gable February 11, 2013, 6:48 am

        thanks! looking forward to the update!

        Reply
  • Roger February 23, 2013, 9:25 am

    Hi Matt, thanks for the box. I was wondering if is possible to localize to my language the strings: “Date published:” “Written by:” “Review Item:” “Rating:” if so, how can I do it? Thanks again.

    Reply
    • Matthew Horne February 24, 2013, 8:35 am

      Hi Roger, this is definitely something I can look in to adding.

      Reply
      • Roger April 11, 2013, 3:05 pm

        Can you gimme a hint on how can I localize that?

        Reply
  • komturker March 10, 2013, 1:44 am

    Hi, is it supporting product (http://schema.org/Product) schema?

    Reply
    • Matthew Horne March 10, 2013, 9:25 am

      More boxes related to schema will be produced after thesis 2.1 releases.

      Reply
  • Thomas Hays March 24, 2013, 10:40 pm

    Just installed it. Very happy with it.

    Reply
    • Matthew Horne March 29, 2013, 1:04 pm

      Thanks man, I am looking to add more features and other types of schema in the coming months ahead.

      Reply
  • Tim April 30, 2013, 1:38 pm

    Hi Matthew, at minute 3:45 you pull the Review Meta Box into the Review Post Box. I can’t find the Review Meta Box. Do I have to add a box? If yes, what kind of box should it be?
    Tim
    PS: Thanks for the awesome plugin, can’t wait to make it work :-)

    Reply
  • Kenny May 22, 2013, 11:59 pm

    Unable to get the star images to display. Installed box correctly, added custom CSS, and even added the CSS from rateit.css into Custom CSS. Uploaded star and delete images to Thesis blank skin.

    Reply
    • Matthew Horne May 23, 2013, 7:34 am

      What is the URL to the site, I clicking on the URL you have linked, but it just goes to a page with an optin form.

      I will be updating this box to make it function much better, however I am waiting on thesis 2.1 to be released much like everyone.

      I hope it will be released quite soon as I have to update quite a few boxes.

      Regards

      Reply
  • Rob Pickering November 21, 2013, 12:12 am

    Matthew,

    Love the box (and your other boxes). I’ve got this one working well on my site, ran Google’s Rich Snippet Tools and it passes and looks good. However, none of my reviews show up with stars in the search results on Google. Any ideas? Google “iBank 5 review” and you’ll find one of mine and see what I mean.

    Reply
    • Matthew Horne November 21, 2013, 4:16 am

      Did you create a review template and use Review Schema?

      Reply
  • Tim February 24, 2014, 9:58 am

    Hey Matt
    this is cool!
    What if, though, there are multiple affiliate links?
    For example, in my (cycling) reviews, I’ll link to 2-5 providers…

    Tim

    Reply

This site rocks the DIYWP Optimized Skin for Thesis & is hosted by Webhostingbuzz