How To Display & Modify Allowed HTML Tags in WordPress Comments | allowed_tags

In this tutorial I will show you how to display the WordPress default allowed HTML Tags list for the comment form on your WordPress blog, as shown in the image below:

Add Notice for Comments: Allowed default HTML Tags and attributes.

Also, I will show you how to modify the allowed HTML tags and attributes list to fit your needs. I will show you how to remove tags from the default list and how to add HTML tags to the list for the Comment textarea in WordPress.

Do you know that readers can use some HTML tags in the comment section? Specifically in the Comment´s textarea? To make things easier for your readers, you should notify them about what HTML tags they can use in the comment form.

Display/Show Allowed (X)HTML Tags in WordPress Comments

In order to make things convenient for your readers, you should notify them about what (X)HTML tags they can use in the comment form. Here is a simple way to do it.

Open comments.php file located in your theme´s folder, and add the following CODE-1 to below the comment´s textarea. Save the file and upload it to the server.

CODE-1 :: comments.php File

<!-- Displays all of the WordPress default allowed HTML tags with attributes.-->
<p><strong>XHTML:</strong> You can use: <code><?php echo allowed_tags(); ?></code></p>

CODE-1 Reference:

The allowed_tags() function is defined in wp-includes/general-template.php of your WordPress directory. This function calls the $allowedtags global variable defined in wp-includes/kses.php. The allowed_tags() function displays all of WordPress default allowed HTML tags with their respective attributes.

It is preferable to use CSS for styling as a better approach than using the <strong> tag.

In some themes, the allowed_tags() function is just commented out. In this case, all you have to do is Uncommenting that line of code, in order to show what HTML tags are allowed to use in the Comment textarea.

