O'Reilly

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.

Track.js Error Reporting

Upcoming Events

Recent Features

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?...

Incredible Demos

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!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....