Changing the star rating

By default we’re including a beautiful star rating in the plugin. If you would like to change the looks of the star, or maybe even completely replace the star by something else you can do this with minimum effort.

The only thing you’d need to do is copy the `reviewer/templates/single-review/rating.php` template over to your theme (into the same path) and make your changes.

Read more about using templates in Reviewer

Default rating template explained

<!-- Colored stars -->
<div class="review-rating review-rating-color" style="width: <?php echo $color_width . '%'; ?>;"><?php

   for ( $i = 1; $i <= $max_rating; $i++ ) :
      ?><span class="star star-colored"><?php
         echo file_get_contents( plugins_url( 'assets/img/star.svg', \Reviewer\RV()->file ) );
      ?></span><?php
   endfor;

?></div>

<!-- Gray stars -->
<div class="review-rating review-rating-uncolored"><?php

   for ( $i = 1; $i <= $max_rating; $i++ ) :
      ?><span class="star"><?php
         echo file_get_contents( plugins_url( 'assets/img/star.svg', \Reviewer\RV()->file ) );
      ?></span><?php
   endfor;

?></div>

The code above is how it is setup by default. The default rating is build up out of two layers, one for the greyed out stars, and one on top of that with the colored stars. This allows the rating to be responsive and very accurate at the same time.

If you only want to change the star icon you just have to replace the two lines that call those icons and you should be set.

In case you want to go a bit further and replace it completely with a custom style you may choose to remove the full code above and add your own code as needed.

Just want to change the colors?

There’s no need override the template if you’re just looking to change the colors on the stars. You can modify the colors with some simple CSS. Here’s a example that changes the filled stars to green, and the background to red:

.review-rating-wrap .star.star-colored svg {
    fill: green;
}
.review-rating-wrap .star svg {
    fill: red;
}

This can be added to your (child) themes style.css file or through a specialised CSS plugin if you’re using one.

Leave your feedback