WordPress 101 – Post or Page Editing – The Visual Tab

Applies to Version(s): WordPress

The WordPress editor is the first stop for adding or editing a post or page.

The editor has two tabs — Visual and HTML — where the Visual tab is a “WYSIWYG” editor.  The acronym stands for “what you see is what you get” — and this is generally true.  Additional formatting of your published content may be applied by external style sheets — this may cause minor differences in the “final look” of your content after publication.

A large number of action icons are contained in the Visual tab of the WordPress (WP) page/post editor — the image below will assist beginners as they navigate the WP editor options.

Clicking the image below will access an enlarged version suitable for printing and ongoing reference.

WordPress Infographic – Page and Post Editor – WP Visual Tab

The first row of icons is always visible in the Visual tab of the WP post editor, by default.

However, clicking the the final icon of the first row, the “Kitchen Sink” — toggles the visibility of the second row of icons (on and off).

For users new to WordPress, the majority of the Visual Editor’s tabs are self-explanatory — or are not of immediate “must know” importance. For example, those familiar with desktop publishing software will recognize commands such as bold, italicize, underline, and so forth.  More advanced icons such as inserting special characters can be learned on an “as needed” basis.

To apply an icon’s action to a given section of a page or post, select the desired text with your mouse.  The, click the appropriate icon to apply the command to the selection (e.g. to italicize a section of text, select the text with your mouse, then click the “italics” icon).  Such formatting will appear instantly in the WP Visual Tab Editor.

As a reference and tutorial on how to use the Visual Tab’s icons, here is a plain-English description of what each of the Visual tab icons in the WordPress Page/post editor does, and what the result of its application will look like.

The “infographic” — the image — above can be used for reference, and printing the large edition will allow you to make notes and additions.

The WordPress Page/Post Editor – Visual Tab – Row One

Bold — selected text will be styled as “strong” — example.

Italics — selected text will be styled with “em” (emphasis) markup — example.

Strikethrough — the selected text is styled with “del” (delete) markup — example.

While strikethrough formatting can be used to demonstrate corrections, revisions, or redacted text, the strike-through is also commonly used by authors with the lighter intent of alienating their readers conveying sarcastic humor.

Unordered List — the selected text will be output as an unordered (bulleted) list, where “ul” begins the list, and “li” (list items) form the bullet-points within the unordered list.

  • UL example
  • Another UL list item

Ordered List — the selected text will be output as an ordered (numbered) list, where “ol” begins the list, and “li” (list items) form the numbered points within the ordered list.

  1. OL example
  2. Another OL list item

Block Quotes — the blockquote is primarily used for verbatim citation of a sentence or two from another source — a book, blog, movie quotes, etc. In some cases, often combined with additional formatting, blockquotes may be used by WordPress authors to highlight a major point of the text, effectively “self quoting” from the article containing the quote. Example of a blockquote citation:

You want a toe? I can get you a toe, believe me. There are ways, Dude. You don’t wanna know about it, believe me.

Left Align — selected text, typically a paragraph, is aligned left. The left side of the text content will be in a smooth line down the page, the right side will be uneven. This tutorial primarily uses left-aligned text, the default for WordPress and most publications in print and online. As a result, this tutorial is its own example for the left-aligned text option.

Center Align — selected text, typically a paragraph, is aligned to the center of the container. Both the left and right sides of the content will be uneven — often used for titles or short passages due to the reduced readability of long stretches of centered text.

Sample centered text.

Right Align — selected text, typically a paragraph, is aligned right. The left side of the text content will be uneven, while the right margin of the text will be a smooth line down the page.

Sample right-aligned text.

Add Hyperlink / Link — the selected text will be a hyperlink, or link, to another destination on the internet. Usually, links are differentiated from non-linked text by a contrasting color, often combined with an underline. When an input device like a mouse “hovers” over a link, the cursor responds, and additional feedback such as a color change is typical, as can be seen in this — example.

Removing a Link — a form of “undo” for existing links in your pages and posts, the selected — presumably linked — text will no longer be linked to another destination.

Spell-Checking — a basic “TinyMCE” spell-check utility available in several languages by default — clicking the icon will cause a brief delay while the contents are reviewed, after which underlined words are identified for further review. The library is simple and composed primarily of “dictionary words” — for example, “WordPress” will show as a misspelling.

Combined with native “as you type” spell-check software in most modern browsers (e.g. Firefox, Chrome) the WordPress spell-checking icon provids easy access to a convenient “final review” tool for your post or page content. Words identified as problematic, when clicked, show suggested replacements. The TinyMCE spell-check utility also provides an “ignore all” option, reducing the frequency of suggestions for the same word throughout a given page or post.

