Many WordPress sites use the Disqus Comment System because it’s powerful, social, and adds some features not available with the standard WordPress comment system.1
Twenty Sixteen Is Not Designed For Disqus
Unfortunately, the Twenty Sixteen WordPress theme2 is not designed for Disqus. On narrow screens like smart phones, Twenty Sixteen displays Disqus full width against the left and right edges of the screen, which doesn’t match the layout of Twenty Sixteen. If you want Disqus to look good, you’ll need to make a slight tweak.
A Simple Fix
Fortunately, making Disqus fit in with the rest of Twenty Sixteen is simple. Just add the following CSS to your site:
This CSS makes Disqus match the margins for the rest of your site. Disqus looks good at all screen widths, even on smart phones.
Adding the CSS
There are may ways to add CSS to your WordPress site, but a couple of the easiest are the Custom CSS module in the JetPack by WordPress.com plugin3 and the Simple Custom CSS plugin. Both of these plugins document how to add CSS to your site.
More advanced WordPress users might choose to use a child theme.
I sometimes use Disqus here at brentlogan.com. I installed it briefly while I tested it with Twenty Sixteen. ↩
Twenty Sixteen is still in development and will released before the end of 2015. ↩
If you’re not already using JetPack, I wouldn’t recommend it just for adding CSS. That would be overkill. ↩
Clean Archives Reloaded is a great archives plugin for those of us who have used WordPress for a long time. I use it in my archives page because it can display a lot of post titles without overwhelming the user.
Twenty Sixteen will be the default WordPress theme next year and is scheduled for release before the end of 2015. I’m using Twenty Sixteen now for testing and to watch its development.1
Twenty Sixteen is a “mobile first” responsive theme. Its main menu collapses our of the way for smaller screens yet can be expanded with a touch. The items are spaced for easy tapping.
Google’s Search Console2 highlights pages that are not mobile friendly; it flagged my archives page because the post title links and month links were too close together.
Here’s how to take the CSS for Twenty Sixteen’s main menu and apply it to Clean Archives Reloaded.
Modify Clean Archives Reloaded
The HTML structure of Clean Archives Reloaded doesn’t quite match the HTML structure of Twenty Sixteen’s main menu. To simplify the CSS, it was easier to change one line of clean-archives-reloaded.php. I changed
This moves the date inside the anchor tag, simplifying its HTML structure.3
Make Custom CSS
Next I grabbed the CSS from Twenty Sixteen and searched for all the lines with .main-menu in them and modified those appropriate to Clean Archives Reloaded. Because I only wanted this new CSS to apply to smaller screen widths, I wrapped the CSS in a media query. This makes Clean Archives Reloaded use mobile friendly formatting at the same screen width that Twenty Sixteen’s main menu.
I lived by web stats, and now largely ignore them2
I learned to appreciate responsiveness in web sites
I have tried About.me, App.Net, Blogspot, Facebook, 500px, Flickr, FriendFeed, Google+, Google Wave, Identi.ca, Instagram, LinkedIn, MySpace, new MySpace, Pinterest, Plurk, Posterous, Pownce, Prezi, RebelMouse, Slideshare, Quora, Twitter, Vizify, Yammer, and Youtube3 but still consider this WordPress blog to be my online home
Create a page and use the RSSImport shortcode to show your Quora RSS feed. Your Quora RSS URL is the URL you see when you click on your name in Quora with “/rss” appended to the end. For example, my Quora RSS URL is:
The shortcode you use can be as simple as (make sure the feedurl matches your Quora RSS URL):
I’m trying out the WordPress theme P2. I really like it. What’s interesting is that it doesn’t show post titles. Disconcerting, at least when the humor of the previous three posts depending on their titles being shown… Oops!