We’ve reviewed the Text Editor and talked about the changes that came with WordPress 3.9 and now we’re going to work on how to add text to the editor from other software.
A lot of people use other sources of text editors like word processors to create their content so then you need to cut and paste it into the WordPress text editor. If you’ve been around WordPress at all for awhile, you know that in the past lots of extra code would be added along with the text. But one of the big innovations in WordPress 3.9 is this change in the text editor that fixes this problem.
If you’ve watched my videos about how to do this in the past, those are quite a bit longer than this will be because there were all kinds of things that you had to consider when you pasted text from word processors. But, as I said, it’s actually become immensely easier.
Adding Text from Microsoft Word
We’re going to start off by just taking a look at a Word document here. I’ve got this document entitled Adding Text from Word to the Text Editor. In fact, this is some transcription from a video that I did the last time I taught this when there were quite a few more rules.
This document has headings, it’s got some italics, it’s got some bold text, it has bulleted list and paragraphs. In the bad old days this was a total pain but all I really have to do here is copy it, Control A to select it all, Control C to copy. Then I’m going to come over here to Add New to add a new page and then all I have to do is paste it.
Paste Text in the Visual View to Retain Formatting
There used to be a paste from word button and some others like that but that doesn’t exist any longer because it’s no longer necessary. As long as we’re in the visual view it’s going to retain a bunch of the formatting. You can see it did retain the italic and the bold.
If we come over here to the text view you’ll note that it has wrapped this heading and an h1 tag but we don’t want that since the page title should be the only heading with an h1. I don’t want any h1 tags inside the body of my content.
I’m going to change that to an h2 that but then you can see the next ones are h2s and the list is a bulleted list, this ul means it’s an unordered list and the li means that’s one list item on an unordered list. If you switch around to the visual view, you can see it looks pretty much exactly the way you want it to look.
If you go back to the text view there’s not a lot of extraneous horrible text formatting that used to come along whenever you pasted a word document into the text editor. WordPress has become quite adept at stripping all of that out.
Let’s publish this page and take a look. The permalink now is adding text from the text editor so it’s the way we want it. If we view the page, there it is, there’s the h1 tag at the page heading, adding text from the text editor and now it actually looks pretty nice. So this is a perfectly acceptable way to add text to WordPress.
Adding Text from a Google Document
Now, we’re going to add another new page and we’re going to do this one from a Google doc. I’m going to copy a similar block of text here from a Google doc and we’re going to see that there are some differences. I’ll copy it, come back over to my new page and paste it. If you paste it in the text view it definitely strips all the formatting out.
Pasting in Text View Strips Away Formatting
Let’s take a look at that. Now, there are absolutely no list items, there’s no italics, there’s no nothing. Just remember that if you paste into the text view, regardless of the source, it will strip away all formatting. But I really didn’t want to paste it in the text view so I’m going to delete that.
We’ll come back over to the visual view and paste. Now you can see I’ve got all my formatting here. I’m going to take this “Adding Text from Google Docs” and change my title here.
Note that we’ve got lots of really big spaces here. If we publish this and view the page, all those really big spaces still exist. We do get our bulleted list and our italicized text and we do get the bold text and headings but it isn’t exactly what we wanted to have happen. The reason for that is when you paste from Google docs, it adds this little non breaking space. That’s what this is. It’s an HTML character for non breaking space.
You can just delete those by going along and pressing delete and that is a perfectly acceptable way to solve this problem. But notice when I hit delete and this went away, it’s no longer a heading? If we come back over and look at the text view you see this heading has lost its heading tag?
Effects of Deleting are Different in Visual View vs Text View
So this brings up an issue that I’m going to draw your attention to later about deleting things in the visual view and the usefulness of the text view for deleting. We really didn’t want that to be a paragraph tag, we really wanted that to be a heading tag.
Deleting is not always good because here I am deleting and now this is no longer bulleted. If I delete it up here it deletes just fine but if I go like that and hit backspace it works just fine but the net result of this is that WordPress can’t always tell what your real intention is when you delete and so it’s not flawless.
One thing you could do in this is not have that extra space when you create a paragraph in Google docs, right? If you did that you’d still have paragraphs but you just don’t have the extra space that is created in order to make the paragraph stand out in Google docs. WordPress automatically adds that extra space for you so pasting from Google docs has some disadvantages and you end up with this issue.
Pasting as Text
If you use Google docs all the time, one way to handle this is to simply paste it as text. Let’s come back over here to that Google doc. Select it, copy it and come back over to our WordPress page. I’ll just select all the text that’s there and delete it. Now you can actually hit this “Paste as text”. And you can say “If you’re looking to paste rich content from Microsoft Word try turning this option off.”
Adding Styling To Text
Let’s paste that. We don’t have any of the Google Doc styling now. All that styling is gone but you also don’t have all those extra spaces. Then you need to add your styling back in for the headings, italics, bold and bulleted list.
To add headings, put your cursor in the text and give it a heading 2. To add italic, select the text you want to be italic and choose italics. The same thing is true for text you want bolded. And let’s make this a heading 2. Notice what happens when you do this? Let’s undo that for a moment.
What’s happening is that WordPress doesn’t recognize this as a separate paragraph because there’s no space after the heading text. As soon as you put a space there and add a heading 2, now it works. So that’s something to consider.
Here’s another example of that. There’s no space between pasting lists and the paragraph here. As soon as I make it a heading 2 it’s going to make the whole paragraph heading 2. To avoid that what we want to do is hit enter and then make it heading 2. At that point, if you want to get rid of that extra space, you can.
So there can be a little bit of fiddling around that you end up having to do. Note that these are no longer list items. I can select them and hit bulleted list and now they are list items. This is another way you can insert text from Google.
Something to note is that because there’s a space in here when I select that and hit heading 2, it doesn’t affect the underlined paragraph. This has to do with whether or not a space actually exists above and below what you’re selecting as a heading.
As you just saw when I deleted that it took this heading text and turned it into paragraph text. You can see in the text view that the heading tag was deleted. When that happens you just have to adding the heading back in. So this is not absolutely as straightforward as you like which is something to consider when you start doing this. If we view the page though it’s going to look pretty good now.
Adding Text from a Plain Text Editor Like a Notepad
There’s one other way to do this. We’re going to add a new page and then paste plain old text from Notepad. So if you’re using some software that does insert an awful lot of style tags and things like that you can just paste the text into Notepad first. Then select it, copy it and paste it.
There is a downside to this and that is there is no line wrap. Notepad has built in line breaks. So while you won’t have any formatting issues, you will still need to delete the space a the ends of the lines so that it fills out the text editor properly.
It doesn’t matter if you paste this in the visual view or if you use the Paste as Text icon here. It’s actually even a little worse if you paste it in the text view, as you can see here. So that’s the downside of editing or inserting text like this inside of the visual view of the text editor.
Deleting Text from the Visual Editor
I do recommend that when you choose to delete something from the visual editor, that you go over to the text view or HTML editor and make sure it actually got deleted. Sometimes what happens is the text will be deleted but the tag around it will remain.
I’ll delete this heading here in the visual editor and when I go to the text editor, we still have the h1 tags. And those tags are still going to take up space or do odd things. If odd things happen after you have deleted something, whether it’s extra spaces or something else suddenly becomes a heading, then take a look at it in the text editor. This is telling you that there’s an empty h1 tag that as soon as we get rid of it, the problem goes away.
Recap of Posting Text into WordPress
The clear winner for pasting text into a Page or Post is doing it from Word.
Dennis asks, do doc files work as well as docx? Yes, they do. John asks, does it work with Word 2013? Yes, it does.
Richard asks, what about using breaks in Google docs? I don’t use breaks in Google docs so I’m not sure. I’ll try that. Let’s insert a page break and see what happens. I’ll go back to the WordPress page again and paste it directly. It doesn’t look like anything happened. I added that break between the first and second paragraph. Well, I do have bit larger space. What happened was it added two non breaking spaces.
In any case, you can see that it’s still not flawless. I don’t use Word Perfect so I don’t really know how Word Perfect might paste into it. There are probably some other text editors that you use so you may need to play around with this a little bit. But, as I said, pasting from Word does in fact go pretty smoothly with the least amount of issues. It used to be the other way around, that pasting from Word caused huge problems.