Star Rating System

If you're cool with Apple Emojis and you don't mind there being no decimal points for the stars then remove your current shortcode ( save it somewhere for backup ) and use this instead:

function make_star_bar( $atts ) {
    $value = shortcode_atts( array(
      'stars' =>10
    ),$atts);
    $html = '<ul class="star-bar">';
    for ($x = 0; $x <= 10; $x++ ) {
        if ( $x <= $value['stars'] ) {
            $html .= '<li class="rated">🍎</li>'; 
        } else {
            $html .= '<li>🍎</li>';
        }
    }
    $html .= '</ul>';
    return $html;
}
  
add_shortcode('star_bar', 'make_star_bar');

Replace the apples with your previous unicodes.

And then add this CSS to your site:

.star-bar {
    list-style: none;
    margin: 0;
    display: flex;
}

.star-bar li {
    text-align: center;
    font-size: 50px;
}

.star-bar li:not(.rated) {
    opacity: 0.5;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

How to add CSS: https://docs.generatepress.com/article/adding-css/

Works Great!

but like you said there are no decimal value but i can live with that

thank you

Awesome - glad to hear that!!

Hello David,

I love the Star Bar Shortcode!

But as pointed out by Nichola in GitHub, it doesn't work if you use it multiple times on one page.

How easy is it to tweak the code so it can be used multiple times?

Thank you.

Hi there,

it depends :) How are you using the shortcode - Is it inside a single post ? Or are you using it in the archives ?

Using it in a single post :)

See my updated GIST here:

https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6

Awesome! It works perfectly. Thanks, David.

Glad to hear that!

For me, it's always showing 5 empty stars no matter what number I add to the shortcode...

Hi there,

if you can share a link to your site where the issue can be seen, we can take a look,

Thanks, David, unfortunately, I can't share the link. Actually, your code it's working. The problem is with code with implemented Schema Rating ( I found it on your github.com link) I'm receiving an error: There has been a critical error on this website" when trying to add this:

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 . '">★★★★★</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');

Could you please help?

Thanks a lot!

Also, is there a way to add the star rating after the article title? Similar to here: https://www.gsmarena.com/xiaomi_13_pro-review-2535.php Or the only way is to create unique hooks for every post since the ratings would be different?

It looks like a spacing issue in that users code.
Try this instead:

function make_star_bar( $atts ) {
    $value = shortcode_atts( array(
      'stars' =>5,
      'color' => '#f00'
    ),$atts);
    $stars = $value['stars'];
    $prefix = 'star-bar-';
    $uniqueClass = uniqid($prefix);
    $percentage = 100 * $stars / 5;
    $html = '<span class="'.$uniqueClass.'">★★★★★</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": "' . $stars . '",
        "bestRating": "5",
        "worstRating": "1"
    }
    </script>
    ';
    return $html;
}
add_shortcode('star_bar', 'make_star_bar');

Works fine now. Thanks a lot, David!

Any smart way to implement the star rating after the article title, before the text? (for multiple pages)