How to Remove WordPress Comment Tags Message with CSS for a Clean Look

How to Remove WordPress Comment Tags Message with CSS for a Clean Look

Although some people like them, some people don’t. They are the notices that tells users which HTML tags are permissible in a comments box. Whether they appear or not on your site depends on your theme. Here’s an example of a theme using one of these notices.


Removing the Tags Allowed Message

If you’re in the camp that thinks this message is either unnecessary, messy, or both, then this little CSS trick should help you remove it and keep your comments area a little cleaner.

Step 1 – Inspect the Element

First you will need to find out what CSS element controls the styling of the message. You can do that by “inspecting the element” in your browser. Both Firefox and Chrome have this functionality built in.

Simply highlighting the message in your browser and then right click. You should see an option that says, “Inspect Element.” Click that.

In this example, we’ll be using Firefox. In Firefox you will see the entire screen grayed out except for the part you are inspecting.

Something else to note is that if you don’t see the “Style” pane open on the right-hand side, you will need to click the “Style” button in the bottom right-hand corner.

Step 2 – Find the Style

In the Style pane, you will want to look for the section that controls the tags message. This will vary from theme to theme, but if you read through the style sheet for a minute, you should recognize something that makes sense for that message. It might look something like the following:

Step 3 – Edit Stylesheet

The last step is to edit the section that you found above in your style sheet.

In your Admin area, go to Appearance > Edit > Stylesheet – style.css. Search for the section, and then change the attributes to the following:

display: none;

So in the case of my style sheet, I changed it from this …

#respond .form-allowed-tags code {
 font-size: 11px;

to the following …

#respond .form-allowed-tags code {
 display: none;

Now in my theme, after doing the above, I still had part of the message remaining:

And so I just went through the exact same process again with that remaining snippet: I found the style by inspecting the element, and then I set it to “display: none” in my style sheet.

A Clean, Uncluttered Comments Box

After saving your style sheet changes, you should now have a clean, shiny, uncluttered comment form.

Note – telling your theme not to display this message does NOT take the functionality away. It simply takes the message away.


Photo: Pretty Woman Cleaning from BigStock