Create a Blog Article from DOCX

Create a website blog article from a Microsoft Word document. I’ve found the best way to use this article is to follow along on a second screen.

• Log in to pecan.org.au/wp-admin
  • Use your personal credentials
• Create a new blog article
  • Dashboard > Posts > Add a New Post
• Give it a meaningful title
  • Use title case
• Save the new article as a draft
  • Click Save draft in the toolbar
• Update the post metadata
  • Navigate to the Settings pane on the right hand side of the screen and choose the Post tab. Then fill in values in the following sections:
    • In Categories,
      • Untick Uncategorised
      • Tick Article
    • In Tags,
      • Add one or more relevant tags. Reuse similar existing tags where they exist. Tag matches rank highly in search, so it’s more likely a searcher will find the article.
    • In Excerpt,
      • Write a short, meaningful summary of the content of the wiki article. This excerpt is what appears in the blog article list page(s). It also appears in website search results. (If you leave this blank it will default to the first lines of text in the article.)

• In Word
  • Word > Edit > Select All
  • Word > Edit > Copy

• Or, In Google Docs
  • Open the DOCX document in Google Docs
    • Docs > Edit > Select all
    • Docs > Edit > Copy

• Locate the empty block
  • This will prompted with Type / to choose a block
• Paste into this empty block
  • Use your browser’s Edit > Paste feature
  • You should see the text of the Word document appear in the WordPress editor.
  • Each Word paragraph will be in a separate editor paragraph block.
  • Lists will appear in a list block.
  • Links should appear, with link text properly formatted for the website.
  • In testing pasting from Google Docs on Windows, I found that images do in fact transfer. They appear as ‘inline’ images attached to the prior text block in the WordPress editor. Inline images may be sufficient for quickly creating an article, but if more control is required, they can be replaced with distinct image blocks. (Covered in detail below).
• Remove heading and image if required
  • The paste may add a redundant heading and feature image to the article. These should be removed at this point as they will be automatically added to the article later.
  • Click on the heading. A floating toolbar will appear.
    • At the right end of the toolbar you’ll see three stacked dots – Options. Click this.
    • A menu appears. Choose Delete. The heading (and possibly also the image) disappear.
  • Repeat for the image, if still present.

For the PECAN website, links should open in a new browser tab, however the default behaviour is to open in the current tab. This can be changed as follows:

• Click on the orange text of the link.
  • A floating toolbar should appear, featuring an Edit link pen icon. Click this.
  • A dialog box appears.
    • Confirm that LINK looks correct.
    • Tick Open in new tab.
    • Push the Save button.

Depending on the exact copy/paste method you use to create the article, images may or may not paste into the new article. If they did paste, and you’re happy with them, then you won’t need to perform the steps in this section. Images added seem to be inline images, which do have some limitations (aren’t added to the media library, don’t allow captions/alt-text/descriptions/searchability, don’t allow text to flow around them, are limited in sizing options…).

If you do need to add images to an article, the rest of this section describes how.

• Save the image from Word
  • Right-click on the image in Word
  • Select Save as Picture
  • Save the image file to a temporary location on disk

• Open the DOCX document in Google Docs
• Right-click on the image
• Select View more actions > Save to Keep
• The image is now saved as a Google Keep note. You’ll need to save it as an image file as follows:
• Open a new browser tab and navigate to Google Keep: keep.google.com
• Locate the newly created image note, and open it
• Right click on the image.
• Select Save image as…
• Choose a temporary location to save the image file, and choose a file format such as PNG or JPG.

Note: Once you have copied an image onto the clipboard, it may be possible to paste it into MS Paint or MacOS Preview, if these are available. In MS Paint it you’d use Edit > Paste, then File > Save As… . For MacOS Preview, you’d use File > New from Clipboard, then File > Export… .

Once you’ve saved your images to disk you’re ready to import them into the WordPress media library.

This import section also applies for the Featured Image. This special image appears in three places on the website: the top of the article, the blog article list page(s), and search results. For consistency, all blog articles should have a featured image. If none are available in the original document, think about providing something suitable – you can search the media library for something that might work. Remember that images displayed on the website should respect intellectual property rights.

• Navigate to the Upload New Media page:
  • Dashboard > Media > Add New Media File
  • You should see Drop Files to Upload or Select Files
  • Press the Select Files button
  • You should see a Windows File Explorer or MacOS Finder window
  • Select the recently save image file(s) and select Open
  • You should see a list of the image files uploaded appended to the Upload New Media page
