{"id":31722,"date":"2022-11-29T11:29:50","date_gmt":"2022-11-29T11:29:50","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=31722"},"modified":"2025-07-22T16:44:22","modified_gmt":"2025-07-22T16:44:22","slug":"creating-custom-commenting-system","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-custom-commenting-system\/","title":{"rendered":"How to Create Custom Commenting System"},"content":{"rendered":"\n
\"testing<\/a><\/div>\n\n\n\n

How to Create Comments<\/h2>\n\n\n\n

In this tutorial, we will focus on setting up the commenting system, which features a fully customizable comment layout provided by the CCTs<\/strong>. We will create a form for submitting the comments and ensure that only logged-in users can leave comments on the site.\u00a0<\/p>\n\n\n\n

\n
\n

Create a Custom Content Type to store comments<\/h3>\n\n\n\n

Navigate to the WordPress Dashboard > JetEngine > Custom Content Types <\/em><\/strong>and click the \u201cAdd New\u201d <\/strong>button to create a new Custom Content Type<\/strong><\/a> (CCT<\/strong>), which will store the list of comments.\u00a0<\/p>\n\n\n\n

\"creating<\/a><\/div>\n\n\n\n

CCTs <\/strong>are similar to CPTs<\/strong><\/a> <\/strong>but have two main differences. Firstly, Custom Content Type<\/strong> items do not have Single Pages<\/strong><\/a>. Secondly, they have a unique approach to data storage. It makes CCTs <\/strong>an ideal choice for storing comments because new comments will not affect the website’s loading speed.<\/p>\n\n\n\n

You will find more information on this topic in our article on Custom Content Type: Brand New Data Storage Approach<\/strong><\/a>.\u00a0<\/p>\n\n\n\n

In the same editing screen, scroll down to the Field <\/strong>tab. Add the necessary fields to store the comments\u2019 data. Add a Text<\/strong><\/a> field to keep the comment title and a WYSIWYG<\/strong><\/a> field to store the comment content.\u00a0<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

Save the CCT <\/strong>by pressing the \u201cAdd Content Type<\/strong>\u201d <\/strong>button once you are ready.<\/p>\n\n\n\n

Add a sample comment to the CCT<\/h3>\n\n\n\n

Find the CCT<\/strong> you created <\/strong>in the left sidebar and click on it. Click the \u201cAdd New<\/strong>\u201d button to create a new CCT Item<\/strong>.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

In the newly opened page, fill in the empty fields and click the \u201cAdd<\/strong>\u201d button once you are ready.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

Create a listing item template for the CCT<\/h3>\n\n\n\n

To design the comment layout, build a Listing Item template<\/strong><\/a>.\u00a0<\/p>\n\n\n\n

To create a new Listing Item template<\/strong>, head to WordPress Dashboard > JetEngine > Listings<\/em><\/strong>\/<\/em><\/strong>Components <\/em><\/strong>and click the \u201cAdd New Item<\/strong>\u201d button. <\/p>\n\n\n\n

Refer to our How to Create Custom Content Type Listing Template in Elementor<\/strong><\/a> tutorial to ensure you have the correct setup.\u00a0<\/p>\n\n\n\n

\"creating<\/a><\/div>\n\n\n\n

With the help of the Dynamic Field<\/strong><\/a> widgets or blocks, display the comment data. Choose \u201cPost\/Term\/User\/Object Data\u201d as the Source <\/strong>and select the needed field of the CCT <\/strong>from the Object Field <\/strong>dropdown.<\/p>\n\n\n\n

\"designing<\/a><\/div>\n\n\n\n

The setup will be the same regardless of whether you use the Gutenberg editor.<\/p>\n\n\n\n

\"designing<\/a><\/div>\n\n\n\n

Add information about the comment author<\/h3>\n\n\n\n

It is not enough to display only the title and the body of the comment, as information about the comment author should also be included. <\/p>\n\n\n\n

Drag and drop a new Dynamic Field<\/strong> widget or block to the editor to display user data. Choose \u201cPost\/Term\/User\/Object Data\u201d as the Source<\/strong>. After that, open the Object Field <\/strong>dropdown to see the available list of options for user data. For example, output the user’s \u201cNickname\u201d. Then select the needed user field, scroll down to the Context <\/strong>dropdown, and select \u201cCurrent CCT item author\u201d from the list. This way, the user information will be queried by the author of the current comment.\u00a0<\/p>\n\n\n\n

\"displaying<\/a><\/div>\n\n\n\n

The same workflow should be repeated if you are using the Gutenberg editor.<\/p>\n\n\n\n

\"displaying<\/a><\/div>\n\n\n\n

Display the profile picture of the comment author. For this purpose, use the Dynamic Image<\/strong><\/a> <\/strong>widget in the Elementor page builder or the Dynamic Image<\/strong><\/a> block in Gutenberg.\u00a0<\/p>\n\n\n\n

Note that you are not limited to the default user fields of WordPress. If you created a Meta Box<\/strong><\/a> for users to store additional user information, you can display it through the \u201cMeta Data\u201d Source<\/strong> of the Dynamic Field <\/strong>widget. If you don\u2019t have a user Meta Box<\/strong> yet, you can create one by following our guide on How to Apply Meta Boxes to Users<\/strong><\/a>.\u00a0<\/p>\n\n\n\n

After designing the Listing Item template, click \u201cUpdate<\/strong>\u201d to save the changes and return to the WordPress Dashboard. <\/p>\n\n\n\n

Create a relation between the CPT and the CCT<\/h3>\n\n\n\n

To link the new comments to the commented object, create a Relation<\/strong><\/a> between the Custom Post Type<\/strong> and the Custom Content Type<\/strong>. The relation will link a comment to the post under which the comment was left.\u00a0<\/p>\n\n\n\n

Go to WordPress Dashboard > JetEngine > Relations <\/em><\/strong>and press the \u201cAdd New<\/strong>\u201d <\/strong>button to create a relation. The Related Custom Content Type Items<\/strong><\/a> tutorial provides a comprehensive overview of the settings.<\/p>\n\n\n\n

\"creating<\/a><\/div>\n\n\n\n

In this case, define comments as the Child object<\/strong> and the CPT <\/strong>(the posts that will have this commenting system) as the Parent object<\/strong>. The Relation type <\/strong>should be set to \u201cOne to many\u201d because one post should have multiple comments. <\/p>\n\n\n\n

Click the \u201cAdd Relation<\/strong>\u201d <\/strong>button to save the changes. <\/p>\n\n\n\n