Now that you are acquainted with the WordPress Text Editor, the next thing we’re going to do is look at what happens when you add text from other software. I think it is best to create your content in the text editor when you’re creating pages because you get to immediately see what it will look like on your page. However, that doesn’t work for everyone.
So, if you do your work outside of WordPress in say, Microsoft Word, Google docs or some other office software, you’re sometimes going to have to reformat it once it goes into the text editor. Again, if you create your content here all the formatting you do won’t have to be fixed. Sometimes when you paste content from other sources you get results that you’re not expecting.
We are going to look at adding content from a word document, from Google docs and from a plain text editor.
Adding Text from Microsoft Word
We’re going to start with content added from Microsoft Word. Let’s add a new page and we’ll title it “From Microsoft Word”. WordPress has actually gotten really good at interpreting text from other software. It used to be really bad if you pasted something in from a Word document. You would get all kinds of crap and hidden codes from the document inserted into the text.
You wouldn’t be able to see that extra code when you were looking at it in the visual view but it would show up in the HTML or text view. I used to be able to demonstrate how by pasting in from one Word document into a web page, that you tripled the size of the page load because of all of the hidden HTML that was added to it.
Well, these days WordPress is really good at getting rid of that extra code. This Word document I’ve opened has lots of different kinds of text. It has different headings, it’s got some bold text, it’s got some italicized text and it’s got some lists. These days, this kind of text actually passes through really well. In fact, let’s take a little section of this and make it red. Let’s take another section and give it a yellow highlight.
Check for Extra Code
Now we’ll copy this, come over to our WordPress page and paste it. If you’ve been around WordPress at all, you would expect to get all kinds of junk in here. But in fact, all of that junk got removed except for a couple of non-breaking spaces and all you got was very simple HTML.
Deleting Formatted Text in Visual View
And in fact if you look, you’ve got the bold, the italics, and the headings came through just fine. Because this is actually going to be your heading, you know we should probably just take that out, paste that there and then just delete this. If you leave the deletion there and come over and look at text you’re going to see empty h1 tags because all we did was delete the text.
Let’s come back over here and if you delete it again then what happens is that next paragraph becomes an h1 because deleting here is not deleting your tags. When you delete something like that, that has a tag around it, and you haven’t cleared the formatting first your best bet is to come over to the text view and delete it.
If you look at it you’ll see what happens there when I did that delete, I got rid of the H tag and so now if I want that h3 tag back I’m going to come back over here and add it back. Sometimes though it ends up adding extra spaces. You can see here we’ve got a bunch of extra spaces which you can delete easily. This here is not an extra space, that’s actually the top padding of that heading 2.
Anyway, these days pasting from Word goes nice and smoothly. It didn’t used to be that way but it is quite nice now.
Paste As Text
You might be using other editors that don’t paste that well. And, if that’s the case, you might choose to use paste as text. You click this button and you can paste the content in and then once you’re done pasting you can unclick it and it’ll paste normally. But these days with Word 2016 and with WordPress 4.7 it’s a breeze.
Adding Text from Google Docs
Let’s add another WordPress page and that page is going to be titled “Adding text from Google docs to the text editor”. I actually use Google docs way more than I use Word and the reason I use Google docs is because my staff uses it. Everybody on the team uses it and so it’s just easy to share documents. We don’t publish documents so all the features of Word aren’t really important to us.
There are some anomalies when you take a Google doc and you paste it into a WordPress page. First off, let’s paste it and just like this. Well, I take it back because this actually looks pretty good these days. It looks just as good as it did from Word.
Let’s go look at the HTML, text view of it. The one thing it does do is it adds font weight. It’s added a span style equals font weight 400px. It added font-weight rather than say strong or bold for this text. I’ve got some bolded text here that doesn’t use a strong tag, it uses a span tagged with style equals font-weight 400… oh no everything is that.
Pasting As Text
So that’s not really that great because it is adding some extra code to it that’s not particularly useful. Let’s delete all that and paste as text. Now that it’s all text, switch over to the text view. You can see it’s all just text including the links. So now that it’s all text, you’d come along here and make that a heading. We really have to give ourselves a space for it first and then we can make that heading 2 and again make this a heading 3.
Note that there’s no list there but we can easily make this a list. Since it’s all together like that we actually have to use enter there. You’ve got unlisted at that point and now you’ve got an extra space. So really when you’re pasting from Google docs, you’re really in a position where you have to just reformat the text. You don’t want to use the built-in formatting even though it looks good because it adds all that extra code.
We still have to add the bold and our italics but we can come along and do both of those again. This way you end up doing all this formatting over again.
Paste into Text View
One final way of putting all this in the from Google docs is to actually paste it directly into the text side which automatically always strips away all the formatting. I’ll delete what we have and repaste it here. There’s absolutely no HTML formatting in this at all.
Come back over to the visual view and now you can add in your headings. We’ll make that a heading 2. Note that you don’t add that extra space as you’ve already got it. You can see it’s actually a little bit easier when you’re going from a Google document to just paste in the text view and then come back to visual view to style it.
Pasting Text from a Plain Text Editor
The final way to paste text into WordPress is to do it from a plain text editor. I’ll take this block optimized content that has some formatting, copy it and put it into a plain text editor. I’ll copy it from there and paste it into WordPress. You can see that if you’re pasting it from a plain text editor nothing is coming across. There’s no formatting.
You can now just come along and add your headings, make your list, add bold and so on. It doesn’t matter if you paste it in the visual or text view, you’ll get exactly the same result.
So those are your typical ways of adding content from other text editors. The most user friendly one is at this point Microsoft because it adds no extra code which I really like.