Configure WP Discourse to display comments from Discourse

You can use Discourse as a comments system for Wordpress. The Commenting features are dependent on the publishing features, so you need publishing to be set up for commenting to work. If you’ve set up publishing and are ready to set up commenting, watch this short video, or follow the instructions below.

Next Step

Once you’ve set up commenting, you may want to check out the following topics


Instructions

Setting up Commenting

To have Discourse comments show up on your WordPress site, you must select the Enable Discourse Comments setting. When enabled, you will see two options. The Display comments option will load a Comment template for each WordPress post that has been published to Discourse. This template will display Discourse comments beneath the WordPress posts. The Display a link to the comments option will load a comments template that displays a link to the associated Discourse topic underneath the published posts. The number of replies to the topic will be displayed in the link, but no replies will be displayed on WordPress.

Both of these commenting options work by loading comment templates for the WordPress posts. This means that they will only work if comments are enabled for the post. If you would like to enable comments for all posts, but not have any historical WordPress comments be displayed for posts that have not been published to Discourse, enable the Remove WordPress Comments Template setting.

Settings

Here are some short descriptions on what the other commenting settings do. If you’re still unsure about any of the settings reply to this topic and ask for further clarification.

Load Comments With Ajax

This setting is used to load comments from the Wordpress client, instead of loading them from the server. This is useful if page caching is preventing fresh comments from being loaded on your site.

Load Comment CSS

This setting loads a stylesheet that fixes issues with Discourse oneboxes and quotes when they are displayed on WordPress.

Show Existing WP Comments

Select this setting to also show existing WordPress comments for posts that have also been published to Discourse, select the setting.

Existing Comments Heading

If you are showing existing comments, this setting will add a heading above the WordPress comments.

Selective Import Settings

There are a number of settings which allow you to selectively import comments. These should be self-explanatory. The default values for each of these are a good place to start, so only change these if you have a reason to

  • Max Visible Comments
  • Min Number of Replies
  • Min Score of Posts
  • Min Trust Level
  • Bypass Trust Level Score
  • Only Import Moderator-Liked
Custom Datetime Format

This setting formats the date that is displayed for each Discourse comment that appears on your WordPress site. Start with the default value. If you find you want to change the date format, click on the link in the setting’s description for details on how to do that.

Cache Comment HTML

This setting can be used to improve performance. Caching the Comment HTML reduces the number of requests made to Discourse. It’s associated setting Clear Cached Comment HTML should be self explanatory.

Verbose Comment Logs

Enabling this will log all successful retrievals of comments from Discourse, in addition to errors (the default).

Sync Comment Data Webhook

