wp_star_rating() │ WP 3.8.0

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.

stars

By default, it only works in the admin panel.

1 time — 0.000057 sec (very fast) | 50000 times — 1.30 sec (fast) | PHP 7.0.2, WP 4.4.2

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 or percent.
    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

#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:

0

#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.

wp_star_rating() code WP 7.0

wp-admin/includes/template.php 
function wp_star_rating( $args = array() ) {
	$defaults    = array(
		'rating' => 0,
		'type'   => 'rating',
		'number' => 0,
		'echo'   => true,
	);
	$parsed_args = wp_parse_args( $args, $defaults );

	// Non-English decimal places when the $rating is coming from a string.
	$rating = (float) str_replace( ',', '.', $parsed_args['rating'] );

	// Convert percentage to star rating, 0..5 in .5 increments.
	if ( 'percent' === $parsed_args['type'] ) {
		$rating = round( $rating / 10, 0 ) / 2;
	}

	// Calculate the number of each type of star needed.
	$full_stars  = floor( $rating );
	$half_stars  = ceil( $rating - $full_stars );
	$empty_stars = 5 - $full_stars - $half_stars;

	if ( $parsed_args['number'] ) {
		/* translators: Hidden accessibility text. 1: The rating, 2: The number of ratings. */
		$format = _n( '%1$s rating based on %2$s rating', '%1$s rating based on %2$s ratings', $parsed_args['number'] );
		$title  = sprintf( $format, number_format_i18n( $rating, 1 ), number_format_i18n( $parsed_args['number'] ) );
	} else {
		/* translators: Hidden accessibility text. %s: The rating. */
		$title = sprintf( __( '%s rating' ), number_format_i18n( $rating, 1 ) );
	}

	$output  = '<div class="star-rating">';
	$output .= '<span class="screen-reader-text">' . $title . '</span>';
	$output .= str_repeat( '<div class="star star-full" aria-hidden="true"></div>', $full_stars );
	$output .= str_repeat( '<div class="star star-half" aria-hidden="true"></div>', $half_stars );
	$output .= str_repeat( '<div class="star star-empty" aria-hidden="true"></div>', $empty_stars );
	$output .= '</div>';

	if ( $parsed_args['echo'] ) {
		echo $output;
	}

	return $output;
}

Uncategorized