Search

How to Add Inline Star Rating in WordPress (Without Plugin)

Star ratings provide a quick and visually appealing way for users to assess the quality of content or products. Whether it’s a product review, a recipe, or an article, star ratings offer an immediate sense of credibility and trustworthiness. Visitors can easily gauge the general consensus on a particular item or post, helping them make informed decisions.

An inline star rating could give you more flexibility in designing your content since you can place the rating inline with any text in WordPress. With that freedom in mind, what we will show you here, not only you can add the star rating anywhere, but you can also change the color of the stars and adjust the star size to your liking. And all of that without installing additional plugins for it.

Adding Star Rating in WordPress

In this tutorial, we will guide you through the steps of implementing a star rating system on your WordPress website using the shortcode method. We will start by creating the necessary shortcode and then demonstrate how to seamlessly integrate it into both the Gutenberg editor and popular page builders like Divi. Let’s dive in!

Create the Star Rating Shortcode

To start creating the star-rating shortcode, from your WordPress admin dashboard, navigate to the Appearance Theme File Editor menu then add the following code to the bottom of the active theme’s functions.php file on the editor.

function star_rating_shortcode($atts) {
    // Default attributes
    $atts = shortcode_atts(array(
        'rating' => 0,       // Default rating value
        'color' => 'yellow', // Default star color
        'size' => '24px'     // Default star size
    ), $atts);

    //validate attributes
    $rating = absint($atts['rating']);
    $color = sanitize_text_field($atts['color']);
    $size = esc_attr($atts['size']);

    // Validate rating (between 0 and 5)
    if ($rating < 0) {
        $rating = 0;
    } elseif ($rating > 5) {
        $rating = 5;
    }

    // Generate the star rating
    $output = '<div class="star-rating" style="color:' . $color . '; font-size:' . $size . ';">';
	$output .= '<style>.star-rating .star { text-shadow: 0 0 1px black; }</style>';
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $rating) {
            $output .= '<span class="star">★</span>'; 
        } else {
            $output .= '<span class="star">☆</span>';
        }
    }
    $output .= '</div>';

    return $output;
}

add_shortcode('star_rating', 'star_rating_shortcode');

The provided above creates a [star_rating] shortcode, allowing you to display a star rating with customizable attributes for color and size. Once you’ve added the code, click the Update File button to save the changes.

If you’re working with a block theme, you can find the Theme File Editor menu located within the Tools menu. Alternatively, you can make use of the Code Snippets plugin to conveniently manage all of your custom code. This approach ensures that you won’t need to be concerned about the potential issues of switching themes or encountering disruptions to your custom functions when updating your theme.

Add the star_rating Shortcode in Gutenberg

Now all you need to do is add the shortcode to your desired post or page. You can specify the color and size attributes and their values when using the shortcode, as demonstrated in the following example:

  • [star_rating rating="3" color="#4290f5" size="30px"]
Shortcode in Gutenberg editor
Frontend result

And, if you use the shortcode without specifying the color and size attributes, like so: [star_rating rating="4"], the code will automatically use default settings, which include a yellow color and a star size of 24px.

Shortcode in Gutenberg editor

Add the Star Rating for Page Builder

The star rating feature is so valuable that it’s integrated into premium plugins of some of the most popular page builders, such as Divi and Elementor. In Divi, you can access the star rating module through their highly regarded premium plugin, Divi Supreme. Meanwhile, for Elementor users, the star rating element is exclusively available in the Pro version.

Adding the star rating in the page builder is much more flexible since you can add the shortcode almost to any module and element with text. For demonstration, we will add the star rating shortcode on the following blurb module in Divi.

Now, we’ll add the star rating in a new line just below the content in the Body text.

And we will see the star rating right away, exactly as we want it.

The Bottom Line

Star ratings are a valuable tool for users to quickly assess content or products, offering credibility and trustworthiness. It is so valuable that it’s integrated into premium plugins of some of the most popular page builders, such as Divi and Elementor. We just show you how to add inline star ratings that provide flexibility in design, allowing placement within text, customized star colors, and adjustable sizes in WordPress without the need for additional plugins.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

1 thought on “How to Add Inline Star Rating in WordPress (Without Plugin)”

Leave a Comment