WordPress shortcode for accessible "Fontawesome 5" star ratings.

rating-shortcode.php

<?php
	function my_rating( $atts ) {
		$rating = shortcode_atts( array(
			'stars'  => '',
			'half'   => 'false',
		), $atts );

		$star      = esc_attr($rating['stars']);
		$stars     = str_repeat('<i class="fas fa-fw fa-star"></i>', $star);
		$half      = esc_attr($rating['half']);
		$halfstar  = '<i class="fas fa-fw fa-star-half-alt"></i>';
		$dif       = 5 - esc_attr($rating['stars']);
		$empty     = str_repeat('<i class="far fa-fw fa-star"></i>', $dif);
		$difhalf   = 4 - esc_attr($rating['stars']); 
		$emptyhalf = str_repeat('<i class="far fa-fw fa-star"></i>', $difhalf);

		if ( $half == 'false' ) {
			return $stars . $empty . '<span class="hide" aria-hidden="false">' . $star .'.0 out of 5</span> <span class="lining" aria-hidden="true">' . $star .'.0</span>';
		}
		elseif ( ( $half == 'true' ) && ( $star < 5 ) ) {
			return $stars . $halfstar . $emptyhalf . '<span class="hide" aria-hidden="false">' . $star .'.5 out of 5</span> <span class="lining" aria-hidden="true">' . $star .'.5</span>';
		} else {
			// 5 stars is maximum. 5½ stars outputs 5 stars.
			return $stars . $empty . '<span class="hide" aria-hidden="false">5.0 out of 5</span> <span class="lining" aria-hidden="true">5.0</span>';
		}

	}

	add_shortcode( 'rating', 'my_rating' );

IMPORTANT NOTE:

I've written a WordPress plugin to handle this. It significantly improves the code and uses a simpler shortcode syntax than this gist.

Out-of-the-box, the plugin has no settings. Just insert the shortcode where you want to display the rating & it handles the rest.

IF YOU NEED a more customizable solution, you can upgrade to the PRO version.

If you insist on using this obsolete code, here is the usage:

Before you start, change the namespace, e.g., from my_rating to name_of_my_awesome_plugin_or_theme_rating.

If you prefer semantic output over brevity, find and replace all occurrences of <i class="fas fa-fw fa-star"></i> with <span class="fas fa-fw fa-star"></span>.

RECOMMENDED: If your font supports it, add this to your CSS to style the displayed numerical text:

.lining {font-variant-numeric: lining-nums;}

1. Copy and paste to your theme's functions.php, omitting the opening PHP tag*
2. Alternatively, create a new file, e.g., ratings-shortcode.php, place it in your theme directory, and call it via PHP include
3. Or create a custom plugin and use it there

Example shortcode: [rating stars=3] (Displays 3 stars out of 5)
[rating stars=2 half=true] (Displays 2½ stars out of 5)
[rating stars=4 half=false] (Displays 4 stars out of 5)
[rating stars=5 half=true] (Incorrect usage but will display 5 stars out of 5)

*Do not edit parent theme files unless you are the theme author; your changes will be overwritten during the next update. Instead, create a child theme and edit its files.