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
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • 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
    Fading Links Using jQuery:  dwFadingLinks

    UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works. Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.

  • By
    Create Spinning Rays with CSS3 Animations & JavaScript

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...

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..

  10. Th above code doesn’t seem to work anymore, so I’ve come up with the following solution:

    function allow_pre_tag_in_comments( $allowed_tags ) {
        $allowed_tags['pre'] = array();
        return $allowed_tags;
    }
    add_filter( 'wp_kses_allowed_html', 'allow_pre_tag_in_comments', 10, 1 );
    

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