How to Fix WordPress Formatting Issues

WordPress’ visual editor is perfect for writing up content quickly, and making sure that it’s formatted to your exact requirements. However, some people choose to use a third-party solution instead, such as Microsoft Word or Google Docs. The problem is that this can introduce issues when pasting your content into a WordPress post.

So, why is WordPress post format not aligning the same as your original doc? It’s important to be careful when copying over external content, and to take care of any formatting errors that might play havoc with your page layouts. Fortunately, WordPress offers plenty of ways to increase your efficiency when it comes to formatting content correctly.

This post will first look at how WordPress handles third-party content within the editor. Then we’ll introduce some shortcuts that you can use to speed up the creation process. Let’s get started!

Copying From Word to WordPress

Many WordPress users write their content directly into the standard post without a hitch. However, others have a preferred text editor they wish to use, such as Microsoft Word, Google Docs, Hemingway, and so on.

When pasting in content from these tools, however, you can end up introducing formatting issues. For example, you may see rogue code, or extra spacing between characters. This can be influenced by the WordPress theme, post format, or page template.

To minimize this issue, whenever you paste content into WordPress, you should switch to the Text editor by clicking on the dedicated tab in your post or page:

After pasting in the content, take a close look at your edit screen and do the following:

1. Seek out and delete any rogue line breaks (designated by the tag  ).
2. Delete all <span> tags, and their corresponding closing tags. They’re not required by WordPress at all, and can often manifest as differently formatted text in the Visual editor.
3. Make sure lists are formatted correctly, with each entry on a new line.

We’ll touch on some of these points a little more later on. For now, once you’ve rooted out these formatting issues, check out your Visual editor and the front end of your page or post. You should find that your content’s formatting is back to normal.

Formatting Headings in WordPress

As you’re probably aware, WordPress themes can have different header sizes. This is largely a cosmetic detail, and is related to the overall design of the theme. However, copying over content from an external text editor can overwrite your default header styles.

Fortunately, this can be easily changed within WordPress via two methods. First, you can use the heading drop-down menu within the Visual editor to select the appropriate heading type:

Alternatively, you can switch to the Text editor and wrap headings in dedicated HTML tags. To do this, you’ll want to add <hX></hX> tags around each heading, where X represents the heading number (usually 1–4):

Both approaches are valid, although those more comfortable with HTML will likely gravitate to the latter option. Of course, if you write your WordPress post in an HTML format from the beginning, you can simply paste the code into the Text editor, and your post will be perfectly formatted.

Formatting Shortcuts in WordPress

Shortcuts are commonplace within many programs and apps, and WordPress is no exception. These shortcuts are a great way of saving time when creating your content, and are automatically enabled.

For example, the “traditional” shortcuts for cutting, copying, and pasting can all be used, as can the ones for basic formatting such as italics and bold text. Links can also be added using CTRL-K on Windows, or Command–K on Mac.

As for specific WordPress options, we’re partial to the adapted Markdown formatting shortcuts you can employ. For example:

1. Use pound signs (#) to designate a heading, typing in a number of symbols that matches the desired heading level (i.e. a level-3 heading would be ###).
2. Create an ordered list by simply typing 1. or 1).
3. Start an unordered list by using an asterisk (*) or a hyphen (-).

You can also turn on shortcuts for comment moderation, by navigating to Users > Your Profile in your WordPress dashboard:

There are plenty more shortcuts at your disposal, but these will likely be the ones you use most often.

WordPress Formatting Plugins

Of course, WordPress offers many plugins that can help you format your posts and pages correctly. Let’s take a look at two of our favorites.

Advanced Editor Tools

First up is Advanced Editor Tools. As the name suggests, this plugin adds to the default editor that’s built into WordPress. It offers a number of options, including extra list formats, the ability to create and edit tables, and a way to set the font family and size directly from the editor.

• Pros: This plugin integrates into WordPress superbly, as you’d expect, and includes a number of practical features users will need.
• Cons: While Advanced Editor Tools is a solid plugin, developers wishing for much more advanced functionality may need something more robust.
• Cost: Advanced Editor Tools is free to download from the WordPress.org Plugin Directory.

EditorsKit

We mentioned that if you need advanced formatting functionality, you’ll probably want a more comprehensive plugin. This solution, EditorsKit, could be what you’re looking for.

EditorsKit enhances the WordPress Gutenberg editor with a range of features, offering better control, text formatting, and styling using standard keyboard shortcuts. It supports Markdown for bold, italic, and strikethrough and provides block visibility controls, estimated reading time display, block guidelines, and responsive text alignment among other features.

• Pros: For developers, this plugin will offer a lot of character replacement and formatting options.
• Cons: This tool may not offer you complete control over the elements you wish to format.
• Cost: As with the previous plugin, EditorsKit is free from the WordPress.org Plugin Directory.

Spacing and Line Break Errors in WordPress

Earlier, we talked about spacing and line break errors that might occur when you’re copying content over to a WordPress page from a third-party editor. These are fairly common, and are expected when migrating content between different apps and programs.

While you could head into the Text editor and delete any instances you find manually, there’s a faster method if you’re using the Classic Editor. Here are the steps you’ll need to take:

1. Click on the Classic Editor’s Toolbar Toggle button, to display additional formatting options.
2. Highlight all of your content (or at least the content with spacing and line break errors if you can spot them).
3. Click on the Clear Formatting button (which looks like an eraser).

This will remove rogue <span> tags, and should also clear our any spacing and line break issues. However, it sometimes doesn’t detect every instance, so it’s worth taking another look within the Text editor to ensure that everything looks right.

WP Engine for WordPress Assistance

Regardless of your skill level when it comes to WordPress, there’s always something new to learn. Now that you know how to handle these common formatting issues, you may want to consider how else you can expand your knowledge.

WP Engine isn’t just a leader in WordPress hosting. We also offer a wealth of educational articles and guides from our Support team and in our content library. Feel free to browse the archives, and see what you can learn today!

If you need additional WordPress help, contact our award-winning support team, available 24/7.