[Resolved] Star Rating System

[russel]

hi, I’m aware that it is outside of your scope but I can’t seem to find any documentation regarding this feature.

I want to add a star rating system only by using shortcodes/alt code etc. – similar to this :
https://www.nintendolife.com/reviews/nintendo-switch/beyond-a-steel-sky

Is it possible to create this without resorting to plugins?

[David]

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

[russel]

Thanks!

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

‘stars’ =>5

Am i right?

[David]

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

[russel]

thankyou

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

sorry, totally newbie here

[russel]

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

[russel]

HTML-code

&#127822 ;

Space included so it doesn’t show the image

[David]

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;
}

[russel]

Hmm.. i think it doesn’t work

[David]

Did it work with the stars ?

[russel]

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

[David]

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

[russel]

Private link provided

[David]

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

 = & #63743; without the space

Will that do ?

[russel]

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.

[Author]

Posts