Enabling the Sync Comment Data wehbook in the “Webhooks” setting panel can greatly reduce the number of API requests made from WordPress to Discourse. Before enabling the webhook

  1. visit the Discourse URL provided in the setting’s description (http://forum.example.com/admin/api/web_hooks.)

  2. Click the ‘New Webhook’ button and fill out the form

    • In the Payload URL field, enter the URL that is provided in the description of the WP Discourse Sync Comment Data field. It will be something like this, except using your WordPress site’s URL: https://wp-discourse.dev/wp-json/wp-discourse/v1/update-topic-content.

    • Make sure the Content Type field is set to application/json.

    • In the Secret input, enter a string of text, at least 12 characters long. Then copy this same key into the WP Discourse Webhook Secret Key setting…

    • In the ‘Which events should trigger this webhook?’ box, make sure that ‘Post Event’ is selected.

    • Use the Triggered Categories field if you only publish posts from WordPress to specific categories. That way, your WordPress site will not need to process webhook requests for topics that don’t have an associated Discourse post.

    • Leave the Check TLS certificate of payload url setting enabled.

    Finally, enable the ‘Active’ checkbox, and click create. When the webhook has saved, click the Go to events button.

  3. Back on WordPress, make sure that you have entered the webhook secret from Discourse into the Webhook Secret Key field and enable the Sync Comment Data webhook setting. Then save the options.

The Discourse webhook should now be working. You should check it by clicking the webhook’s Ping button on Discourse (found at /admin/api/web_hooks/:webhook_id/events.) Make sure that pinging the webhook is returning a status code of 200.

Adjusting the comments_number sync period for WordPress archive pages

To get the correct number of Discourse comments for a post, the plugin needs to periodically make an HTTP request to Discourse to get the current comments number. On single pages this period is set to be no more often than every 10 minutes. For archive pages the period is set to no more than once every 24 hours. The reason for this is to avoid making multiple request to Discourse every time an archive page is accessed.

If you still find that the plugin is making too many request to Discourse when displaying your site’s archive pages, you can adjust the archive_page_sync_period by hooking into the 'discourse_archive_page_sync_period' filter. You do that by adding something like this to your theme’s functions.php file:

add_filter( 'discourse_archive_page_sync_period', 'my_namespace_archive_page_sync_period' );
function my_namespace_archive_page_sync_period( $sync_period ) {
  // This will change to sync_period for archived posts to once a week.
  return WEEK_IN_SECONDS;
}

If you find that the plugin is not making enough requests to Discourse to retrieve the current comment numbers for archive pages, you can add something like this to your theme’s functions.php file. This will set the archive_page_sync_period to 10 minutes.
Note: on a busy site this could place a heavy load on your server.

add_filter( 'discourse_archive_page_sync_period', 'my_namespace_archive_page_sync_period' );
function my_namespace_archive_page_sync_period( $sync_period ) {
  // This will change to sync_period for archived posts to once a week.
  return 10 * MINUTE_IN_SECONDS;
}

Display comments without loading the WordPress comments template

The WP Discourse plugin uses the WordPress comments template to load Discourse comments. If your theme is not loading the comments template, you can display comments with the static get_discourse_comments helper function. That function requires you to supply the id of the WordPress post that you want to display comments for. Here’s a simple example of its use:

use WPDiscourse\Utilities\Utilities as DiscourseUtilities;
$discourse_comments = DiscourseUtilities::get_discourse_comments(859);
echo $discourse_comments;

Comments will be displayed in the same way as they are displayed if you select the
Enable Discourse Comments/Display Comments option (found on the plugin’s Comment Settings tab.) When this function is used, the value of that setting is ignored, but all other Comment settings are respected.

Troubleshooting

The most common issue with Discourse comments is that they may not show up instantly after the post is made on Discourse. This delay is intentional as the plugin tries to reduce the number of requests it needs to make to Discourse. Making a request every time the page is loaded will slow down your site. If you’re not seeing comments appear instantly wait 10 minutes before refreshing the page again.

Issues with the comment number when displaying both Discourse and WordPress comments

The wp-discourse plugin uses the WordPress get_comments_number filter hook so that the number of Discourse comments that have been created for a post can be displayed throughout your theme. This creates a conflict when both Discourse and WordPress comments are being displayed for a post. The plugin is able to resolve that conflict in most places. One place where it can’t be resolved is in the comment title that WordPress themes often display at the head of the comment section. This is the section that begins with something like “2 thoughts on…”

The easiest way to do this is to add a rule to your theme’s css file.

.discourse-comments-area ~ .comments-area .comments-title  {
	display: none;
}
7 Likes

@angus very nice guide and video, thanks for putting it together. We have implemented the plugin, and are stuck on the commenting functionality. There are two questions/issues we have here:

  • When we post the a reply on discourse (to the shared post from wordpress) we see the reply count change on wordpress, but we don’t see any comment show up…
  • We would like to turn off the wordpress commenting so that users can only reply via discourse, is that possible?

Here is what we see, not this ‘1’ reply is from discourse, and you will not the reply itself is not visible:

CC: @Abdelrahman_MoHamed

Hey @Jacob_Peebles,

Assuming you’ve followed the above guide, the next thing to check is your theme. Are you perhaps using a Block Theme? If so, please see:

Yup, just turn comments off in Wordpress.

  1. Select Settings > Discussion from the dashboard.
  2. Uncheck the box next to Allow people to post comments on new articles.
  3. Click Save Settings.
1 Like

@angus - great that worked like a charm! Yes, apparently we are on the ‘block’ editor. You can see things functioning here:

The only odd part is the styles/fonts’ don’t appear to cascade into the discourse comments. I’m not sure if that’s just an issue with our theme, or something worth noting.

Thanks again.

sorry, here you go a screenshot too.

Glad it’s working for you Jacob.

You’ll need to add your own comment styling. Discourse comments are intentionally very lightly styled out of the box as each theme has it’s own approach to styling. In your case, some basic styling like this should do the trick

ol.comment-list {
    list-style: none;
    padding: 0;
}

img.avatar.photo.avatar-default {
    height: 40px;
    width: 40px;
}

.comment-author.vcard {
   display: flex;
   align-items: center;
   gap: 1em;
}

1 Like

Excellent @angus