Thesis 2.0 – 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.

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;
}

View the Demo Here

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.