How to add Comments to your Single Post template?

Amongst many other useful features, WordPress is known to be a powerful blog system. If you decide to include a blog section in your theme, you will probably want to add comments as well in order to allow your visitors to participate in discussion. This tutorial will show you how to use Pinegrow to add standard WordPress comments to your theme.


The comments.php template is almost mandatory in every WordPress theme since version 3.0.

If you don’t provide an alternative and if you have activated the debug mode in your wp-config.php file, you will see the following message:

Notice: Theme without comments.php is deprecated since version 3.0 with no alternative available. Please include a comments.php template in your theme.”

In Pinegrow WP, there are 3 main WordPress actions related to comments:

3_comments_actions

Prerequisites

For the following instructions, we assume that you have already started developing your theme and that you want to add comments to your single.php template (single.html in Pinegrow. This is the template used when a single post is queried.)

Because you will need some sample content for your tests, we also assume that you have previously created a few posts and added a few comments to these posts.

You can add comments to a post from the WordPress admin or just play with your site using a default theme like twentyfifteen.

Create the Comments partial template

The first step is to prepare a basic structure to setup the comments location.

  • Create a section for your comments, a simple DIV is fine.
  • From the WordPress tab, in Templates parts, set the Define template part WordPress action to the DIV and in the Slug setting, put “comments“.

define_template_part

During the theme export, this process will create comments.php file for your theme which will include the content of the DIV.

When Define template part action is used, the targeted section is visible in your work file in Pinegrow, but is not included in the corresponding exported template but in an external template file instead. So, if you want to output the template in your current document, you’ll have to call it with the Include template part action or, in our situation, with the Comments template action as we will see later in this post.

Inside the DIV:

  • Add a H3 and set the Comments title WordPress action (Replace content)
  • Add a DIV and set the List comments WordPress action (Replace content)
  • Add a last DIV and set the Comment form WordPress action (Replace content)

inside_comments_DIV

Output your Comments template in your Posts

As mentioned previously, to show comments.php template on your WordPress site, you have to include it into your single post template.

Create another DIV and from the WPComments section, set the Comments template action. (No need to enter the file name as comments.php is the default.)

Save your document and export the Theme.

Now, you can preview the result on your WordPress site by loading the corresponding post and checking the display.

comments_browser_preview

Of course, without any styling the output is far from perfect

Dev-Tip: You can configure your comments section behaviour from the WordPress admin. Go to Settings > Discussion and from here, you will be able to define parameters like the notifications, pagination settings, threaded comments (nesting) and many more other options.

Be sure to consider all the options as each one will have an impact on what you need to include in your comments partial tempate.

Import WordPress HTML in your template

Pinegrow offers a way to import WordPress HTML and in the present situation, this is a very handy feature which will allow you to easily customize the WordPress default styles.

But first, you must set the preview page of your current single.html template to an existing post with comments from your WordPress.

From the tree, select the Body element and from the WP tab, in WordPress site settings, set the preview page url to an existing post with comments. For example http://localhost/yoursitename/first-post/

Save your document and export the Theme.

Now, select the DIV with the Comments template action and from the Actions menu, use Import WordPress HTML.

template_HTML_import

The content from the post on your WordPress is automatically imported.

Your comments section is now fully visible in Pinegrow. Take note that you can now HIDE the DIV with the Define template part while your edit your document by clicking on the small eye icon (see the screenshot below).

comments_visible_in_pinegrow

If you navigate through the preview elements and check the PROP tab, you’ll see that you also have a view of the corresponding WordPress default styles. It is very useful to customize your comments styles.

comments_styles

Your comment section is now ready to be styled and customized according to your needs.

Go further?

It is not mandatory to have both the Define template part and the Comments template action on the same document.

You can also decide to create a specific document for your Comments template content and keep the Comments template action in the single.html document.