If the below line of code (or something similar) already exists in your theme´s comments.php file, then all you have to do is to Uncomment it (meaning remove <!–– from the beginning of the line AND ––> from the end of the Line. That´s ALL.

<!--<p><small><strong>XHTML:</strong> You can use these tags: 
<code><?php echo allowed_tags(); ?></code></small></p>-->

Note: The allowed_tags() function merely shows the user what are the allowed HTML tags for WordPress comment textarea. Commenting this function out or removing it from comments.php file does not prevent a knowledgeable WordPress user from using the default WordPress allowed HTML tags in the Comment textarea. This function merely displays the tag on the browser´s window, it does not prevent the user from using them. Hidden tags does not mean that they can´t be used.

Real Example | Diary Theme

To give you an example. One of the themes I am using for this Blog is the Diary Theme. Below is where I added CODE-1 in the comments.php file. Some sections of the file are removed for brevity.

comments.php File :: Diary Theme

Note: To scroll within the code, you can also click on the code window and use your keyboard´s arrow keys.

<?php
// Diary theme. Do not delete these lines.
	
    /* CODE REMOVED FOR BREVITY. */
?>

<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
	<!-- CODE REMOVED FOR BREVITY. -->

<?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h2 id="commentsForm" class="clear"><?php comment_form_title( 'Anything to say? Leave a comment!', 'Leave a comment to %s' ); ?></h2>

<div class="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>

<!-- CODE REMOVED FOR BREVITY. -->

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<fieldset>

<!-- CODE REMOVED FOR BREVITY. -->

<?php else : ?>

<p><label for="author">Name <?php if ($req) echo "(real name, or name@keywords)(required)"; ?></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
</p>

<p><label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
</p>

<p><label for="url">Website</label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
</p>

<?php endif; ?>

<p><label for="comment">Comment</label>
<textarea name="comment" id="comment" rows="10" tabindex="4"></textarea></p>

<!--****This is where I added CODE-1, immediately after the Comment textarea. BOUTROS ABICHEDID -->
<!--Displays all of the WordPress default allowed HTML tags with attributes.-->
<p><strong>XHTML:</strong> You can use: <code><?php echo allowed_tags(); ?></code></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="POST COMMENT" />
<?php comment_id_fields(); ?>
</p>

<?php do_action('comment_form', $post->ID); ?>
</fieldset>
</form>
<!-- CODE REMOVED FOR BREVITY. -->

In other themes and theme frameworks, you can display the allowed HTML tags in the comment section by changing the theme´s setting in WordPress dashboard. In this case, CODE-1 is NOT needed.
For example, for this blog I am also using the Clear Line Theme. The below image shows you where to change the setting.

Clear Line theme: Show allowed HTML tags and attributes below comment box.

In the case of this blog, which is beyond the scope of this tutorial, I did modify comments.php file for the Clear Line Theme, since I also wanted to show what shortcodes commenters can use.

For WordPress Version 3.3.1, the default allowed HTML tags list for comments are the following:
<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

The above list is what is allowed and displayed by default. The code that lists the above HTML tags in Comments is located in kses.php file in wp-includes folder of your WordPress directory. The code can also be found at WordPress Trac. The code is displayed below for your convenience (with some modifications from the original):

kses.php File :: CODE-default :: default $allowedtags global variable for the Comment Textarea :: WP 3.3.1

<?php
$allowedtags = array(
    'a' => array(
        'href' => array (),
        'title' => array ()),
    'abbr' => array(
        'title' => array ()),
    'acronym' => array(
        'title' => array ()),
    'b' => array(),
    'blockquote' => array(
        'cite' => array ()),
    'cite' => array (),
    'code' => array(),
    'del' => array(
        'datetime' => array ()),
    'em' => array (), 
    'i' => array (),
    'q' => array(
        'cite' => array ()),
    'strike' => array(),
    'strong' => array(),
	);
?>

How To: Remove HTML Tags from the Allowed Default List

As I said before, the default set of allowed HTML tags and attributes for blog comments are stored in the $allowedtags global variable.

If you want to remove some of the allowed HTML tags and attributes from the default list. You can either add CODE-2 to your functions.php, or you can hack the kses.php file. Of course, modifying the kses.php file is not advisable, since you will loose your changes on the next WordPress version upgrade.

The second option is to add the following code to your theme´s functions.php file.

CODE-2 :: functions.php File

<?php 
/************************************CODE-2********************************
* @Author: Boutros AbiChedid 
* @Date:   March 20, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: only allow <a href="" title=""> <blockquote cite=""> <cite> 
* <code> <em> and <strong> tags/attributes in the Comments textarea section.
* FEEL Free to MODIFY The Code to fit your needs.
* @Tested on: WordPress version 3.3.1 
* @DO NOT REMOVE THIS SECTION (See Blog's terms of use.)
***************************************************************************/

function bac_allowed_html_tags_in_comments() {
  define('CUSTOM_TAGS', true);
  global $allowedtags;
 
  $allowedtags = array(
      'a' => array(
           'href' => array (),
           'title' => array ()),
	  'blockquote' => array(
		   'cite' => array ()),
	  'cite' => array (),
	  'code' => array(),
	  'em' => array(),
	  'strong' => array(),
  );
}
//Hooks the function to the specific action (init).
add_action('init', 'bac_allowed_html_tags_in_comments', 10);
?> 

CODE-2 Notes:

CODE-2 will override WordPress default allowed HTML tags list set in kses.php file. Feel free to modify the tags list to fit your needs.

The result of CODE-2 is shown in the image below:

Show a Modified list of the allowed HTML tags and attributes below the comment box.

Some theme frameworks have more variations of the functions.php file, so look at their documentation and see where best to add the code.

What will happen to the Non-allowed tags? The non-allowed tags will be removed, and in the case of the img tag for example, the image will not be displayed.

CODE-2 Reference:

How To: Add HTML Tags to the Allowed Default List

By default, WordPress prevents potentially harmful and/or invalid HTML tags and attributes from the Comments Section. But in some cases you might need to add some HTML tags to the allowed list. Meaning, you want to add HTML tags that are not originally defined in the $allowedtags list.

I would advice against adding any HTML tags to the allowed list not already approved by WordPress. There is a reason they are not allowed in the first place. But if you insist, open your theme´s functions.php file, and add (copy and paste) the following code.

CODE-2A :: functions.php File

<?php 
/************************************CODE-2A*******************************
* @Author: Boutros AbiChedid 
* @Date:   March 20, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Allow <a href="" title=""> <blockquote cite=""> <cite> 
* <code> <em> <strong> <pre> <p> tags/attributes in the Comments textarea section.
* @Tested on: WordPress version 3.3.1 
* FEEL Free to MODIFY The Code to fit your needs.
* You can add other HTML tags (and their attributes) this way. But don't 
* push it, there is a reason they are not allowed in the first place.
* @DO NOT REMOVE THIS SECTION (See Blog's terms of use.)
**************************************************************************/

function bac_allowed_html_tags_in_comments() {
  define('CUSTOM_TAGS', true);
  global $allowedtags;
 
  $allowedtags = array(
      'a' => array(
           'href' => array (),
           'title' => array ()),
	  'blockquote' => array(
		   'cite' => array ()),
	  'cite' => array (),
	  'code' => array(),
	  'em' => array(),
	  'strong' => array(),
      //Notice that <p> and <pre> were not allowed by default in kses.php file.
      'pre' => array(),
	  'p' => array()
  );
}
//Hooks the function to the specific action (init).
add_action('init', 'bac_allowed_html_tags_in_comments', 10);
?> 

CODE-2A Notes:

The <pre> and <p> tags are just an example. These tags were not included in the default list (in CODE-default). You can add any tags you like, but as I said, I would not advice this, unless you really have to.

You can use either CODE-2 or CODE-2A but NOT both.

General Warning

When you add several PHP code blocks in your theme´s funtions.php file, make sure that you don´t leave any white space (spaces, newline) before the opening PHP tag or after the closing PHP tag. Like so (the correct way):

<?php 
//Some Code here beetween the opening PHP tag (above) 
//and the closing PHP tag (below)...
?>
<?php 
//Some other Code here ...
?>

In the above code, if you leave any white space or a newline between lines 4 and 5, you will get the following error: Warning: Cannot modify header information – headers already sent by (… , in your login screen and after you login to your WordPress dashboard.

Your Turn to Talk

In this tutorial, I showed you how to display the allowed (X)HTML Tags in WordPress Comment section, to make it easier for your users. Also I showed how to unobtrusively modify the WordPress default Allowed Tags list for the Comment textarea by either removing tags from the default list or adding tags to the list.

If you have something to add, or anything else to say, please share it in the comment section. Your opinion matters, unless it is a Spam.

If you found this post useful, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

39 Responses to “How To Display & Modify Allowed HTML Tags in WordPress Comments | allowed_tags”

  1. Rolf Stenberg says:

    Hey!
    Thanks, was looking for some other great ideas, but this will do for sure.

  2. Mohammed Hashim says:

    Thanks Boutros for taking the time to share your view with us. This tutorial is looking awesome and very helpful for those who know the importance of it.

  3. Shane says:

    Gosh, thanks mate you made my work simple…

  4. lisa edward says:

    This is really nice. Thanks for your information.

  5. noorwood says:

    Thanks for sharing all this amazing Code Boutros.

  6. james says:

    Hmm, i used to work at Kyoto, but a different one, i almost thought you designed the other site hehe, but thanks for the tutorial, it will be of use to me.

  7. Pamm Sevoiu says:

    Boutros, i was looking for this explanation for a long time but i never knew if would be on my frequently visited website.Thanks.

    Now, how do i enable HTML links for admins only & disable it for other users?Kindly guide me in the code.

  8. Yaron Peled says:

    First of all I must point out that English not my native language. For several days that line was bothers me. I am very glad I came to your site. Although I’m really not good editing codes but with your explanation now everything looks much better.

    Really impressed! anything is very, very clear Thanks a lot Boutros.

  9. Sebastian says:

    Thanks! Exactly what I was seraching for!

  10. Seo says:

    I am from Turkey and I would follow up with language translation site for a long time. Given the information and articles are truly wonderful. Thank you.

  11. Thanks for this amazing codes Boutros! Your codes are clean and can be easy to understand.

  12. Leigh says:

    Thanks for letting us use your code Boutros. I really appreciate it.

    Every time I try and put something like this together, I end up missing some small piece and the whole thing falls apart.

    You’ve made my life much easier.

    I promise to leave the author credit section intact.