Medium Style Commenting Plugins For WordPress Highlight Difficulty In Theme Compatibility

The other day, I came across a brand new WordPress plugin in beta by Richard Tape called WP Side Comments. Based on Eric Anderson’s SideComments.js to enable inline commenting, WP Side Comments adds Medium.com style inline commenting to WordPress. With this plugin installed, each paragraph can be commented on instead of all the comments being at the bottom of the page. This helps focus the conversation on specific points within the article.

Medium Style Commenting
Medium Style Commenting

WP Side Comments By Richard Tape

When you leave a comment next to a paragraph, the comment is also displayed at the bottom of the post. Unfortunately, the only way to connect the two is through the comment URL. I tested WP Side Comments using a child theme of Stargazer with Firefox 30 and the results are not pretty. When adding a side comment, the content shifts to the left. Depending on the theme this can either look good or bad. In my case, it looked bad.

Adding A Side Comment In A Child Theme of Stargazer
Adding A Side Comment In A Child Theme of Stargazer

After adding a few test comments, I noticed that you can’t see them when you click on the bubble. The content shifts to the left but the comments are hidden from view. After switching to the Ravel theme, I was able to see all of the side comments when clicking the bubble. The comment bubble is only visible if a comment has been made or if the cursor hovers over a paragraph. I’d like to see the bubbles display at all times so there is no need for an animation effect. It also signals to the reader that side comments are enabled.

WP Side Comments recently introduced a default theme in order to style the various elements that make up the plugin’s output. It looks ok with themes using a light background color but looks terrible with the Ravel theme, which uses a dark color for the background. The style elements can be easily overwritten in a child theme but I wonder if it would be better to make changes via an options panel.

With the ability to comment on each paragraph, readers can have one on one conversations with the post author. However, comments are a form of conversation and therefore, a comment reply link should be visible not only for the author, but for other readers as well. At this point, there is no reply link at all. You can only create new comments.

I'd Like To See A Reply Button For Everyone
I’d Like To See A Reply Button For Everyone

One thing worth noting is that comments are not lost when WP Side Comments is disabled since they show up at the bottom of the post. You’ll just lose the visual cues of which paragraph the comment is attached too. However, when you reactivate the plugin, it re-establishes the relationships between comments and paragraphs.

WP Side Comments is in its infancy and many of the things I outlined may be in the pipeline for features down the road or are known issues. If you’d like to get involved with improving this plugin, you can view it on Github where you can create issues and pull requests.

Inline Comments By Kevin Weber

Motivated by WP Side Comments, I searched the WordPress Plugin directory to see what other plugins provide similar functionality. That’s when I discovered Inline Comments by Kevin Weber. Unlike WP Side Comments, Inline Comments has a settings page. You can configure the style of the comment bubble, whether or not to use the WordPress native comment system, add specific selectors, and more.

Inline Comments Settings Page
Inline Comments Settings Page

I prefer the comment bubble style of inline comments versus WP Side Comments. The comment form is native to the theme which aids in compatibility. The comment form can be configured to show up to the left or right of the content. In the screenshot below, it shows up to the right. Because the side comment form area doesn’t have a border, it blends in with the sidebar making it hard to differentiate content. Each comment has a permalink indicator but just like WP Side Comments, there is no way to reply to specific comments.

Inline Comments Show Up To The Right Of The Content
Inline Comments Show Up To The Right Of The Content

The ability to specify which selectors the bubble appears next to is important. By default, they appear next to every text element on the page. You’ll need to check with your theme but using a child theme of Stargazer, I configured .entry-content p to be the only element to have side comments.

The user experience is not ideal. When publishing a comment next to a paragraph, the entire page is reloaded and you’re taken to your comment at the bottom of the page. The experience would be better if the comment was published in place without a page reload. As for responsive layouts, the bubbles disappear once the page shrinks to a certain size. I’m fine with this behaviour since all of the comments are viewable in the native commenting area anyways.

I don’t like the animation used for the bubbles and there are no options to display the bubble at all times, even if no comments exist for the paragraph. By displaying the bubbles all the time, there wouldn’t be a need for an animation.

Using Ravel as an example, Inline Comments doesn’t look great out of the box. The side comment area is too small and the comment reply text is black. There are other color issues as well.

Inline Comments On Ravel
What Inline Comments Looks Like With The Ravel Theme

Theme Compatibility Is Hard

When we interviewed Matt Mullenweg in episode 130 of WordPress Weekly, we briefly talked about the difficulty in adding user facing features to comments in WordPress. The last major improvement to comments was the addition of threaded comments in WordPress 2.7 ‘Coltrane’. He explained, “It’s very difficult to iterate comments as it’s hard to get those changes to be compatible with every WordPress theme in the world.

