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.


Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

 

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:

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more

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.

Featured Plugin - WordPress Infinite SEO Plugin

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more

 

Photo: Pretty Woman Cleaning from BigStock

Tags

Participate