Slideout Your WordPress Comments Just Like The New York Times

Sitting comfortably in the top 50 visited US sites, The New York Times probably knows a thing or two about delivering a decent user experience to its millions of visitors.

Their handling of comments is one example. Removing them from the page flow and placing them in a slideout sidebar is certainly not conventional, but it works. Brilliantly. And solves plenty of comment-related issues.

So, let’s engage in the sincerest form of flattery and bring slideout, New York Times-style commenting to your WordPress site.

Screengrab of the slideout comments
Slideout comments are quick and easy to implement and solve plenty of issues

It makes a great deal of pragmatic sense to keep an eye on how major online destinations tackle the issues we all face and work out if and how they might benefit our own sites.

The traditional approach of sticking comments at the bottom of a post has always been a little unsatisfactory. In sufficient quantities, comments can often overwhelm the post, give false signals to new readers about the length of the content and can render any footer content virtually obsolete.

Sites like Medium have tried to solve these problems by adopting annotation-style inline commenting (an approach I’ve looked at previously): a neat solution but one that relies heavily on having the right theme. The New York Times, on the other hand, uses a simpler approach: placing the comments in a slideout sidebar.

This solution is far more tolerant of the underlying theme, achieves a good balance of decluttering the content but keeping the comments accessible and is, technically, much easier to implement. In fact, you might be surprised just how easy.

For those of you that are interested, there’s an explanation of how the solution works but first the 1-2-3 of how to implement slideout comments on your WordPress site.

Slideout Comments In A New York Minute

Adding New York Times style slideout comments to your theme takes just 3 simple steps.

  1. Install the plugin
  2. Adjust the settings
  3. Tweak the styling

Step 1 – Install The Plugin

Download the Slideout Comments zipped file from GitHub, upload into your WordPress site and activate the plugin.

Step 2 – Adjust The Settings (If Necessary)

This is really the only tricky bit and it’s really only tricky if your theme doesn’t follow the WordPress theme element naming conventions.

The default settings for the plugin means that it expects:

  • the comments block will be wrapped in an element with an id of comments (e.g. <div id=”comments”>)
  • an individual comment will be contained in an element with a class of comment (e.g. <li class=”comment”>)

The easiest way to see if your theme uses the conventional naming is simply to navigate to the site and see if the slideout is working.

Two screenshots of a post using the Isola theme with the sidebar open and closed
Slideout comments on the Isola theme, closed (left) and open (right).

Comments And / Or Comment Form Still Appearing Below The Post

If you are still seeing comments or the comment form under your post content then the chances are that your theme is using a different id for the comments block. To check, open your theme’s Comments template (comments.php – you can do this in WordPress via Appearance > Editor) and see what id or class is assigned to the first element.

For example, here’s the template for the Eighties theme:

Screengrab of the comments template for the Eighties theme in the WordPress theme editor
Non-Automattic themes can often wander from convention

As we can see the first element is a DIV with the class of discussion, so that’s what we need to use for Comments container identifier in the plugin’s settings page (Settings > Slideout Comments).

Don’t forget to add the ‘.’ for a class and the ‘#’ for an id!

Screengrab of the slideout comments plugin options
Themes that don’t follow convention need the class / id of the comments block specified

No Number In The Tab

The tab should display the current comment count for the post. It does this by counting how many elements on the page have the class of comment, so if this count is incorrect (most likely always 0) then this means that your theme is using a different class for a comment.

Now, the vast majority of themes will use the WordPress wp_list_comments function to generate the comment list, in which case the comment class will be assigned, so this is a highly unlikely situation. However, if it does arise, go back to the comments.php file and see how the template outputs an individual comment.

There Is No Comments Template

If you don’t find a comments.php file in your theme, then change themes. Okay, a bit drastic but it does mean that your theme is not really following WordPress standards.

Alternatively, the quickest way to work out the correct id or class will be to dive into the page source of a post, look for a comment and then work your way up the hierarchy until you find the comments container.

Update the settings and refresh your site. With a bit of luck you’ve now got a slither of a sidebar on the right-hand side of the viewport and tab near the top with the number of comments. Clicking on the tab should slide the comments in and out.

Step 3 – Tweak The Styling

Due to the myriad of possibilities, the plugin concentrates on the mechanics of the slideout, so when it comes to styling the contents of the comments sidebar you are on your own.

