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 which 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 five 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 5 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.
Google Docs trends
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.
Google Doc example
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.
Google Docs to WordPress spacing issue
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.
Google Docs to WordPress span style issue
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
It’s kind of surprising that these issues are still happening 2017, and we are curious why they aren’t being discussed more in the WordPress community. We personally know a lot of you writers out there are using Google Docs. We use it as well. Thankfully, there are a few tricks you can use to make your workflow from Google Docs to WordPress less painful and streamlined.
1. Trick to Clear Formatting
The first little trick is a little weird, but it works, and involves a simple copy and paste a couple 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.
Copy contents in WordPress editor
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.
Temporary draft in WordPress – No more 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.
WordPress clear formatting
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.
Clean formatting text view
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.
2. Use Wordable to Easily Move Google Docs to WordPress
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.
Wordable export to WordPress
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.
Exported google doc to WordPress
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.
Wordable image file names
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.
3.Mammoth .docx Converter Plugin
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.
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.
Google Doc download as .docx
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.”
Import .docx to WordPress
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.
Regular expression in Sublime
4. Jetpack and Chrome Extension
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.
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.
Export Google Docs to WordPress with Jetpack
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.
Google Docs Jetpack example
5. gdocs2md Google Apps Script
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).
Export Google Docs to markdown
6. Give Writers a WordPress Account
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.
WordPress essentially contains six different user roles. For authors and writers you will probably want to choose one of the following, based upon what you want them to have access to:
- 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.
Give writer access to your site
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. And perhaps one day we can simply copy and paste directly from Google Docs to WordPress without having to do anything! The team at Wordable definitely have the right idea going. Although this is going to get better with Gutenberg and WordPress 5.0.
What are your thoughts? Have you struggled with the Google Docs formatting issue as well? If so, let us know below.