Theme Compatibility With WordPress Comment Plugins Featured Image
photo credit: NecroRogIconcc

Most of the plugins I found that offer Medium style comments are just simple connectors to services. Inline Comments and WP Side Comments are among the few that keep functionality within the plugin. Using services to accomplish this task eliminates most of the problems associated with doing everything within WordPress.

Services can use an iframe or style things outside of WordPress in order to have an interface that makes sense. Being independent of the theme gives it increased compatibility. Compatibility lowers the risk of things breaking when new features are added. The benefits go on and on but I don’t like the idea of letting a service handle my WordPress comments so I purposely left them out of this review.

The Relationship Between Comments and Themes

It would be great if a plugin could add Medium style comments while looking great with any theme but that appears to be a pipe dream. I’m a fan of seeing features in themes being turned into plugins but in this case, the developer of the AESOP Story Engine Nick Haskins, may be right.

https://twitter.com/nphaskins/status/484100431157542912

Comments are content and thus, are part of the presentation elements provided by a theme. Despite Inline Comments and WP Side Comments offering ways to style and override elements, at that point, it seems like it makes more sense to bake the features of those plugins into the theme. This way, compatibility is taken out of the equation and it becomes a unique selling point.

For Now, There’s No Easy Way To Have Medium Style Commenting Through A Plugin

Both plugins have their pros and cons but neither deliver a great out of the box experience. Each require style changes to match the theme they are used with. In summary, here’s what I’d like to see as enhancements or features for a new or existing Medium style commenting plugin.

  • Constant display of the comment bubbles for just content paragraphs by default
  • No fancy animations
  • Real time commenting instead of forcing a page load
  • The ability for authors and readers to reply to inline comments
  • Have replies to each others comments show up as threaded comments in the native comment area
  • Better theme compatibility
  • A better user interface for publishing and reading inline comments

What tips or suggestions do you have to maximize a plugin’s compatibility with themes, especially as it relates to comments? Do you know of any free WordPress themes that have Medium style commenting as a feature? Let us know in the comments.

31