• Edit image metadata
  • For each image uploaded:
    • Click Edit. An editor page appears.
    • Update Alternative Text, Caption and Description as desired. Here’s how they should be used:
      • Description. (Recommended) This describes the image in the media library, free of context from the article(s) it may be imbedded in. If you’re searching the media library for an image this description may come in handy.
      • Caption. (Optional) May appear below the image in the article. Depends on the context in the article(s) in which it is placed. Therefore I’d suggest it be left blank here in the media library, and only filled in (if required) in the image block editor in the article itself.
      • Alternative Text. (Optional) Intended for a vision impaired person being read the article by a screen reader. Again, probably best to leave blank here, and fill this in in the image block editor.

At this point your new image(s) is uploaded into the media library and you’ve given it a good description. Now you’re ready to insert it/them into the new article.

• For each image:
  • In the WordPress editor, place the insert point at the point in the article where you’d like insert the image.
    • (This would usually be the same place the image appeared in the original Word document).
  • A Type / to choose a block prompt will appear.
  • Click inside this rectangle.
  • A black square with a white + plus sign will appear. Click on that.
  • A short list of recently used blocks will appear.
    • If you can see the image block icon (black for Gutenburg original, blue for Spectra), click it
    • If you can’t see the desired image block icon, choose Browse all at the bottom.
      • A much longer list of blocks appears. The first blocks (in blue) are those added by the Spectra plugin. Later blocks (in black) are the original Gutenburg blocks. Choose an image block icon (Gutenburg or Spectra, your choice.) Click the icon.
    • An image dialog box appears.
    • Choose Media Library
    • A grid of image thumbnails appears, your most recent image(s) appearing first.
    • Select an image, press the Select button
    • We return to the article editor, now with the image inserted at the correct position in the article.

At this point the image has been inserted into the document at the correct point. You may wish to edit the image block to update it’s caption, alt text, size, position, and flow interaction with following text:

• Click on the image
• In the Settings tab in the right panel, you’ll see ALTERNATIVE TEXT.
  • This is for visually impaired website reader – a screen reader will read out this text. Keep in mind that the reader probably has not seen the image very well (or at all). So this description of the image should describe the image, and it’s context in the article.
  • Fill in this field.
• RESOLUTION. Choose a suitable size from Full Size, Medium and Thumbnail.
• Set image alignment on the page.
  • Medium and Thumbnail images can Align left, Align right or Align centre.
    • Left and right alignments allow any following paragraph text to flow around the image (when displayed on the website).
    • You’ll notice a toolbar floating about the image block when it’s selected. Alignment is controlled via the Align icon.
    • Click the Align icon. A list of alignment options drops down.
    • Select a suitable alignment. (Remember that only the Align left and Align right choices will allow any immediately following paragraph block to wrap it’s text around the image.)

By this point you should have a featured image loaded into the Media Library. You can configure the article to use this image as follows:

• Locate the pane on the right hand side of the editor.
• Select the Post tab.
• Scroll in the pane to until you see Featured Image.
• Click on ‘Set Featured Image’.
• The Featured Image search page appears.
• Select the desired image.
• Press Set featured image.

The author(s) of the article should be listed at the bottom of the article in italics.

• Create a final paragraph block in the article.
• List the names of the author(s) of the article.
• Highlight this text.
• Click the / (slash) in the block’s floating toolbar. (Or press command I or control I).
• The highlighted text should display in italic.

Once you’ve proofread the article and are happy with formatting and images, you are ready to publish the blog article on the website.

• Press the Publish button in the editor toolbar.
• Press Publish again to confirm.
• Test the article on the website:
  • Go to the following page in a web brower:
    • https://pecan.org.au/blog2/
    • The article, being most recently published, should appear in the first place on the page. If it’s not visible, return to the editor and confirm that Categories has Article ticked.
  • Review the web page to confirm it is displaying the article as intended.
    • Click on the article. A new browser tab should open, and the article should appear.
    • Scroll through the article to confirm that it is displaying as intended. If there are links, follow them to confirm that are working.
      • If all is good, you’re done!
      • If there are issues, return to the editor session.
        • Fix these issues, then press Update
        • Return to the website and refresh the page.
        • Repeat until all issues are fixed.
  • Repeat the review all other device types: Mobile, Desktop and Tablet.

– Michael Jessen, February 2025