Star Bar Shortcode

function make_star_bar( $atts ) {
    $value = shortcode_atts( array(
      'stars' =>5,
      'color' => '#f00'
    ),$atts);
    $prefix = 'star-bar-';
    $uniqueClass = uniqid($prefix);
    $percentage = 100 * $value['stars'] / 5;
    $html = '<span class="'.$uniqueClass.'">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <style>
    .'.$uniqueClass.' {
        background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%);
        color: rgba(0,0,0,.2);
        background-clip: text;
        -webkit-background-clip: text;
        color: rgba(0,0,0,.2);
    }
    </style>
    ';
    return $html;
}
add_shortcode('star_bar', 'make_star_bar');

A simple x out of 5 Star Bar.
Basic use with default color #f00:
[star_bar stars="2.6"]

With color attribute:
[star_bar stars="2.6" color="#0000ff"]

Thanks, works great! Only issue is if you attempt to use many of these on one page. Since they all have the same CSS, the stars all get shaded the same.

Now support a uniqueClass allowing for multiple shortcodes to be used on the same post.

Hey @diggeddy

Can you please add https://schema.org/Rating schema to the code. Like when ever we use the stars, it generates the rating schema also. That would be really great :)

Like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Rating",
  "ratingValue": "4.5",
  "bestRating": "5",
  "worstRating": "1"
}
</script>

I implemented Rating Schema, here:

function make_star_bar($atts)
{
    $value = shortcode_atts(array(
        'stars' => 5,
        'color' => '#f00'
    ), $atts);
    $prefix = 'star-bar-';
    $uniqueClass = uniqid($prefix);
    $percentage = 100 * $value['stars'] / 5;
    $html = '<span class="' . $uniqueClass . '">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<style>
	.' . $uniqueClass . ' {
		background: linear-gradient(90deg, ' . $value['color'] . '' . $percentage . '%, rgba(0, 0, 0, 0) ' . $percentage . '%);
		color: rgba(0, 0, 0, .2);
		background-clip: text;
		-webkit-background-clip: text;
		color: rgba(0, 0, 0, .2);
	}
</style>
<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Rating",
		"ratingValue": ' . $value['
		stars '] . ',
		"bestRating": "5",
		"worstRating": "1"
	}
</script>
';
    return $html;
}
add_shortcode('star_bar', 'make_star_bar');

A simple x out of 5 Star Bar. Basic use with default color #f00: [star_bar stars="2.6"]

With color attribute: [star_bar stars="2.6" color="#0000ff"]

Can we implement this to block template with dynamic data? I have a rating field as a ACF custom field, I can display rating number but I want to show star rating. How can I feed the rating from dynamic data?

EDIT:
I found the solution, GeneratePress is amazing! 🎉
My custom field name is "rating". It's magic:

function make_star_bar( $atts ) {
	$rating_term = get_field('rating');
	$value = shortcode_atts( array(
		'stars' => $rating_term,
		'color' => 'orange'
	),$atts);
	$prefix = 'star-bar-';
	$uniqueClass = uniqid($prefix);
	$percentage = 100 * $value['stars'] / 5;
	$html = '<strong>'.$value['stars'].'/5</strong>
	<span class="'.$uniqueClass.'">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <style>
    .'.$uniqueClass.' {
        background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,1) '. $percentage.'%);
        color: rgba(0,0,0,0);
        background-clip: text;
        -webkit-background-clip: text;
    }
    </style>
	<script type="application/ld+json">
		{
		  "@context": "https://schema.org",
		  "@type": "Rating",
		  "ratingValue": '.$value['stars'].',
		  "bestRating": "5",
		  "worstRating": "1"
		}
	</script>
    ';
	return $html;
}
add_shortcode('star_bar', 'make_star_bar');

Hi Gentlemen. I came looking for this and I found it! Question--where do I add this code? I know how to reference the shortcode on my post. Do I create an element with the code? And the element would be a shortcode?

@Sparkledump the code is PHP.
If you're using a Child Theme, then add it to the Child theme functions.php
If you're not, then use the Code Snippets plugin to add the code to a new snippet

@buraste very nice :)

hey guys, one question. so i need to use shortcode with star value on every of my post? Because the data input from ACF is not showing