How to Stop Removing
&
Tags in WordPress Editor Without Any Plugins
One of the most frustrating things for WordPress users is the way the platform's built-in text editor, TinyMCE, often removes or modifies HTML tags like <p>
and <br>
when you're trying to format your content. This can lead to unexpected behavior and make it difficult to achieve the exact layout and styling you want on your website.
Fortunately, there's a simple solution that doesn't require any additional plugins. By adding a few lines of code to your theme's functions.php
file, you can override the default TinyMCE settings and prevent it from stripping out those essential HTML elements.
The Problem: TinyMCE's Default Behavior
The WordPress text editor, which is powered by the TinyMCE library, is designed to automatically clean up and format the HTML code as you're writing and editing content. This is generally a helpful feature, as it can save you from having to manually format your text and ensure a consistent look and feel across your site.
However, the default TinyMCE settings are quite aggressive when it comes to removing or modifying certain HTML tags. Specifically, it will often remove <p>
and <br>
tags, which are crucial for controlling the structure and spacing of your text. This can lead to unexpected behavior, such as your paragraphs and line breaks not appearing as you expect them to on the front-end of your website.
The Solution: Overriding TinyMCE's Settings
The good news is that there's an easy way to override TinyMCE's default settings and prevent it from removing or modifying the HTML tags you want to keep. By adding a small amount of PHP code to your theme's functions.php
file, you can tell TinyMCE to preserve the <p>
and <br>
tags, as well as any other HTML elements you specify.
Here's the code you can use:
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
Let's break down what this code does:
- The
override_mce_options()
function is where we'll define the new TinyMCE settings.
- Inside the function, we set the
$opts
variable to '*[*]'
, which tells TinyMCE to preserve all HTML elements and their attributes.
- We then update the
'valid_elements'
and 'extended_valid_elements'
settings in the $initArray
with the $opts
value.
- Finally, we return the modified
$initArray
to apply the new settings.
- The
add_filter('tiny_mce_before_init', 'override_mce_options');
line hooks into the 'tiny_mce_before_init'
filter, which allows us to run our override_mce_options()
function and apply the new settings before TinyMCE is initialized.
By adding this code to your theme's functions.php
file, you'll effectively override the default TinyMCE settings and prevent it from removing or modifying the <p>
and <br>
tags (as well as any other HTML elements you want to preserve) when you're editing content in the WordPress text editor.
Real-World Example and Benefits
To illustrate the benefits of this solution, let's consider a real-world example. Imagine you're building a website for a client who wants a specific layout and formatting for their blog posts. They want each paragraph to be enclosed in <p>
tags, and they want to use <br>
tags to create line breaks between paragraphs.
Without the TinyMCE override, the client's content might end up looking like this on the front-end of the website:
Paragraph 1. This is the first paragraph of the blog post.Paragraph 2. This is the second paragraph of the blog post.
As you can see, the <p>
and <br>
tags have been removed, and the paragraphs are all stuck together without any spacing between them.
However, with the TinyMCE override in place, the client's content will be preserved exactly as they intended, with the <p>
and <br>
tags intact:
<p>Paragraph 1. This is the first paragraph of the blog post.</p>
<br>
<p>Paragraph 2. This is the second paragraph of the blog post.</p>
This ensures that the blog post is properly formatted and styled on the front-end, providing a better user experience for the client's website visitors.
Additionally, maintaining the correct HTML structure is important for accessibility, search engine optimization (SEO), and other web development best practices. By preventing TinyMCE from modifying your content's HTML, you can be confident that your website will continue to function as expected, without any unexpected issues caused by the text editor.
Conclusion
Dealing with TinyMCE's default behavior of removing or modifying crucial HTML tags like <p>
and <br>
can be a real pain for WordPress users. Fortunately, there's a simple solution that doesn't require any additional plugins.
By adding a few lines of code to your theme's functions.php
file, you can override the default TinyMCE settings and ensure that your content's HTML structure is preserved, no matter how you're editing it in the WordPress text editor. This not only improves the appearance and functionality of your website, but it also aligns with best practices for accessibility, SEO, and overall web development.
So, if you're tired of constantly having to clean up your HTML after editing content in WordPress, give this solution a try. It's a quick and easy fix that can make a big difference in the long run.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your WordPress website and directly generate recommendations to fix them, including issues related to TinyMCE's behavior
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.