We love WordPress, but it can also be frustrating sometimes when it doesn’t work flawlessly with another platform or integration. A lot of you are business owners and bloggers who have to deal with content creation for your sites on a regular basis. More often than not this is done via Google Docs because it is super easy for people to share drafts and collaborate in real-time for free.
However, when it comes to moving from Google Docs to WordPress, this is where things get messy, as much of your formatting is lost or breaks. And it soon becomes a WordPress publisher’s nightmare. Check out these seven tricks to help make working with Google Docs and WordPress a little easier.
The Issue with Google Docs and WordPress
It is no question that Google Docs is probably one of the most popular platforms when it comes to online document sharing and editing. Microsoft Office 365 is really its only competitor.
In fact, if we take a look at Google Trends for “Google Docs,” you can see that over the past 12 years interest around it has been steadily increasing. Google Docs is completely free to use and that is why it has become a popular tool for content creators, bloggers, and writers.
So let’s dive into the real issue. Let’s say you hire a writer to put together an article for your blog. They put together the draft in a Google Doc and send you a link so you can take a look and approve it. Perhaps you make a few edits and then are ready to move it into your WordPress site. Typically you would simply copy and paste the contents from your Google Doc into the WordPress visual editor. But what happens, in reality, is that this results in all sorts of formatting issues.
Below is an example Google Doc we are going to use. So we select all the content and copy it to our clipboard.
We then go over to our WordPress editor and paste it. The first issue you have is that typically there will be extra line breaks in-between paragraphs, even though in the Google Doc there is literally only one line break.
It gets worse though, if we take a look at the text and or code view of it, here is what it looks like. You can see that all of this extra unnecessary code is being added.
Extra lines breaks are being added inserting this code.
When you copy from Google Docs to WordPress it creates extra span styles everywhere.
<span style="font-weight: 400;"> </span>
When you copy from Google Docs to WordPress and have lists it creates extra font-weights styles.
<li style="font-weight: 400;">
So basically you are left with a mess in your code. And even if you ignore the code, which you shouldn’t, you would still have the line breaks everywhere. On a 2,000+ document, this is a lot of backspacing to be done to fix it. And you are still left with underlying code which really should be fixed. This is a huge waste of time. It can also affect your performance. Yes, it is at a very minimal level, but even HTML makes up your overall total page weight. So what can you do about it? Well, follow the tricks below.
Note: It is important to know that Office 365 Word doesn’t have the same issue with span styles and font weight. However, it still has the spacing issues when copying across to the WordPress editor. Also, you might be wondering about images. Images don’t copy across either, but you should generally upload those separately anyways. Images should be compressed, as well as strategically naming the file for SEO purposes. That’s right, even image files names matter when it comes to SEO.
Google Docs to WordPress
Below are some tricks that can make your workflow from Google Docs to WordPress less painful and streamlined.
- Move to the Gutenberg Block Editor
- Trick to Clear Formatting
- Use Wordable to Easily Move Google Docs to WordPress
- Mammoth .docx Converter Plugin
- Jetpack and Chrome Extension
- gdocs2md Google Apps Script
- Give Writers a WordPress Account
1. Move to the Gutenberg Block Editor
Now for the good news! If you’re using the new Gutenberg block editor that shipped with WordPress 5.0, a lot of these issues simply don’t exist. For example, if we copy and paste the exact same content we used above into the block editor, you can see below that it comes out quite nice.
There are no extra span tags (no messy source code) and all the paragraphs, images, and headers are nicely placed into their own blocks. So if you haven’t moved to the new Gutenberg block editor yet and do a lot of writing, this could be one very compelling reason.
We know many of you have disabled the Gutenberg editor and are still using the Classic Editor in WordPress. Change is sometimes hard and perhaps you simply need more time. Due to the fact that the Classic Editor is being supported through 2021, some of you may have simply put off moving to a later date.
If you do a lot of writing with Google Docs and WordPress, moving to the new Gutenberg Block Editor is something you may want to seriously consider. It copies content across great! We still recommend you upload images separately for SEO reasons.
The first little trick is a little weird, but it works, and involves a simple copy and paste a couple of times along with utilizing the clear formatting button. Follow the steps below to get quickly clean up the formatting.
Copy and paste the contents from Google Docs into your WordPress Visual Editor as normal. Select your text and copy it again to your clipboard.
It sounds weird, but create a new temporary blank post draft by clicking into “Add New” under posts in your dashboard. Then paste the content again from your first post that you just copied. When you paste this the second time it will automatically clean up the extra line breaks.
Then copy and paste the contents from your temporary draft back into your original post. Highlight all of the content and click on the “Clear formatting” button in the visual toolbar editor. This will remove the span styles, and font weights. This trick retains all of the headers (h1, H2, H3, etc.). The only thing it doesn’t retain is the bold. If you need to retain every 100%, then check out trick 2 and 3.
And here is an example of the text and or code view after the steps above. As you can see, it is as clean as a whistle.
Now you can continue to work with writers and bloggers using Google Docs and it won’t slow down your workflow. All it takes is a simple copy and paste a couple times and using the clear formatting button.
For some of you, this may not matter that much. But for those of you who use both Google Docs and WordPress a lot, this might just be a lifesaver! We use this trick ourselves every day. When we originally went to find a solution we even were going as far as converting to Markdown and then moving back into WordPress. Little did we know, all it took was a simple copy and paste, plus clearing the formatting, which gets you to almost near perfect.
The second option you have is to use a premium service called Wordable. This was actually created for the very problem we described above, and that is, there has not been a good solution to move Google Docs to WordPress. Basically, with Wordable you can draft and collaborate in Google Docs as normal. When you are ready, there is a one-click button import to your WordPress site. It retains all your tags, headers, bold, bullets, italics, and even your images.
They have a free plan which allows you to give it a try. It comes with unlimited free exports for 24 hours and 2 free exports after that. You can hook it up to one WordPress site. If you need more exports and the ability to export to multiple WordPress sites the premium version is $19/month. While this does sound costly, if you use Google Docs on a daily basis, this service definitely pays for itself.
The two possible cons for some is that you have to give them access to your Google Drive as well as your WordPress site (with the plugin). This might be an issue for those concerned with security. We would personally love to see a 3rd party, standalone exporter. Follow the steps below on how to easily export from Google Docs to WordPress.
Sign up over at Wordable for a free account. It will ask for permission to your Google Drive.
Add your WordPress site under Settings and download and install the plugin.
Search for the document in your Google Drive list and click on “Export to WordPress.” This will create a draft of the article on your WordPress site.
Click on the “Published as Draft” link or visit your WordPress dashboard to examine the post.
And here is how it looks in the WordPress editor. All the formatting came across perfectly, no extra code. And even the image came across.
Also, as far as the images go, when you upload an image to Google Docs, it actually does retain its filename. So if you instruct writers beforehand to name their images for SEO purposes, it will then follow through if you are exporting using Wordable. Otherwise, if they don’t. We would recommend re-uploading all of your images, which could be a pain.
Images exported from Wordable also go directly to your WordPress media library which means they can be compressed with a third party image optimization plugin. As you can see, Wordable can be a very fast and effective option if you need something to export from Google Docs to WordPress and retain all the formatting.
A third solution that works quite well is to utilize the free Mammoth .docx Converter WordPress plugin. This is designed to convert .docx documents, such as those created by Microsoft Word, and convert them to HTML. The plugin currently has over 10,000 active installs with a 5 out of 5-star rating. It also has basic support for the Gutenberg editor.
Download, install, and activate the free Mammoth .docx converter plugin.
Next, you will want to download your Google Doc as a Microsoft Word .docx document.
In WordPress, create a new draft and scroll down to the bottom. You will see a new option for the Mammoth .docx converter. Click on “Choose file” to select the .docx file you downloaded from Google Docs. Ensure that the “Visual” option is selected, and click on “Insert into editor.”
We use this all the time, even on documents that are 4,000+ words (note: it will take longer to insert on larger documents).
The great thing about this method is that it will clear up all of the formatting issues and also bring along the headers, bold formatting, lists, and images. And yes, images are named with the original file name. Below is an example of how it looks in the Visual Editor after importing.
The one thing it does leave behind is a strange anchor text, such as:
<h2><a id="post-264-_1e9slkz7q807"></a>First Header</h2>
You can easily strip out all the anchor tags in one fell swoop using a regular expression. Simply copy and paste the “text” version of the document into a text editor such as Sublime. Click on
.* to enable regular expressions. Then input the following into the “Find” field:
This will find all the random anchor tags. Simply “Replace All” with nothing. And like magic, all the random anchor tags are gone! You can then paste your text back into the “text” version of WordPress.
Another solution is to use Jetpack, along with their free Chrome extension. One thing to be aware of though is that JetPack does add additional requests to your site, and it requires things such as XML-RPC and the JSON API to be enabled for it to function.
You can download Jetpack from the WordPress repository, or by searching for it within your WordPress dashboard under “Add New” plugins.
Upon activation, you will need to connect Jetpack to WordPress.com.
Then install the free WordPress.com to Google Docs Chrome extension. You will have to give it permission to access your documents.
Then in Google Docs click on “Add-ons” and select “WordPress.com for Google Docs.” Then on the right-hand side, you can click on “Save” and it will create a post in your WordPress site.
And here is how it looks in the WordPress editor. All the formatting came across perfectly, no extra code. And even the image came across, along with the image filename.
You can also use this g2docs2md Google Apps Script. It simply converts a properly formatted Google Drive Document to the markdown (.md) format which you can then use in WordPress. While the script does export images to a separate folder, we probably only recommend using this script for documents where you’re worried about text and placing images manually after the fact. It works great though for large documents!
After setting up the script you get a nice little “Markdown” option in Google Docs you can use both to view markdown or export to a local file (as seen below).
The last option you have is to simply create WordPress accounts for your writers and require that they create everything entirely within the WordPress editor. For some, this might be a better solution, but there are also a lot of companies that don’t want to have to worry about managing author accounts.
- Author: somebody who can publish and manage their own posts.
- Contributor: somebody who can write and manage their own posts but cannot publish them.
To create an account for a writer simply click on “Add New” under Users in your WordPress dashboard and assign the role you want them to have.
You could even take this a step further with a permissions plugin like the User Role Editor. But even with correct roles and permissions setup, letting more people access to your WordPress dashboard still weakens your overall security. Just make sure you are careful when adding accounts for people you don’t know.
If you work with writers who use Google Docs a lot, or perhaps you are a writer, hopefully, one of the above tricks and recommendations will help speed up your workflow. If you haven’t yet moved to the new Gutenberg block editor, this may be another reason to do so, as it could make your life a lot easier. 😉
What are your thoughts? Have you struggled with the Google Docs formatting issue as well? If so, let us know below.