Preprocess Comment Content in WordPress

By  on  

I've put a great amount of effort into making sure the comment system on this blog is fast and feature-filled.  The comment system is AJAX-based so you don't need to worry about page refreshes.  You can also post links to GitHub gists, CodePen pens, and JSFiddle fiddles and see them rendered within the comment.  Those tasks I accomplish after a comment has been registered in the system.  But what if you want to modify comment content before it is processed, and subsequently marked as SPAM or scrubbed?  That's super easy with WordPress hooks!

The PHP

The preprocess_comment hook allows us to get at the comment data before it is processed.  Here is how I use this hook, wrapping `text` strings in <code> elements and encoding angle characters in <pre> elements:

// Manage comment submissions
function preprocess_new_comment($commentdata) {
	// Replace `code` with <code>code</code>
	$commentdata['comment_content'] = preg_replace("/`(.*)`/Um", "<code>$1</code>", $commentdata['comment_content']);

	// Ensure that code inside pre's is allowed
	preg_match_all("/<pre(.*?)>(.*)<\/pre>/", $commentdata['comment_content'], $pre_matches); // $2
	foreach($pre_matches as $match) {
		$immediate_match = str_replace(array('<', '>'), array('<', '>'), $match[2]);
		$commentdata['comment_content'] = str_replace($match[2], $immediate_match, $commentdata['comment_content']);
	}

	// Return
	return $commentdata;
}
add_action('preprocess_comment', 'preprocess_new_comment');

This snippet should be added to functions.php, as you would expect of a WordPress theme enhancement.

I love the WordPress hook system -- it makes the CMS incredibly powerful and customizable.  I also use this hook to prevent WordPress comment SPAM.  And since many users place HTML code in my comments, it's important I encode those angle characters properly.  In the end, you never know what your user will submit and what each site will accept -- use this WordPress hook to take control!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Google Font API

    Google recently debuted a new web service called the Font API.  Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let's take a quick look at the ways by which the Google Font...

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

Discussion

  1. Hello David,
    Thanks for the hook implementation for preprocess_comment.

    I have question on using the hook and replacing angle brackets inside in the short code. On my site http://zevolving.com/, I allow visitors to use the short code to post the ABAP code. In ABAP, we have few variables (known as Field symbols) which can be declared using the angle bracket, like <fs_wa>

    When readers submit the comment, these variables gets disappeared from the comments. I think WP considers them HTML tags and removes them.

    I think, I can use the preprocess_comment hook, but not sure how to implement the logic of replacing the angle brackets with symbols. Can you please help me?

    Thanks Much.

    Regards,
    Naimesh Patel

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!