Site logo

Archived topic

Star_Bar implementation

4 replies · Started by Denis on November 11, 2022

Viewing posts 1–5 of 5

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.

This archived topic is closed to new replies.