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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • By
    Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

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!