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 WordPress.
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 dashboard 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.
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:
- Seek out and delete any rogue line breaks (designated by the tag ).
- 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.
- 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 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:
- 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 ###).
- Create an ordered list by simply typing 1. or 1).
- 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 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.
First up is TinyMCE Advanced. As the name suggests, this plugin adds to the default TinyMCE 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 TinyMCE Advanced is a solid plugin, developers wishing for much more advanced functionality may need something more robust.
- Cost: TinyMCE Advanced is free to download from the WordPress.org Plugin Directory.
We mentioned that if you need advanced formatting functionality, you’ll probably want a more comprehensive plugin. This solution – wp-Typography – could be what you’re looking for.
This plugin provides character replacement options for quotation marks, ellipses, trademark symbols, and much more. There are also some developer-specific features, such as a number of CSS hooks to help you style other characters accordingly.
- Pros: For developers, this plugin will offer a lot of character replacement and formatting options, which can both be tweaked as you wish.
- Cons: This tool may not offer you complete control over the elements you wish to format. It’s also a very developer-heavy solution to formatting text.
- Cost: As with the previous plugin, wp-Typography 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 WordPress 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. Here are the steps you’ll need to take:
- Click on the visual editor’s Toolbar Toggle button, to display additional formatting options.
- Highlight all of your content (or at least the content with spacing and line break errors if you can spot them).
- 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 formatting properly, you may want to consider how else you can expand your knowledge.
WP Engine isn’t just a leader in WordPress web hosting. We also offer a wealth of educational articles and guides in our Support Garage and our Resource Center. Feel free to browse the archives, and see what you can learn today!