Publishing MS Word Content in WordPress

There are 3 ways to blog post from Microsoft Word:

  1. Simple Copy and Paste from Word (Wrong Way: leaves stray formatting, no pics)
  2. Publish to Blog  (Good: but has it’s issues, plain text and no pictures)
  3. Paste from Word – W-Button in visual editor, drag and drop pics to media library (Better, ease of use with no HTML requirement – Reason for this tutorial

CODE ALTERNATIVE: Paste plain text in visual editor T-Button, edit in text editor, drag and drop pics (Best, but requires HTML programming skills, above the pay grade of this article. Requires prerequisite course in HTML programming.) Why would you compose with Word if you are a programmer? This is not a valid Word option, this is the job for a plain text editor!

Both Option #2 Publish to Blog, and Option #3 Paste via the W-Button require the use of the WordPress visual editor to format and add pictures. While formatting with the text editor is most precise, it requires knowledge of Hypertext Markup Language, HTML.

For most bloggers, already familiar with a word processor, the use of the visual editor is a better choice. This tutorial explains how to compose your draft in Word, then properly Copy and Paste via the Paste from Word W-button in the WordPress visual editor.

1. Publish to Blog

The first method to post from Word is to directly Publish to Blog, though support for this feature is waning from both WordPress and Microsoft. This is a sample Publish to Blog:MS Word to WordPress

In the above example, I published my draft post without pictures or text formatting. It’s better to let WordPress handle the HTML formatting or Word may offer non-compliant formatting tags (think “reveal codes” in WordPerfect).

I also needed the visual editor to drag and drop my image to anchor them in HTML and add alternative text for accessibility or the image will free-float (produce random appearance) and your images will not be web accessibility compliant (no alternative text – alt text). The final edit of both text and pictures should be done via the visual and/or text editor.

Why Word?

2. Copy and Paste from Word (requires visual editor)

You could choose to publish to blog (limited support and functionality) or simply prepare your blog post draft in Word and Copy and Paste to the visual editor for final edit. Copy and Paste from Word is far easier and, unlike publish to blog, will always be supported.

Many non-programmer bloggers are already proficient in composing their draft in Word and are familiar with Copy and Paste. Editing in the visual editor is most like what they are already familiar with.  If you were already familiar with HTML programming, composing in a plain text editor like Notepad++ or TextWrangler and formatting via the HTML text editor would be ideal.

But for the majority of non-programmers, we’ll demonstrate editing with the visual editor. From the WordPress administrative dashboard, select the WordPress Visual editor by clicking on its tab.

Visual vs Txt Editor

  • To perform the Word to WordPress workaround we are going to need a few extra tools. Lets call them “the plumber tools”, because we find them below the Kitchen Sink.
  • To locate the additional formatting tools, click on the last icon on the top row to the right of what appear to be an X (Distraction Free Writing Mode (Alt+Shift+W).
  • If you hover your mouse directly over the button it reads: Show/Hide Kitchen sink (Alt+Shift+Z). When you hover over the Kitchen Sink, it looks like this:

Kitchen Sink Alt+Shift+Z

  • The Kitchen Sink adds another row of handy formatting tools for the visual editor.
  • The Kitchen Sink tools include the: Formatting tags, Underline, Align Full, Select Text Color, Paste as Plain Text, Paste from Word (which we want to use), Remove formatting, Insert custom character, Outdent, Indent, Undo, Redo, and Help.

Kitchen Sink Toolbar

  • The button to the left of it that looks like an X is also a very handy button if you are used to the full-screen, distraction-free capability of a word processor.
  • To exit the distraction-free full screen, click to the left of the centered toolbar at the top of the screen that says: Exit fullscreen.Exit Fullscreen

Once the Kitchen Sink is enabled, you can now format your text from the Kitchen Sink.

  1. Dump some dummy (Lorem Ipsum-ish) text into any version of Word.
  2. Open the document you wish to paste from, select by highlighting Edit, Select All including graphics, tables, textboxes etc. or use the Windows Keyboard shortcut Ctrl+C or Mac Cmd+C copy selection to clipboard click on the area of the document you wish to import to
  3. and then Click the Word briefcase Paste from Word button. Looks like this:W Paste from MS Word Button in the Kitchen Sink

Click on the Paste from Word (W briefcase) button.

  • You will now be able to paste your text clipboard from MS Word into the WordPress visual editor.
  • The W briefcase button is “Paste from Word”, while the T briefcase button is “Paste plain text”.
  • No matter which button you select (Paste from Word-W or Paste from Text-T) button both have the same effect of invoking a format filter.

Note:

W-Paste is not the same as a simple Copy and Paste in the visual editor window.

Do not simply select (Cntrl+C followed by a Cntrl+V in Windows) or (Cmd+C followed by Cmd+V in Mac) which is a simple Copy and Paste from clipboard. This may also paste unseen and undesired formatting codes. These formatting codes can even come from Notepad, WordPad, Google Docs, any OpenOffice or other application, XML included. Use the W-Paste option!

  • Going through the Paste from Word-W button has the advantage of stripping out All unwanted formatting codes by invoking the following filter:
  • Click Insert to complete the Paste operation and strip out any undesired Word formatting codes and objects. Be sure to add any desired pictures thru drag and drop to the media library and add alternative text for web accessibility.

Paste from Word-W Button

Conclusion:

  1. You can achieve a more desirable result with the WordPress visual editor than you can with Publish to Blog.
  2. Copy and Paste text with the W button and finish formatting with the visual editor.
  3. Drag and Drop any images into the media library.
  4. Be sure to preview the document. If necessary, fix any issues in the text editor.

For More Publish to Blog Information see…

Post to Blog from Word 2007

Word image drag & drop into media library

This is a sample Post to Blog
from Word2007 to WordPress.com

  • This feature was dropped in Office for Mac 2011 and its support in Office University and Office 365 is suspect.
  • You cannot post pictures without an image provider, WordPress.com doesn’t support picture upload. This was posted with the no picture option.
  • You must instead then edit your blog through the visual editor and drag and drop photos with alt text using the media library.
  1. You can also edit your post using the Kitchen Sink Paste from Word briefcase tab or clipboard, (Copy) CNTRL+C and (Paste) CNTRL+V.
  2. Text only is pasted, no images or objects, the WordPress clipboard strips out any unwanted markup tags that will interfere with HTML.
  3. You may still need to check your plain text in the text editor for HTML markup such as blockquotes or cite.

MS Word to WordPress

For years publishing from Word to WordPress was as easy as pie, or at least as easy as, Publish to Blog. Publish to Blog from Word worked through the first 41 version of WordPress, a long time, from the 2003 launch of WordPress v.7 through the first five years, until version 2.5.1. You can still find demo videos of this functionality in v2.5.1 on WordPress.com.

Shortly after that, things broke down between Microsoft and WordPress. Publish to Blog has not been fully supported, since 2008. It’s not completely broken, as I demonstrate in this example Publish to Blog draft post from Windows 7 and Word 2007 (what the college uses in the lab) to WordPress.com.

Publish to Blog PreviewIn the above example, I published my draft post without pictures or text formatting. It’s better to let WordPress handle the HTML formatting or Word may offer non-compliant formatting tags (think “reveal codes” in WordPerfect).

I also needed the visual editor to drag and drop my image to anchor them in HTML and add alt text for accessibility or the image will free-float (produce random appearance) and your images will not be web accessibility compliant (no alt text). The final edit of both text and pictures should be done via the visual and/or text editor.

If you’re an HTML programmer, you use the text editor, so this visual editor tutorial likely won’t pertain to you. Feel free to fast forward to the conclusion of the problem between Word and WordPress. But for the tens of millions of Microsoft Word users that simply want to publish to blog without a crash course in HTML, this visual editor workaround is key.

MS Word, since version 2007, has had the ability to publish to blog, including 2010, 2013.
To duplicate your own test of publish to blog:

  1. Click File > New > New Blog Post > Create.
  2. Click Blog Post > in the Blog group > click the arrow next to Publish > click Publish.

From the menu looks like this:

Publish to Blog
MS Word File New >Blog: Publish to Blog

Let’s look at the results:

This is what a fully functional publish to blog used to look like with embedded pictures and objects. I had to save it as a .png file and drag and drop through the visual editor. MS Word to WordPress

Conclusion:

Who is responsible for the failure to support web standards and when are they going to fix it? Microsoft has always been proprietary in its support of web protocols. Initially the browser was part of the operating system and not an independent application. IE 7 was the first to adopt relative web standards, not fully realized until version 10. The Microsoft Office was never web-compliant, choosing to deploy with intranet SharePoint, rather than internet cloud-based solutions. Microsoft Word alone supported three different versions of Save As… web page for static web sites (single-file Web page, Web page, and Web page-filtered), none of which ever really worked well.

That’s why Content Management Systems (CMS) were developed for dynamic web logs and publish to Blog first appeared in 2007 and 2008, through 2010-2013. Microsoft still supports Publish to Blog through the XML_RPC (Extensible Markup Language Remote Procedure Call) and the ATOM Publishing Protocol. AtomPub, or APP, is a simple HTTP-based application-level protocol for publishing and editing Web resources (where RSS feeds came from). WordPress, on the other hand, has dropped native support for these protocols on WordPress.com back in version 2.5.1 last known supported. You used to be able to choose what protocol you used in Settings >Writings, but no longer, though RPC is still built-in through SQL which is why this still works partially for text.

Since WordPress.com does not support plug-ins, it’s not likely that Publish to Blog will ever be restored. Publish to Blog does still work with Google Blogger through a plug-in, so it’s possible future implementations of WordPress.org may support Publish to Blog again through a plug-in similar to Google Blogger. Microsoft has since withdrawn support for its Windows Live Writer which was included free with Windows Live Essentials for Microsoft’s own Windows Live site. Windows Live Writer was supported through Windows 8, but a recent test with the recent Windows 8.1 shows it no longer works. You used to be able to publish to blog with Live Writer also, but Publish to Blog support is waning from Microsoft.

A final word about all office documents and accessibility. It’s not the fault of Microsoft Word alone, but any open office document from any software vendor office documents embed their own formatting code which causes them to require a viewer program or appear differently depending on the browser and format codes. Ohio State University Web Accessibility Center Publishing Office Documents to the Web describes the problem with all application programs:

As a web publishing tool it (MS Word) is a little less than ideal and produces very messy HTML. The same applies when using Google Docs, OpenOffice, or other word processors.

In addition application programs do not meet accessibility requirements required for internet deployment (alt text must be added) so all media library must be filtered and properly HTML anchored. There are are formatting strippers available paid and free (TidyHTML) which can filter formatting tags, but the sure method to publish MS Word content in WordPress is to use the Paste from Word (W Briefcase) button available in the Kitchen Sink (which automatically filters tags) and drag and drop media files in the WordPress visual editor.

How to add a Child Theme

To add functionality to your themes, you can additionally elect to install child themes to add functionality and enhance appearance. To do this go to Dashboard Appearance and select Manages Themes, Install Child Themes. Choose from the available child themes to install. For the purpose of this demonstration I selected The 2011 Child Theme since my Theme is 2011.2011 Child Theme Installed

To customize the child theme and view the changes, go to Appearance, Theme Customize and view from all the available customizable options:

child theme changes

You can now change:

  1. the Site Title and Tagline
  2. Colors
  3. Layout
  4. Header Image
  5. Navigation
  6. and Static Front Page

Color is the easiest to see. My text now appears in blue, instead of black

Colors Changed

Perhaps one of the more useful features is that you can add a static front page to your site.I found this most useful as the first thing I did on my site was to post a sticky note so that people would see a familiar welcome notice everytime they land on my site as they would expect to on a static web site. It is very disconcerting for non bloggers visiting a dynamic site to see the non-recursive posts listed. This maybe fine for bloggers, but it disorients ordinary web traffic. They aren’t sure if they are on your page or not, esp if you have guest bloggers or are a MAB (multiple Author Blog). Here is where you set that:

static front page

 

This editing of the child theme can now also be done with the code editor once the child theme is enabled. Go to Dashboard, Appearance Editor to Edit Themes.

The current child theme font is Times Roman it can be edited manually by changing the font name. For example: Change Times Roman to Arial.

See Before Example:Before Times Roman

See After Example:After Arial

Here is the difference:Child Theme Edit Comparison

Add a Plugin to WordPress

Catholic Liturgy CalendarWho doesn’t need to know what day it is. Did you know there is no calendar native to WordPress? While you can add a calendar to a page (embed a Google Calendar), you can also install a variety of available free calendar plugins. How would you like a specialty calendar that tells you when Christmas or Easter is coming as well as offer the reading of the day? This article describes how to add the free calendar to WordPress. First, you should know… Continue reading

Aside: Live Writer

Aside

I noticed when publishing the Post: Liver Writer to WordPress from a Windows 8 machine that I had to clean out my Crome extensions that were vulnerable to “Text Enhancements” an adware virus from Windows that I had to clean out my Chrome extensions to this Windows malware. Another reason I prefer to blog from my Mac rather than Windows.

Live Writer to WordPress

Since the MS Word to WordPress is no longer currently supported by WordPress, you must use Windows Live Writer to publish to WordPress blog or else use the built-in Visual Editor in WordPress and cut and paste plain text using the Kitchen Sink Word paste feature.

I have added the Clipboard Live feature to include images as well. This is a clipboard live image pasted from the plug-in. Continue reading