31 responses to “Medium Style Commenting Plugins For WordPress Highlight Difficulty In Theme Compatibility”

  1. Thanks so much for the write-up, Jeff. You’re absolutely right, pretty much all of the issues you’ve mentioned are being actively worked on. The good news is, some of the work I’m doing will be able to go upstream to the javascript library itself.

    We have a cool internal project at UBC for which we’re developing WP-Side-Comments which means it’s going to be actively developed. Whilst I take many of your points re: options/settings, I’m going to try and stick to the mantra of “decisions, not options” as much as possible. Especially early on in development.

    The issue of theme compatibility is…tricky. I have a couple of thoughts about how best to approach this at the moment. Standard Theme Hooks is the nirvana, but for the time being, I think there’s something that we – as plugin developers – can do to make it as seamless as possible for the end user.

    Again, thanks so much.

    • I don’t mind decisions over options, as long as the decisions are ones I would have made lol. At any rate, be sure to leave some filters or hooks to extend or modify the behaviour of the plugin, just in case we want to move the bubble to the other side of the content, etc.

  2. While I can see some benefit in having comments on particular paragraphs, I wonder if this wouldn’t discourage users from engaging with the whole article before chiming in with their two cents? Of course, they can do this already, but I’d be curious to see how comments like this would affect user behavior on a news site for example. Any thoughts there?

    • From sites I’ve read, it seems like that happens anyways. Even here at the Tavern, someone will read a little bit of the post and then leave a comment asking why this or that wasn’t mentioned to which I point out that I did further down into the article.

      I too would like to see how this system would work on a very popular news site. I think it would make it easier to see which points or subjects within the post cause the most discussion.

  3. Hey everyone, created of the SideComments.js component here. Just wanted to chime in a bit about how certain parts might integrate.

    Generally the big issue is theme integration. Making sure the comments are visible when they need to be, etc. For example if they slide over but the background is dark, the text becomes illegible.

    However, this is all relatively easily solved with theming of SideComments, which in turn, can be packaged with different WP themes.

    I’m trying to make SideComments as flexible as possible, so the idea is that with very simple changes to the theme CSS, the comment markers can be positioned in different areas and the comments themselves can even slide into view differently, etc.

    While I want to keep the plugin agnostic to any one platform, the WP community is huge and I want to do all I can to support making this interface component super easy to integrate with. So be sure to open issues or get at me on Twitter for any changes that make things easier.

    Thanks for the awesome article!!! Keep up the great work.

    • It looks like Richard is already on the ball as he recently added a theme to his integration of SideComments. There shouldn’t be that many items that need to be changed for theme compatibility. I’m thinking the color of the bubble, text inside, the hover color, and then make the comment form inherit the same styles as the theme being used. Although I suppose that could be styled as well with each changes.

      Thanks for putting Sidecomments out there for others to learn and play with. At least one person is using it as their base :)

  4. Interesting article, Jeff, thanks for sharing.

    Six years ago, when CommentPress was being revamped, we went a fair way down the road of attempting multi-theme compatibility for marginal commentary. We decided against it in the end, because of the difficulty in determining a theme’s structure and layout. As you say, it really is difficult. We also made a deliberate decision that commentary and text should be easily readable together, which is why CommentPress has a couple of bundled parent themes where comments are shown side-by-side with the text.

    In my view, the major roadblock to a multi-theme approach is that it requires Javascript-based DOM manipulation. Digress.it, which forked from CommentPress back then, took the JS-led approach. CommentPress, on the other hand, works with Javascript disabled and is thus fully accessible out-of-the-box and functional on screen readers, whose Javascript capabilities are often limited or non-existent.

    There a other, more subtle complexities that the JS approach may struggle with. Consider the comment permalink, for example: I can see no way to share a link to a comment on:
    http://www.strategio.fr/projet/wp-side-comments/
    In CommentPress, comment permalinks just work. Here’s a link to a comment on a page:
    http://futureofthebook.org/commentpress/#comment-77711
    And here’s one to a comment on a multi-page post created with the quicktag:
    http://futureofthebook.org/commentpress/a-multipage-post/2/#comment-88062

    Another problematic example: what happens when you print your page? In CommentPress, although the comments are no longer marginal, they are listed by paragraph below the text. Try print-previewing any page on the CommentPress site to see this.

    In addition, a Javascript-based approach not only make theme compatibility difficult, it makes plugin compatibility equally difficult. The CommentPress approach makes it compatible with BuddyPress activity streams, enabling more architectural integration with WordPress to achieve social peer-review systems and class-based commenting such as:
    http://commons.digitalthoreau.org/walden/

    In the end, I agree wholeheartedly with Nick Haskins when he says “There comes a point where just has to be in a theme, or in an ecosystem around said plugin.” This is exactly the CommentPress approach.

    • @Christian I think the scope of SideComments.js is to mock the medium.com inline comment features and I think this module is not too far from it. But surely this plugin doesn’t fit every kind of site depending on its thematic.

      But you can check that we can put links in comments just like in the basic WordPress comment form (check the 3rd paragraph).

      • Hey Pierre, I didn’t intend to be critical – I’m happy there are people exploring this issue – I was hopefully adding to the conversation with examples that support Jeff’s basic contention that integration of marginal commentary into a theme is by no means a trivial task, even if you control the theme.

        By “comment permalinks” I meant URLs that you can share to point me to a specific comment on your demo.

  5. Interesting or possibly ironic as a side note to this discussion of side notes is the fact that this blog/site has apparently shifted to wordpress.com commenting after abandoning its own elaborate commenting system combining several plug-ins. I know this because a “related posts” link above shows me to the 2011 (ancient?) thread describing WPTavern’s former commenting system (which displays quite poorly now).

    Perhaps more directly relevant: the system used by Project Syndicate might be an interesting reference point. https://www.project-syndicate.org/commentary/j–bradford-delong-argues-that-the-us-will-face-a-dangerous-world-unless-the-federal-reserve-fulfills-its-global-role I don’t see a credit for it anywhere, so I’ll presume it’s their own, not some 3rd party system. I like it better than Medium’s, though it is in some ways similar.

    Maybe it would be easier simply to add whatever JS bells-whistles regarding direct annotations on top of WP native commenting system. Could even be implemented via CSS w/o JS, or with JS only for aesthetics. In short, I wonder why it doesn’t work as well to have 3 main choices for blogger: below-only, side-only, both-below-and-side, and then a user-option to show “annotations/in-line only,” “general comments only,” or “both annotations and general comments” in whichever location.

    • You’re right, this site did switch to the comment system in Jetpack but I don’t think it compares to what I originally had setup, as described in the post you’re talking about. I miss the old comment system. By the way, thanks for saying the post is broken, I’ve since updated and fixed it.

      I want to see how the release of bbPress 2.6 which will have the ability to replace the WordPress comment system with bbPress replies plays into the idea of side comments or just comments in general.

  6. I finally got around to testing this plugin (WP Side Comments), and decided to build in support into some of our themes. It’s a great little plugin. I created a support topic on this, but it seems the user has to be logged in to even comment. Not sure what’s up with that.

  7. Hi Jeff,

    Inline Comments (v1.1) now publishes comments in place without a page reload. You simply install the newest version of “WP-Ajaxify-Comments” and activate Ajax in the options panel of Inline Comments.
    You would be amazing if you add this information to your article and inform your readers of this fixed issue.

    Best regards,

    Kevin

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.