Full Screen Composition — significantly expands the composition area from a “box” to a larger area (the height of the browser window) which greatly reduces visual clutter and distraction during periods of composition. Hovering the cursor outside the visual area of the page or post contents will reveal a minimalist set of options, including “exit fullscreen” and an option to “save” as well as a limited set of the icons found in the non-fullscreen Visual editor tab.

Kitchen Sink — this icon provides a control toggle (show or hide) for the second row of the WordPress page/post editor’s Visual tab interface control icons. The image at the beginning of this document shows both rows as visible — however, the second row of icons may not appear on your site until the whole “Kitchen Sink” is toggled to display row two.

The WordPress Page/Post Editor – Visual Tab – Row Two

“Paragraph” and Additional Formatting — clicking this icon results in a dropdown containing several options.  The default action is a paragraph.  The “address” option is used infrequently by most WordPress publishers.

Preformatted text adds the “pre” tag around the selection, often changing the font to a monospaced (each letter is the same exact width in pixels) font family, and with a contrasting background color to accentuate the preformatted area:

Example of the "pre" option

“Headings” 1 through 6 in the Additional Formatting dropdown add the H1, H2, H3, H4, H5, or H6 tag around the selected text.  For reasons of search optimization, note that the H1 and H2 tags are “already used” for page and post titles, and H3 is used for sidebar widget titles.

Limited usage of Heading tags can help create a user-friendly “outline” for certain types of page or post content.  The size, spacing, color, and “font family” of Heading tags provides organizational structure to long-form articles, such as this one.  The title of this how-to tutorial is an H1 tag.  Also used in the content of this guide are H3 tags, in two locations — these H3 Headings separate the major divisions of descriptions for “row one” and “row two” icons available in the Visual Tab WP content editor.

Underline the selected text will be styled as “u” in HTML source — example.

Justify Text — content that is justified provides the smooth edge of “left align” and “right align” — creating columns of magazine-like text with linear edges from top to bottom. In order to justify both the left and right edges, additional space is calculated throughout each line of the selected text, which is usually at least a paragraph in length. The final line of an area of fully-justified text may only have a “smooth” left edge to avoid exaggerated spacing for the final words of a paragraph.

An example of justified text — notice the linear left and right edges, as well as the additional spacing between many of the words in this paragraph — spaces necessary to achieve the visual effect of a justified area. Justified text is as wide as other formats, by default — this paragraph is restricted to half the usual width in order to provide a clear example with fewer words required to relay the idea.

Font Color the selected text will be styled as a “span” with an “RGB” (red, green, blue) color palette value in HTML source — example.

With careful selection, even individual letters can be modified in color — example.

Paste as Plain Text — clicking the icon will open a window into which text held in your clipboard, text that has already been copied — can be pasted as “plain text” without the visual formatting of the original text source. Bold, italics, and other formatting will be removed — however, note that this option primarily removes visible formatting. Some characters, such as “smart quotes” will not be changed to straight quotes.

Paste from MS Word — clicking this icon allows content prepared in a Microsoft Office program such as MS Word or Outlook to be pasted into your page or post with a significant reduction to “hidden” formatting from the original source material. Most visual formatting, such as bold or italicized text, will remain when this copy-paste option is selected.

Remove Existing Formatting — similar to “paste as plain text” above, this action is applied to existing content within the page or post editor, whether or not the content selected was originally composed in the WordPress Editor’s Visual Tab or copy-pasted from another source. Visual formatting of selected text such as bold, italics, and so forth will be removed.

Insert Special Characters — clicking the custom character icon will open a chart of about 200 “special characters” that can be inserted into your page or post content editing interface. Ampersands, language-specific diacritical marks, mathematical, and symbolic characters can be selected for insertion into your post at the point where the cursor was at the time the Special Character icon was clicked. Hovering over a special character in the pop-up displays a larger view of the character (as well as the HTML and numerical designation for a given character).

Indent Selection — selected paragraphs of text — you can chose one or more at a time — will be indented once per click of the “Indent” icon.

Remove Indentation from Selection — selected paragraphs will have the indentation removed. This icon is only accessible when an area of selected text has been previously indented.

Undo Recent Actions — one “undo” — beginning with this most recent action taken — is performed with each click of this icon.

Redo Previous Action — whether or not an action was “undone” with the Undo Recent Actions icon, clicking the Redo Previous Action icon will perform one recent action, with additional “redo” actions on a one-per-click basis.

Help — clicking this icon pops-up four tabs of additional information on “Basics” — a general overview of the wysiwyg TinyMCE editor, “Advanced” Rich Editing concerning HTML, images and attachments, “Hotkeys” — keyboard shortcuts for many of the icon actions described above, plus a few bonus actions, and “About” — which is technical information on the version of TinyMCE and the license under which it operates.