That said, there shouldn’t be the need for too much work as the comments will retain their original styling. It’s just that some styles may not be appropriate now that the comments have moved from the bottom of the page to a sidebar.

For example, with the Isola theme, the only change is to move the tab down to below the top navbar:

{code}

.comments-toggle {
top: 50px;
}

{/code}

The easiest way to test and even deliver your specific styles is via a custom CSS plugin such as Custom CSS (surprise). There’s also a module in Jetpack that does pretty much the same thing if you have that plugin already installed.

Tweak and test until you are happy with the look and then either leave the CSS plugin active to insert the styles into the page or create a child theme with your custom CSS in the styles.css. All you need to keep in mind is that with the plugin the CSS is inserted regardless of the theme you are using.

Do not add the CSS to the existing styles.css. Not only is it bad practise but you will lose the customizations when the theme is next updated.

How It Works – The Nitty Gritty

This solution has been designed to require minimal changes to work across as many themes as possible but focusses on the mechanics of moving the comments area from the bottom of the post page to a slideout sidebar.

The Plugin

The WordPress plugin performs 3 functions:

  1. Adds an options screen (Settings > Slideout Comments) where the identifiers are set. This allows some flexibility for the solution to work with themes that don’t use default naming conventions.
  2. Inserts the basic Slideout Comments CSS and Javascript files into the HTML output
  3. Makes the identifiers set in the options available to the Javascript function using the wp_localize_script function

That 3rd function is where the flexibility across themes comes in. If you haven’t used the wp_localize_script function before then have a read of its Codex entry because it’s a really easy but powerful way of providing server-side data (such as options) to client-side code.

Tabs And Overflows

Whilst it’s easy to reposition the comments block and apply a transition, the default markup is not conducive to adding the tab. To add the tab we need to set the overflow property on the parent to visible but that means that the child content, in this case the comments and the new comment form, won’t scroll.

The CSS also needs to be coded in such a way so that it doesn’t rely on a theme having a particular naming convention.

So, the inserted Javascript uses jQuery to wrap the comments block (identified by the id or class entered in the options page) in a parent and grandparent DIV. The parent is set to overflow-y:scroll to enable the comments to be scrolled in the sidebar and the grandparent is set to overflow:visible to allow the tab to work.

The tab itself is also added by the Javascript function and the comment count calculated by counting the number of elements with the comment class, also set in the options.

Taking this approach means that there’s no need to change the existing markup as all the structural CSS and functionality is applied to the inserted wrappers.

Slideout Sidebars And Transitions

The structural changes are all achieved by applying CSS to the inserted wrappers. The grandparent has its position fixed from the bottom (it looks better to have the sidebar flush with the bottom of the viewport) and the right. You’ll notice that the width and right clauses have been specified as percentages which will provide some measure of responsiveness to changing viewport sizes.

You’ll also notice that the right is negative, this hides the sidebar, but is 1% smaller than the width to give the “peeking out” effect. Make the right and width properties the same value to hide the sidebar completely and have only the tab showing.

A z-index of 10 ensures that the sidebar sits on top of the main body of the page.

The transitions use the CSS3 transition property and are controlled by the toggling of the open class on the grandparent comments-wrapper element. When the open class is added, the right property transitions to 0 (from -50%) over 0.3s. When the open class is removed, the right property transitions back to -50% (from 0) again over 0.3s.

The toggling of the open class is performed by a click event on the tab.

No Transition Support, No Comments, No Action

It will come as no surprise to learn that the CSS3 property is only supported by IE10+. Rather than compromize a really simple solution, I decided to go for a “do nothing” fallback. Before adding the wrappers to the comment content, the Javascript first checks to see if transitions are supported. If they are not, then it bails out and no wrappers are added.

Nothing lost, nothing gained.

Similarly, there’s no point do anything if there is no comment block (this means comments are disabled, not that there are no comments), so a check is also made for the presence of the identifier specified in the options.

Add A Little Of The New York Times To Your WordPress Site

Slideout comments are an elegant solution to some pretty tricky comment-related issues that will not only declutter your post pages but will make your footer relevant again and, perhaps, foster more engagement by making comments far more accessible.

If your theme follows WordPress’ default themes naming conventions then converting your WordPress site can take less than a minute but even the most unconventional theme can be converted with little effort.

Would your site benefit from a little New York Times imitation?