Making use of the Comments fieldtype

1. Make sure that Comments fieldtype (FieldtypeComments) is installed from the Admin > Modules menu.

2. Now go to Admin > Setup > Fields and create a new field. Select "Comments" as the fieldtype and give it whatever name you wish (I usually call it just "comments", and code snippets here assume it's called that).

3. On the next screen, you'll have several options to configure the comments field. Make sure that you enter a Notification email. This is the email address that gets notified when new comments are submitted. Currently it is the only way you will know when new comments are posted (short of checking the admin page yourself), so using this is important.

4. Now edit the template where you want your comments to appear. Enter this:

<?php echo $page->comments->render(); 

5. Likewise, in your template, enter this where you want the comments entry form to appear:

<?php echo $page->comments->renderForm(); 

6. Your comments are now ready to use. Note that any templates that use comments for posting should not use Template caching unless you configure the comments to post to another template/page. You'll see an option for this in the renderForm() options shown further down on this post.

Adding the Akismet Spam Filter

I highly recommend that you use the Akismet spam filter with your comments. To do so, you'll need an Akismet API key.

Once you have it, click to Admin > Modules > Akismet (CommentFilterAkismet). Enter your API key in the space provided and Save. Then go to Setup > Fields > and edit the comments field you added. Check the box for "Use Akismet". You'll also see a field that says how many days it will keep spam before deleting it. I usually set this at 1 or 2 days, just in case Akismet identifies something as spam that isn't (though it's yet to happen!). Hit Save, and your comments are now hooked into Akismet. 

OPTIONAL: Customizing the Comments Output

You may want to change some of the basics of the comments output. You can do this by passing arguments to the functions you called above to render the comments list and comments form. Included below are examples with all options. You may specify any one or more of the options -- only specify the ones you want to change:

<?php
// comments list with all options specified (these are the defaults)
echo $page->comments->render(array(
    'headline' => '<h3>Comments</h3>',
    'commentHeader' => 'Posted by {cite} on {created}',
    'dateFormat' => 'm/d/y g:ia',
    'encoding' => 'UTF-8',
    'admin' => false, // shows unapproved comments if true
    ));

// comments form with all options specified (these are the defaults)
echo $page->comments->renderForm(array(
    'headline' => "<h3>Post Comment</h3>",
    'successMessage' => "<p class='success'>Thank you, your submission has been saved.</p>",
    'errorMessage' => "<p class='error'>Your submission was not saved due to one or more errors. Please check that you have completed all fields before submitting again.</p>",
    'processInput' => true,
    'encoding' => 'UTF-8',
    'attrs' => array(
        'id' => 'CommentForm',
        'action' => './',
        'method' => 'post',
        'class' => '',
        'rows' => 5,
        'cols' => 50,
        ),
    'labels' => array(
        'cite' => 'Your Name',
        'email' => 'Your E-Mail',
        'text' => 'Comments',
        'submit' => 'Submit',
    ),
    // the name of a field that must be set (and have any non-blank value), typically set in Javascript to keep out spammers
    // to use it, YOU must set this with a <input hidden> field from your own javascript, somewhere in the form
    'requireSecurityField' => '', // not used by default
    )); 

Lets say that you just wanted to change the headlines for the comments list and comments form. You'd do this:

<?php
echo $page->comments->render(array(
    'headline' => '<h2>Read Comments</h2>',
    ));
echo $page->comments->renderForm(array(
    'headline' => '<h2>Join The Discussion</h2>',
    ));

OPTIONAL: Generating your own output

If you wanted to generate your own output (rather than use the built in render() methods), you can iterate the $page->comments field:

<?php
foreach($page->comments as $comment) {
    if($comment->status < 1) continue; // skip unapproved or spam comments
    $cite = htmlentities($comment->cite); // make sure output is entity encoded
    $text = htmlentities($comment->text);
    $date = date('m/d/y g:ia', $comment->created); // format the date
    echo "<p><strong>Posted by $cite on $date</strong><br />$text</p>";
}

You can likewise do the same for the comment form. But I don't want to get too far into this level yet since this is supposed to be a quick guide.

Styling the Comments

Below is a starting point for styling the comments. It's just pulled from the comments styling at processwire.com, so it should be seen as an optional starting point rather than as a ready-to-go stylesheet. Or, you may prefer to start from scratch on styling the comments, depending on your need.

.CommentList {
        margin: 1em 0 0 0;
}
    .CommentListItem {
            list-style: none;
            margin: 0;
            border-left: 5px solid #ddd;
            border-top: 1px dotted #ccc;
            padding: 1em 0 1px 1em;
            background: #fff;
   
    }
        .CommentListItem p {
                margin-top: 0;
        }
        .CommentHeader,
        #CommentForm label {
                margin: 0;
                font-weight: bold;
                font-size: 11px;
                text-transform: uppercase;
                color: #3786bc;
        }
        .CommentText {
                color: #666;
        }
#CommentForm {
}
    #CommentForm h2 {
            margin-bottom: 0;
            border: none;
    }
    #CommentForm label {
            display: block;
            color: #999;
    }
    #CommentForm p {
            margin: 0.5em 0;
    }
    #CommentForm .error {
            background: #a30000;
            color: #fff;
            padding: 0.25em 0.5em;
    }
    #CommentForm .success {
            font-weight: bold;
    }
    .CommentForm_cite,
    .CommentForm_email {
            float: left;
    }
        .CommentForm_cite input,
        .CommentForm_email input {
                width: 200px;
                margin-right: 1em;
        }
    .CommentForm_text {
            clear: both;
    }
        .CommentForm_text textarea {
                padding: 2px;
                width: 75%;
                height: 100px;
        }

