Archived topic
Star_Bar implementation
4 replies · Started by Denis on November 11, 2022
Hello,
I want to use revie stars. The following css I found in Davids gist:
https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6
I used simply css to write the css.
In next step I use shortcode [star_bar] but nothing works, only text [star_bar] is shown.
Can you help?
Regards Denis
Hi there,
did you try it with the required attributes?
eg. [star_bar stars="2.6"]
Thanks for reply david.
If I use required attributes, this have no effect.
It still remain same. only text "[star_bar stars="2.6"]" is shown.
Do have another idea?
I used the following CSS:
function make_star_bar( $atts ) {
$value = shortcode_atts( array(
'stars' =>5,
'color' => '#f00'
),$atts);
$percentage = 100 * $value['stars'] / 5;
$html = '★★★★★
.star-bar {
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);
}
';
return $html;
}
add_shortcode('star_bar', 'make_star_bar');
Aah the code is PHP.
This doc explains where and how you should add it to your site:
https://docs.generatepress.com/article/adding-php/
TLDR:
Are you using a Child Theme?
If yes, then you can add the code to the Child Themes functions.php
If No, then use the Code Snippets Plugin ( link in the above doc ) and add the code to a new snippet.