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"]


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.


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.
3 thoughts on “How to Add Inline Star Rating in WordPress (Without Plugin)”
Thank you for your nice code. I tried it on this page https://www.socialgrowthy.com/reviews/. But two extra stuff have been added to the star rating. The screenshot is here https://prnt.sc/spZv7j8DW-cS. I added the code via code snippet. I also checked by adding directly to the theme’s fucntion.php file. I disabled all other plugins to test, but still, two extra stuff are there at the beginning of the 5-star ratings. Could you please check for me? I know you are very busy. Thank you.
Hi Shakir,
I have checked, and there is no additional stuff on our end and the star on your website.
Since the code uses black star and empty star symbols, please ensure there are no issues with using these symbols on your browser.
You are my new god. I’ve been trying to find this kind of solution for the last two days and I almost gave up. Thanks!