Divi is a multipurpose theme. You can use it to create any type of website. One of which is a review blog — a blog dedicated to write reviews. In the context of review blog, some bloggers add star rating on each blog post they write to emphasize the review. Some WordPress themes like Newspaper by tagDiv has a bult-in feature to add dynamic star rating. Unfortunately, Divi doesn’t have one. If you use Divi and need this feature, we will show you how to add dynamic star rating in Divi.
As you know, Divi comes with a theme builder feature that allows you to create custom templates for your theme parts, including the single post. You can make use of this feature to create a custom single post template and add the star rating element to it. To add the dynamic functionality, you can use Advanced Custom Fields or the similar plugins like Pods and Meta Box.
The problem is, Divi Builder has no native module to add star rating so that you need to install a plugin. One of the Divi Plugins that has a star rating module is Divi Supreme, which we will use this example.
How to Add Dynamic Star Rating in Divi
You can follow the steps below to add dynamic star rating in Divi.
Step 1: Create a Custom Field Using Advanced Custom Fields (ACF)
On the first step, you need to create a custom field using ACF or other custom field plugins that support number field type. The number field type is used to add the star rating via the WordPress editor. To be able to create a custom field using ACF, you need to install it on your WordPress site first, of course.
Once the ACF plugin is installed and activated, go to Custom Fields -> Add New on your WordPress dashboard to create a new custom fields group. Give your custom fields group a name and click the Add Field button to add a custom field.
Give your custom field a label and name. On the Field Type option, select Number and set the minimum and maximum values on the Minimum Value and Maximum Value, respectively. Normally, the maximum value for star rating is 5.
You can add more custom fields if you need ones. Once you are done, you can switch to the Location section to assign the custom fields group. If you want to assign it to blog posts, you can use the following rule (the default rule).
Click the Publish button to publish the custom fields group.
For more detailed instructions on how to create custom fields using ACF, you can refer to this article.
Step 2: Create the Custom Template Using Theme Builder
Again, you need to install a plugin to be able to add star rating as Divi Builder has no native module to add one. Divi Supreme is one of the plugins you can install. The plugin offers about 59 modules in total, allowing you to unleash your creativity when creating a website using Divi. Divi Supreme itself is available on Divi Marketplace.
Once you are ready, go to Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking the plus button. Select All Posts (or other areas you want to assign the custom template to). Click the Create Template button.
Once the template is added, click Add Custom Body -> Build Custom Body.
On the appearing dialog, you can select the leftmost option (BUILD FROM SCRATCH) as Divi Builder offers no ready-made single post template on its library. Click the Start Building button to start editing the template.
Once the Divi Builder editor opens, you can set the layout by adding the necessary sections and rows before you add the actual design elements (modules) like post title, post content, and so on. Since you want to add dynamic star rating, don’t forget to add the Star Rating module. You can place this module anywhere. Be it before post content or after post content.
Once the Star Rating module is added, click the dynamic icon on the Rating field under the Rating block under the Content tab on the settings panel.
Select the custom field you have just created on step one above on the ACF section.
You can add a before/after text if you want it. You can go to the Design tab on the settings panel to style up the star rating. There are 12 blocks you can open here. You can set things like the star color, size, alignment, and so on.
Once you done editing the template, you can click the Save button on the bottom-right corner to apply the changes followed by the X icon on the top-right corner to exit the Divi Builder editor. On the theme builder page, don’t forget to click the Save Changes button.
For more detailed instructions on how to create a custom single post in WordPress using Divi Builder, you can read this post.
Step 3: Write a New Post
Lastly, you can start to write a new blog post (or edit an existing one) just like usual. To add the star rating, you can input the number on the custom field section within the WordPress editor. The number you add will represent the number of star rating on the frontend.
The Bottom Line
Divi allows you to step further with WordPress, even if you have no programming skills. Its built-in page builder — Divi Builder — supports dynamic content, allowing you to create a customized dynamic website without coding. You can add custom dynamic content like star rating with the help of a custom field plugin. While this article demonstrated how to add dynamic star rating to blog posts, the implementation can be broader. For instance, you can add dynamic star rating to a custom post type dedicated to movie database site, property listing site, and so on.