Comments

  • Micha Okkerman

    Micha Okkerman 5 years ago 1310

    I was wondering, maybe you could add a function to approve comments directly from the email via an unique hash or something?

    This would be great, since a lot of people access their email on their phones and you'd like comments to appear as soon as possible.

    I'm still discovering about PW, else I'd have forked and pushed the functionality myself.

    • PawelGIX

      PawelGIX 2 years ago 31

      I wonder. We can nest comments?

  • adrianbj

    adrianbj 5 years ago 199

    Just wanted to point out a missing step in the instructions above. After you have created the new comments field, you need to add that to the necessary templates. This needs to be done somewhere between step 3 and step 6.

  • Marco

    Marco 2 years ago 31

    This module is great, but I found a strange behaviour about chronological order...have you noticed it? Check this post for details...https://processwire.com/talk/topic/696-quick-guide-to-the-comments-system/?p=112333

  • Zahari M

    Zahari M 10 months ago 52

    Just a quick note to some folks using the example code above that wish to customize their sites individual comments. If you use it as above you wont see the stars or votes...

    Referring to this snippet:
    echo $page->comments->render(array(
    'headline' => 'Comments',
    'commentHeader' => 'Posted by {cite} on {created}',
    .....

    You need to add {stars} and {votes} to get these features to show up on the front end of the site! So conceptually you need to put something like this in this array instead...

    'commentHeader' => 'Posted by {cite} on {created}{stars}{votes}',

    And if the text for email notifications is a bit too close to the radio buttons, then the following css should help...

    input[type="radio"] {margin-right:4px}

  • MilenKo

    MilenKo 6 months ago 11

    Hello. I am working on a project and am at a stage of adding the comments functionality. Thanks to the ability to generate the own script provided above, I was able to implement my comment appearance 1x1. Now I am trying to have he comments form done the same way but could not find any way to include my own form etc. Would there be an easy way (similar to comments output) to style the form too?

    I know I can use the same styles and apply them to my out of the box form, but it would make our life much easier if we can just add our custom forms and add the hooks etc. This way a comment form can be even generated by a PW Form builder module or else.

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.