Winnetka-Northfield-Glencoe Chamber of Commerce

Winnetka-Northfield-Glencoe Chamber of Commerce

Importing content from a Word document

While it is understandable to want to be able to insert the contents of a Word document “whole” into the post of a WordPress site in many cases this is not realistic.
Word styling can often be in conflict with site based CSS rules that govern typographic styles, and these conflicts produce unpredictable results.
Images, charts, and other media inserted into a Word document will not transfer, but rather need to be inserted into the post via WordPress’s media management controls.
Links often transfer … but again this is not something that will cross over 100% of the time.

Pasting Word Content into the “visual” tab:
=> Open Word Document
=> Select All
=> Copy
=> Login to site
=> Posts
=> New Post
=> click in the main content area
=> cntrl + v (in windows)

SOURCE DOCUMENT

01-word-doc

HOW IT WILL LOOK IN THE “VISUAL” TAB

02-pasted-word-in-visual

HOW IT WILL BE RENDERED IN THE BROWSER

04-rendered-visual

You can see that not everything behaves the same way it does in the source Word document – this is because the coding used in a word processor is similar but not the same as what is used in a browser!

THE WAY THE WORD CODE LOOKS IN THE TEXT TAB

03-rendered-code

IN GENERAL THE BEST APPROACH IS TO ALLOW THE WEBSITE’S STYLESHEET CONTROL HOW THE CONTENT WILL LOOK!

STEP 1: PASTE WORD CONTENT INTO THE TEXT TAB – THIS WILL “WASH OUT” ANY WORD GENERATED STYLING

05-word-pastred-into-text

STEP 2: EITHER INSERT THE APPROPRIATE HTML TAGS VIA THE TEXT TAB:

07-coded-version-text

STEP 2: OR USE THE WYSIWYG TOOLS IN THE “VISUAL” TAB

08-coded-version-visual

THIS APPROACH WILL YIELD A MORE SUCCESSFUL RESULT:

09-rendered-coded-page

THE WYSIWYG TOOLBAR IS FOUND BETWEEN THE TITLE FIELD AND THE MAIN CONTENT FIELD WHEN YOU ARE IN THE “VISUAL” TAB

10-toolbar

IN GENERAL TEXT SHOULD EITHER BE ALLOWED TO RENDER IN DEFAULT BODY TEXT STYLING OR ASSIGNED A HEADER TAG

11-style-in-visual

TO LINK, HIGHLIGHT WHAT SHOULD BE LINKED AND SELECT THE “CHAIN” ICON

12-linking

HERE IS A BREAKDOWN OF THE OTHER WYSIWYG CONTROLS

11-wysiwyg-controls

BOLD – bolds text
ITALIC – renders text as italic
STRIKETHROUGH – draws line through text
UN-ORDERED LIST ITEM – “bullet point”
ORDERED LIST ITEM – numbered list item
CITATION – a quoted item (does not always have a style attached to it)
HORIZONTAL RULE – horizontal line (spans page width)
LEFT JUSTIFY – justifies text left
CENTER – centers text
RIGHT JUSTIFY – justifies text right
CREATE LINK – activates link popup
BREAK LINK – breaks an existing link
MORE TAG – not advised, use the excerpt field instead
HEADING – assigns heading style (while h1-h6 options are available options are usually only active down to h3)
UNDERLINE – underlines text
JUSTIFIES BOTH – justifies text left & right
FONT COLOR – assigns color to text (using this option can be dangerous!)
PASTE AS TEXT – equivalent to using the text tab, washes out Word styling
CLEAR FORMATTING – will “cleanse” content of applied styles
INSERT SPECIAL CHARACTER – for characters that aren’t necessarily on your keyboard
DECREASE INDENT – problematic do not use unless you really have to
INCREASE INDENT – problematic do not use unless you really have to
UNDO – undo last action
REDO – redo the action