Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Css to make stars larger for Star bar Shortcode

  • Hello

    Regarding this Star Bar shortcode.

    It works great. I want to have the stars larger.

    Is there any CSS that I can control the size of the stars if I add that to my child themes .css?

    Thank you.

  • Hi there,

    You can modify the code by adding a ‘size’ attribute to control its size:

    function make_star_bar( $atts ) {
        $value = shortcode_atts( array(
            'stars' => 5,
            'color' => 'blue',
            'size' => '16px', // Default size is 16 pixels
        ), $atts);
        $prefix = 'star-bar-';
        $uniqueClass = uniqid($prefix);
        $percentage = 100 * $value['stars'] / 5;
        $html = '<span class="'.$uniqueClass.'">★★★★★</span>
        .'.$uniqueClass.' {
            font-size: '. $value['size'] .';
            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;
        return $html;
    add_shortcode('star_bar', 'make_star_bar');

    By default, the star icon size will be 16px. Let’s say you want the size to be 30px; just add the size attribute in the shortcode like so:

    [star_bar stars="2.6" color="#0000ff" size="30px"]

  • HI.

    Thank you.

    However, I get this error when I try and update the file.

    Your PHP code changes were not applied due to an error on line 13 of file wp-content/themes/generatepress_child/functions.php. Please fix and try saving again.

    syntax error, unexpected single-quoted string “size”, expecting “)”

  • I’m sorry. This works. I had something missing.

    Thank you again.

  • No problem, glad to be of help!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.