Learn how to customize WordPress reviews with the help of JetReviews and Gutenberg (Block Editor).
Before you start, check the tutorial requirements:
- Block editor (Gutenberg)
- JetReviews plugin installed and activated
- JetThemeCore plugin installed and activated with the single page of the needed post type created
- (optional) JetEngine plugin installed and activated, Custom Post Type created to attach reviews to it. Posts attached to the post type
From this tutorial, you will find out more about the JetReviews settings and the Reviews Listings block for Gutenberg available with this plugin.
Create a Custom Review Type
Navigate to WordPress Dashboard > JetReviews > Review Types and press the “Add New Type” button.
Give a Name to the review type, leave the default “Post” Source, and then select the preferred post type in the Source Type dropdown. For example, we select the “Posts” option to work with the default WordPress posts.
Move to Advanced Settings and press the “Add New Field” button in the Review Fields section.
Complete the Label of the review type and set the Step and Max Value in the corresponding fields. For example, we create an “Interesting” field with the “1” Step and “5” Max Value, allowing reviews to display evaluation points from “1” to “5.”
Once you want to create a new review criterion, click the “Add New Field” button one more time.
This way, we create two more one-to-five evaluation criteria: “Useful” and “Easy to Read.”
After everything is set, press “Create Review Type” to save the changes.
Customize the Single Post
Now, head to WordPress Dashboard > Crocoblock > Theme Builder and open the body editor of the single post template built beforehand, or build a new one.
In this guide, we will work with the “Posts” body built beforehand, so we click on the “Edit” button next to the needed body.
Here, add the Reviews Listing block to the template and look through its settings.
Things to know
The preview of the block is unavailable in the editor, but it will be visible on the front end.
Settings
This tab contains the general settings fields for customization:
- SOURCE — define the desired source of reviews. Now we pick the “Post” option;
- RATING LAYOUT — select the desired layout; it can be either “Stars” or “Points”;
- RATING INPUT TYPE — choose how the user can set the rating by dragging a slider or setting stars;
- REVIEW RATING TYPE — pick whether you want to show a “Details” or “Average” rating. If the first option is selected, all individual review fields will be shown in the final review, and in the case that the second option is chosen, only the average value of all ratings will be shown. For example, we select the “Details” option to display all three individual ratings provided by reviewers;
- REVIEWS PER PAGE — set the number of reviews shown on the page;
- Show Review Author Avatar — keep enabled to show the avatar of the user who wrote the review;
- Show Review Title — keep activated to ensure the title of the review will be shown;
- Show Review Title Field — keep enabled to display the title field in the review section;
- Show Review Content Field — keep enabled to display the content field in the review section;
- Show Comment Author Avatar — keep enabled to show the author’s avatar next to the comment following the review.
Icons
In this tab, you can select the icons for various sources, e.g., stars and buttons.
Labels
In this tab, you can set the notifications shown to the user based on specific triggers.
Advanced
Furthermore, you can paste the CSS code into the ADDITIONAL CSS CLASS(ES) field of the Advanced tab to style the block.
Or, use the JetStyleManager plugin to make style adjustments to this block in the Block Editor.
When the template is ready, press the “Save” button to save the changes made on the single page.
Now you can check the result; open any desired post of the post type you worked with.
The review section is now shown on the page, and when the “Write a review” button is pressed, you can observe and fill out the corresponding review fields.
Once the reviews are left, they will be displayed accordingly to the design set in the Block Editor.
This is it; now you know how to attach reviews to WordPress posts, both default and custom ones, with the help of the JetReviews plugin.
