wp_star_rating()
Outputs HTML rating (stars) for the specified rating.
Outputs an HTML element with star rating, on a scale from 0 to 5 in half-star increments (1, 1.5, 2 stars). It can also display the number of ratings if the parameter $number is passed.

By default, it only works in the admin panel.
No Hooks.
Returns
String
. HTML code.
Usage
wp_star_rating( $args );
- $args(array)
Array of arguments for displaying stars.
-
rating(int)
The rating to display.If
type = rating
, the number will be considered a rating and the number of stars specified in this parameter will be displayed.If
type = percent
, the number will be considered a percentage and 5 stars will be shown filled according to the specified number.
Default: 0 -
type(string)
The format in which the parameter $rating is specified. Can be:rating
orpercent
.
Default: 'rating' -
number(int)
The number based on how many votes the result is shown, add to the title attribute of the tag. Leave 0 to not show.
Default: 0 - echo(bool)
Display or return the result?
Default: true
-
Examples
#1 Rating (stars) output
wp_star_rating( ['rating'=>7.5, 'type'=>'rating', 'number'=>0 ] ); /* Will withdraw: <div class="star-rating" title="Rating 7.5"><span class="screen-reader-text">Rating 7.5</span> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-half"></div> </div> */
It looks like this:

wp_star_rating( ['rating'=>85, 'type'=>'percent', 'number'=>654 ] ); /* Will withdraw: <div class="star-rating" title="Rating 4.5 based on 654 votes"><span class="screen-reader-text">Rating 4.5 based on 654 votes</span> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-half"></div> </div> */
It looks like this:

#2 Output in the front-end
In the front-end function does not work and there is better to make their own similar function. But if you have 'dashicons' fonts on front, then it makes sense to use this function, for this you need to include the function file and css styles:
<?php // for use on front require_once ABSPATH .'wp-admin/includes/template.php'; // connect icons add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_style( 'dashicons' ); } ); // add styles add_action( 'wp_head', function(){ ?> <style> .screen-reader-text{ position: absolute; margin: -1px; padding: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; word-wrap: normal!important; } .star-rating .star-full:before { content: "\f155"; } .star-rating .star-half:before { content: "\f459"; } .star-rating .star-empty:before { content: "\f154"; } .star-rating .star { color: #0074A2; display: inline-block; font-family: dashicons; font-size: 20px; font-style: normal; font-weight: 400; height: 20px; line-height: 1; text-align: center; text-decoration: inherit; vertical-align: top; width: 20px; } </style> <?php } ); // Output HTML wp_star_rating( [ 'rating'=>4.5, 'type'=>'rating', 'number'=>521 ] ); /* We get: <div class="star-rating" data-title="4,5 rating based on 521 ratings"> <span class="screen-reader-text">4,5 rating based on 521 ratings</span> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-full"></div> <div class="star star-half"></div> </div> */
Changelog
Since 3.8.0 | Introduced. |
Since 4.4.0 | Introduced the echo parameter. |