Star Rating System

Hi there,

you can check out my Gist here that creates a shortcode for displaying x out of 5 stars:

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

Thanks!

I guess I'll just have to edit this to make it x out of 10:

'stars' =>5

Am i right?

That just sets the default value - you can change it to 10.
But to get it to display 10 stars means changing these two lines:

$percentage = 100 * $value['stars'] / 5;
$html = '<span class="star-bar">★★★★★</span>

to:

$percentage = 100 * $value['stars'] / 10;
$html = '<span class="star-bar">★★★★★★★★★★</span>

Copy and paste the star unicodes - there should be 10 of them, as they will render in this forum

thankyou

While I'm here, could you direct me to documentation on how to implement this shortcode?

sorry, totally newbie here

Ignore my last reply, Just implemented it!

however, I change the "stars" to "apples" and it seems the function is broken.

It always shows 10 apples. no matter what value I insert

this is the "apple" html code: 🍎

HTML-code

&#127822 ;

Space included so it doesn't show the image

Looks like the unicode is being coverted to an emoji. Which will not work with that shortcode.
You will need to make sure its stays unicode. You can try adding this CSS to force that:

.star-bar {
    font-family: monospace;
}

Hmm.. i think it doesn't work

Did it work with the stars ?

the stars works just fine, can't seem to force the apple emoji to stay unicode

Can you share a link to the page where i can see the apples?

Private link provided

Well thats a pain in the ***
The Apple logo symbol works just fine:

 = & #63743; without the space

Will that do ?

Rendered as ? on my end.

I'll just have to give up with the apples and stick with the stars instead :)

Is it possible to resize the star to fit on the body container similar to nintendolife article I provided earlier.