DEV Community

Lana Miro
Lana Miro

Posted on • Originally published at lanamiro.Medium on

Creating Commenting System with Elementor and JetReviews plugin

Have you wondered how to add a comments section to your Elementor website? In this article, I’ll follow the recent tutorial about creating a commenting system with Elementor and JetReviews plugins.

JetReviews is the premium review and commenting plugin from the Crocoblock team.

The plugins we need for the tutorial:

JetReviews plugin

➡Elementor free version

Crocoblock Subscription (or Elementor PRO) for Theme Builder

Before starting, I’ve made a Crocoblock subscription installation with the Crocoblock wizard, and we can proceed with creating a comments section in Elementor.

crocoblock wizard installation

Creating Elementor Commenting Section Guide

Steps:

#1 Set up reviews post source

#2 Add Review Type

#3 Assign review type

#4 Create and design Single Post Page template

#5 Edit comments section

#6 Final results

#7 Comments dashboard

#1 Set up reviews post source

Go to JetReviews -> Settings -> Post Source, and toggle in Use review for post type:

Set up reviews post source

I’ve also set comment approval for everyone, to avoid spamming.

Settings are saved automatically.

#2 Add Review Type

Then, we need to create a review type for our comment section. For this, go to JetReviews -> Review Types -> Add New

Add wordpress Review Type

I’ll name it “Comments for Posts” to differ from the default WordPress commenting system.

Then, I’ll add a new field, “Rate the article”, to let the user rate the article and press Add Type.

edit review type

And we are done with creating review type (we don’t need to come to this section unless we want to edit something):

review types dashboard

#3 Assign review type

Now we need to return to JetReviews Settings to assign the newly created review type:

Assign review type

#4 Create and design Single Post Page template

We need to set the Single Post Page template only once for making a template of all my posts.

You can use Elementor Pro for creating Single Post Page templates or use Theme Builder included in Crocoblock Subscription.

In this tutorial, I’m using a Crocoblock subscription.

To create a Single Post Page template, go to the Crocoblock tab, choose Theme Builder, and press Add New button:

create single page template

Then, select page type and name it appropriately (I’ve called my template “My Comments” just for example, but primarily it’s the template for our blog posts):

select template type

After this, we are automatically redirecting to the Elementor page builder for creating our Single Post Page template. I want to keep my blog page simple, so I’ve added:

  • Title using Dynamic Field widget by JetEngine:

dynamic field widget

  • Content using Dynamic Field widget too:

add content via dynamic field widget

  • Comments by adding Reviews Listing widget:

adding reviews listing to the template

Then we need to

Now, we are ready to publish our single post page template.

#5 Edit comments section

Go to your website, and leave a test review, to be able to edit the comments section.

👉 Note: Primarily, review is the first comment your visitor leaves, and comments are the replies to the review. But I want to change review naming to comments and comments to replies :)

It’s doable in the reviews listing -> content -> labels.

I also want to change the Rating Layout from stars to points (as I think it’s more appropriate for the article comments).

customize wordpress comments section

And make some styling (change color, font, buttons, etc.):

edit comments styling

#6 Final results

That’s it; we now have a commenting system in our blog posts:

wordpress comment system example

And here is how Write a comment section looks from frontend:

Write a comment section wordpress

Moreover, what I like about JetReviews it’s the ability to allow your user to rate the comment (like/dislike):

#7 Comments dashboard

After creating a review section with JetReviews, we can check all article reviews/comments in the dashboard:

  • JetReviews page shows reviews visually:

jetreviews dashboard

  • Review list tab: to approve/edit/delete reviews:

review list dashboard approve comments

  • Comments show all comments to your reviews

JetReviews Comments list

Sum Up

This quick and simple tutorial is only the start of creating your commenting system in WordPress, and possibilities are unlimited in styling and customization of your comments section.😊

💪Here are valuable resources used to create a commenting system with Elementor and JetPlugins:

Discussion (0)