How to Remove the Default Style in the Tag in WordPress Posts
The Problem with Pasting Content from Word into WordPress
One of the most common issues WordPress users face is dealing with messy markup when pasting content from word processing software like Microsoft Word into their WordPress posts or pages. Word and other office suites often add a lot of extra, unnecessary markup to the text, which can cause all sorts of formatting issues once it’s imported into WordPress.
This is especially problematic when pasting code snippets or preformatted text into the WordPress editor. By default, WordPress wraps this type of content in the <pre>
HTML tag, which is meant to preserve the formatting and layout of the text. However, Word often adds its own styles and classes to the <pre>
tag, which can make the code or preformatted text appear incorrectly on the front-end of your WordPress site.
For example, let’s say you copy and paste the following code snippet from Word into a WordPress post:
<pre class="MsoNormal">
<span style="font-family:Consolas;">
<?php
echo "Hello, World!";
?>
</span>
</pre>
When this is rendered on your WordPress site, you’ll see that the code is wrapped in a <pre>
tag with additional styles and classes applied to it, which can cause issues with the formatting and layout.
The Solution: Removing the Default Style in the <Pre>
Tag
Fortunately, there’s a simple solution to this problem. By removing the default styles applied to the <pre>
tag in WordPress, you can ensure that your code snippets and preformatted text are displayed correctly on your website.
Here’s how you can do it:
Step 1: Create a Custom CSS Snippet
The first step is to create a custom CSS snippet that will override the default styles applied to the <pre>
tag. You can do this by adding the following code to your WordPress theme’s CSS file or by using a plugin like Custom CSS and JS:
pre {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
font-family: monospace !important;
font-size: 1em !important;
color: inherit !important;
}
This CSS code removes the default background color, border, and padding from the <pre>
tag, and sets the font family to a monospace font, which is commonly used for displaying code. The !important
declaration ensures that these styles override any other styles that might be applied to the <pre>
tag.
Step 2: Disable the Default WordPress <Pre>
Tag Styles
In addition to the custom CSS, you can also disable the default styles applied to the <pre>
tag by WordPress. To do this, you can use the following code snippet in your theme’s functions.php
file or in a custom plugin:
function remove_pre_tag_styles($content) {
return str_replace(array(
'<pre class="',
'<pre style="'
), array(
'<pre class="no-style ',
'<pre style="font-family: monospace; font-size: 1em; '
), $content);
}
add_filter('the_content', 'remove_pre_tag_styles', 10);
This code snippet uses the the_content
filter to search for the <pre>
tags in your post content and removes the default class
and style
attributes applied by WordPress. It then adds a new class
of no-style
and a basic style
attribute that sets the font family and size.
Step 3: Customize the Appearance of the <Pre>
Tag (Optional)
If you want to further customize the appearance of the <pre>
tag, you can add additional CSS rules to your theme’s CSS file or the custom CSS snippet you created in step 1. For example, you can change the background color, add a border, or adjust the padding and margin:
pre.no-style {
background-color: #f5f5f5 !important;
border: 1px solid #e3e3e3 !important;
padding: 20px !important;
margin: 20px 0 !important;
}
This CSS code adds a light gray background color, a subtle border, and some padding and margin to the <pre>
tags with the no-style
class.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Alternative Solution: Use a WordPress Plugin to Clean Up Pasted Content
If you don’t want to mess with custom CSS or code snippets, there’s another solution you can try: using a WordPress plugin to clean up the formatting when pasting content from Word or other sources.
One popular plugin for this purpose is Mammoth DOCX Converter. This plugin can be used to upload Word documents (.docx
files) directly to your WordPress site and convert them to clean HTML, removing any unnecessary markup and styles.
Here’s how to use the Mammoth DOCX Converter plugin:
- Install and activate the Mammoth DOCX Converter plugin in your WordPress dashboard.
- When you’re ready to add content from a Word document, click the “Upload Document” button in the WordPress editor.
- Select the Word document you want to upload and click “Convert Document”.
- The plugin will then convert the document to clean HTML, which you can further edit and customize as needed.
While the Mammoth DOCX Converter plugin isn’t perfect and may not always produce 100% clean markup, it can be a much faster and easier solution than manually removing the default styles from the <pre>
tag every time you paste content from Word.
Conclusion
Dealing with messy markup when pasting content from Word into WordPress can be a frustrating problem, but there are a few solutions you can try to clean up the formatting and ensure your code snippets and preformatted text are displayed correctly on your WordPress site.
By creating a custom CSS snippet to remove the default styles applied to the <pre>
tag, and optionally using a WordPress plugin like Mammoth DOCX Converter to clean up pasted content, you can ensure a consistent and professional-looking presentation of your content on your WordPress website.
Flowpoint.ai can help you identify any technical issues that may be impacting the user experience and conversion rates on your WordPress site, and provide personalized recommendations to fix them.