Create Average Rating Badge

In some cases it is useful to have smaller badge showing rating only, instead of whole rating block. This can be achieved relatively easy with use of T2 templates for both standard and multi ratings. All this involves, is a template, an image for background and a bit of CSS for styling.

Star Badge Image

You can get image you need for this from here: star_badge.png. For this example, put this image into your theme folder. You can put it anywhere, but you need to adjust URL for it in the CSS.

CSS Styling

All the styling goes into the style.css for your theme, and we use image from previous step located in the theme folder.

[css].custom-block-badge {
background: transparent url(star_badge.png);
font-size: 14px;
font-weight: bold;
height: 42px;
line-height: 44px;
text-align: center;
width: 42px;
}[/css]

Style for the badge is ready to go. Height and Weight correspond to the size of the image. Use Line Height to vertical center text.

T2 Templates

First, we need to create templates, starting from T2 Templates panel. If you need to use this for standard rating, you need to create new template for Standard Ratings Block. Name it: Standard Badge, and for the Template/Normal part use this HTML code:

[php]<div class="custom-block-badge">%RATING%</div>[/php]

And if you need this for multi rating, create template for Multi Ratings Block. Name it: Multi Badge, and for the Template/Normal part use this HTML code:

[php]<div class="custom-block-badge">%AVG_RATING%</div>[/php]

That’s it. You have templates for both types of star rating, and image with styling. Be sure to remember the ID’s for both templates, it is needed for the function use. Now, you can use the badges in your functions to display ratings for posts. If you want to use these templates in the widgets, or other places where you can get the from the dropdown list (using Builder), they can be found by name.

For standard rating, you can use this example function call to show rating block inside the post loop (replace 52 with the ID for Standard Badge you have):

[php]wp_gdsr_render_article(52, true);[/php]

For multi rating, replace 1 with the multi set ID you are using, and 54 with the ID for Multi Badge.

[php]wp_gdsr_render_multi(1, 54, true);[/php]

Comments

Leave a Reply