{"id":38979,"date":"2022-04-13T05:37:00","date_gmt":"2022-04-13T10:37:00","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=38979"},"modified":"2024-09-29T13:01:21","modified_gmt":"2024-09-29T18:01:21","slug":"wordpress-formatting-issues","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-formatting-issues\/","title":{"rendered":"How to Fix WordPress Formatting Issues"},"content":{"rendered":"\n

WordPress\u2019 visual editor is perfect for writing up content quickly, and making sure that it\u2019s 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.<\/p>\n\n\n\n

So, why is WordPress post format not aligning the same as your original doc? It\u2019s 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.<\/p>\n\n\n\n

This post will first look at how WordPress handles third-party content within the editor. Then we\u2019ll introduce some shortcuts that you can use to speed up the creation process. Let\u2019s get started!<\/p>\n\n\n\n\n\n

Copying from Word to WordPress<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

\"the<\/figure>\n\n\n\n

After pasting in the content, take a close look at your edit screen and do the following:<\/p>\n\n\n\n

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

    We\u2019ll touch on some of these points a little more later on. For now, once you\u2019ve rooted out these formatting issues, check out your Visual<\/em> editor and the front end of your page or post. You should find that your content\u2019s formatting is back to normal.<\/p>\n\n\n\n

    Formatting headings in WordPress<\/h2>\n\n\n\n

    As you\u2019re 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.<\/p>\n\n\n\n

    Fortunately, this can be easily changed within WordPress via two methods. First, you can use the heading drop-down menu within the Visual<\/em> editor to select the appropriate heading type<\/a>:<\/p>\n\n\n\n

    \"how<\/figure>\n\n\n\n

    Alternatively, you can switch to the Text<\/em> editor and wrap headings in dedicated HTML tags. To do this, you\u2019ll want to add <hX><\/hX><\/em> tags around each heading, where X represents the heading number (usually 1\u20134):<\/p>\n\n\n\n

    \"How<\/figure>\n\n\n\n

    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.<\/p>\n\n\n\n

    Formatting shortcuts in WordPress<\/h2>\n\n\n\n

    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.<\/p>\n\n\n\n

    For example, the \u201ctraditional\u201d shortcuts<\/a> 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<\/em> on Windows, or Command\u2013K<\/em> on Mac.<\/p>\n\n\n\n

    As for specific WordPress options, we\u2019re partial to the adapted Markdown formatting shortcuts<\/a> you can employ. For example:<\/p>\n\n\n\n

      \n
    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 ###).<\/li>\n\n\n\n
    2. Create an ordered list by simply typing 1. or 1).<\/li>\n\n\n\n
    3. Start an unordered list by using an asterisk (*) or a hyphen (-).<\/li>\n<\/ol>\n\n\n\n

      You can also turn on shortcuts for comment moderation, by navigating to Users > Your Profile<\/em> in your WordPress dashboard:<\/p>\n\n\n\n

      \"enable<\/figure>\n\n\n\n

      There are plenty more shortcuts at your disposal, but these will likely be the ones you use most often.<\/p>\n\n\n\n

      WordPress formatting Plugins<\/h2>\n\n\n\n

      Of course, WordPress offers many plugins that can help you format your posts and pages correctly. Let\u2019s take a look at two of our favorites.<\/p>\n\n\n\n

      \"Advanced<\/figure>\n\n\n\n

      Advanced Editor Tools<\/a><\/h3>\n\n\n\n

      First up is Advanced Editor Tools<\/a>. As the name suggests, this plugin adds to the default editor that\u2019s 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.<\/p>\n\n\n\n