Allow More HTML Tags in WordPress Comments

By  on  

WordPress allows a select few HTML tags within the content of post comments.  This is an awesome feature, of course, because it prevents XSS security holes and other malicious code from being injected by spammers, hackers, and jerks.  Unfortunately there are many other tags that bloggers may want to support;  for example, tech bloggers may want to support PRE tags so commenters can post code.  Luckily it's quite easy to allow more tags within your WordPress comments:

// Create function which allows more tags within comments
function allow_pres() {
	global $allowedtags;
	$allowedtags['pre'] = array('class'=>array());
}

// Add WordPress hook to use the function
add_action('comment_post', 'allow_pres');

The global $allowedtags variable holds an array of allowed comment tags, so adding the pre key will allow PRE elements within comments.  The class key within the pre array allows the class attribute for any PRE tags posted within the comment, so not only can you allow additional HTML tags, but you can also specify allowed attributes too!  This function is added to the comment_post hook (same hook that AJAX comments use) so as to only add desired tags when a comment is posted.

Recent Features

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

  • By
    CSS Text Overlap

    One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing...

Discussion

  1. Richard

    Awesome :P

  2. I’m still pretty new to custom functions within WordPress. I tried adding the code to the functions file, but for some odd reason, I still am unable to use the “pre” tag in my template. Any ideas/suggestions?

    • ^trying to allow them in comments

  3. Sven

    Very useful tip, thanks!

    Any way to remove tags from comments?

  4. Is there a wordpress plugin that would allow us to add these HTML tags instead of dorking with the code? Code changes are great but are obliterated when the core gets updated.

    • It would be a simple plugin but I’m not aware of one.

    • You can use “My Custom Functions” plugin (https://wordpress.org/plugins/my-custom-functions/) for adding any functions to your website. And your function will keep on working, no matter how many times you upgrade your core or switch your theme. It’s easy to use plugin.

  5. Never thought that this would be that easy! Cool!

  6. toma

    How to add more tags like p or br ?

    Thanks

  7. Thanks David, this works. However I’m wondering if it is safe to allow [pre] in comments? Is there any additional filtering we should be doing to prevent XSS vulnerabilities? Actually I’m wondering why WordPress removed the [pre] tag if it’s safe to allow in comments…any thoughts?

    Thanks again

  8. bart

    Hello,

    do you know how to allow use a word in comments?

  9. bart

    do you know how to allow use a span style display:… in comments? in the previous my comment i put it in the correct html and comments was filtered..

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