Tag Archives: Unread Comments

View Unread or New Comments in Disqus – WordPress Hack

The job here is to highlight unread or new comments that a visitor to your site has not seen. This is especially helpful when you have a blog with lots of threaded comments where it becomes difficult for a reader to get a grip on just where they should look to read new comments. This method can work anywhere, not just in WordPress, but this example is geared towards the Disqus WordPress Plugin. Once you install the plugin, find the comments.php file located inside the plugin folder, usually something like wp-content/plugins/disqus-comment-system/comments.php.

Open it up and find the following line of code:

    
<?php if (!get_option('disqus_manual_sync')): ?>

Right before that line, paste the following:

    
		config.callbacks.afterRender.push(function() {
			jQuery(function($) {
				var largestReadId = document.cookie.match ( '(^|;) ?largest_read_id=([^;]*)(;|$)' );
				largestReadId = largestReadId ? parseInt(unescape(largestReadId[2])) : 0;
				var newLargestReadId = 0;
				$('.dsq-comment-header').each(function() {
					id = parseInt($(this).attr('id').split('-')[3]);
					if (id > largestReadId) $(this).parent().css('background', 'lavender');
					if (id > newLargestReadId) newLargestReadId = id;
				});
				var expiry = new Date();
				expiry.setTime(expiry.getTime() + 7 * 24 * 60 * 60 * 1000); // 7 days
				document.cookie = "largest_read_id=" + newLargestReadId +"; expires=" + expiry.toUTCString();
		});

Done!

All we’re doing is setting a cookie storing the largest read disqus comment id per post in the user’s browser. If a comment id smaller than it is encountered, it’s left alone. If a bigger one is encountered, then we use jQuery’s parent() and css() functions to add some styling to the comment. You can change that line as you desire. You can see this feature implemented on Raptors Republic

Follow me on Twitter – @zararsiddiqi

Advertisements