Changing Text Formatting in the WordPress Visual Editor

When trying to change the formatting of some text in the WordPress Visual Editor, sometimes it just doesn’t change, no matter what I do?

Sound familiar? Well, there is often a reason for this, and it makes sense once you have an understanding of what’s going on behind the scenes.

The quick solution is, when you select the text that you want to change the formatting on, remove the old formatting first, using the “Remove Formatting” toolbar icon  , and then apply the new formatting to it.

 

For those who’d like to know more…

When you select some text in the editor, and then apply formatting, such as changing the colour, font size or style of the text, what happens in the background, is that the editor ‘wraps’ HTML and/or CSS definitions around the text.

Sometimes, a combination of various changes to the formatting around the same pieces of text can cause multiple definitions to be wrapped inside each other.
The most common cause of this is pasting the text from somewhere else, either from another website or from something like Word, which brings along a lot of formatting without you even being aware of it.

(Refer to: The Dangers of Pasting Text into the WordPress Visual Editor)

So, when you select the text again and try to change say, the colour, the editor will wrap the text in the format definition for that colour, but inside that definition is another one, setting it to a different color, and so the text stays the colour of the innermost definition.

When you remove the formatting, it removes all of the formatting, allowing you to start afresh.

 

For those who a little more adventurous, an interesting exercise is to write a couple of paragraphs in Word, start a new post, then copy and paste from Word directly into the new post, then click the HTML tab on the top right of the editor toolbar and you will have a small glimpse into what you’ve just pasted. (Remember to click the Visual tab to take you back to normality?)
Note: there’s no need to save the post to see this.

As a comparison, remove all of this text (or create another new post) and type the same paragraph text directly into the editor, then click the HTML tab and see how much less ‘stuff’ is there.

, ,

4 Responses to Changing Text Formatting in the WordPress Visual Editor

  1. Lisa Wood January 17, 2012 at 4:19 pm #

    Good information about how to format wordpress with text changes! Very handy

    Cheers
    Lisa

    • wayne January 17, 2012 at 5:11 pm #

      Glad to be of help Lisa. More coming, slowly but surely.
      Cheers, Wayne

  2. Annie Infinite January 17, 2012 at 9:53 pm #

    Good information Wayne and so many new bloggers have nasty old formatting follow them around and don’t know how to fix it 🙂 these hints are going to form a wonderful resource thank you.

    • wayne January 18, 2012 at 8:05 am #

      Thanks Annie, maybe these tips will help improve the quality of some blogs?
      Cheers, Wayne

Leave a Reply