Text Formatting

Visual vs Text Tabs:

Visual Tab

The visual tab is the standard WordPress editor.The visual tab gives you a preview of a basic version of the site as you are editing it.

Text Tab

WordPress editor tab allows Advanced WordPress editors to use html. Most editors should use the visual tab instead. Read more about using HTML

Emphasis in Text:

Bold:

The bold button creates bolded text using the strong tag. It should be used for important text.

HTML

<strong>Important Text</strong>

Read more about the <strong> tag

Italicized:

The italics button creates italicized text using the <em> html tag. It should be used to emphasize text.

HTML

<em>Emphasized Text</em>

Read more about the <em> tag

Underlined:

Avoid using underlined text on your pages, as underlined text typically suggests a link.

Advanced User Tip

Bold and italicize should only be used for “important” text or for emphasis, not only for style changes. As an alternative, you can bold text with the strong class or italicize text with the em class.

HTML

Bold:
<span class=”strong”>bold text</span>

Italicized:
<span class=”em”>italicized text</span>

Add Links Button

Links can be added by highlighting text and clicking the add link button. From here, you will enter the link destination in the URL field. For example, if you would like the link to lead to¬†Google, you would enter “http://google.com” in the URL field. Note that the “http://” is required when entering the URL.

If you would like the link to lead to an internal page from within your site, instead of entering the destination URL you can link to existing pages by selecting a page at the bottom of the window, or using the search field.

The button to the right of the add link button will break (remove) links that are highlighted in the visual editor

Accessibility Tip

It is important to note that for accessibility reasons, your link text needs to be meaningful and describe the destination. A link that reads “click here” will be confusing to visually impaired visitors who require screen readers. Instead, the link should be descriptive of where the link leads.

Lists:

There are two ways to create lists using WordPress:

Unordered List Button Unordered lists use bullets.

  • Fruits
  • Veggies
  • Meat
  • Broccoflower

HTML

<ul>
<li>Fruits</li>
<li>Veggies</li>
<li>Meat</li>
<li>Broccoflower</li>
</ul>

Ordered List Button Ordered lists use numbers.

  1. Item1
  2. Item2
  3. Item3
  4. Item4

HTML

<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>

Read more about unordered and ordered lists.

Headings:

Headings Button
Headings Button

 

There are three types of text that can be used when creating a post: paragraph text (default), heading 3, and heading 4:

Heading Examples

visual example of heading 3, 4, and paragraph text

Headings generally are used as titles for a section of a document. For example, the main title of a page is a heading 2 (not available in the drop down), then your secondary title will be a heading 3, and then any child headings to that should be a heading 4. Refrain from using heading 1’s and 2’s, as they are reserved for use for site and page titles and are not supported in the actual page’s content. Use paragraph for the main content that is being added.

Alternative styles available for headings

Horizontal Rules:

Horizontal rules are a faint gray line that is meant to separate thematic shifts in content. You can add horizontal rules from the first row of the visual editor menu. Add them by placing the blinking cursor directly after a paragraph and clicking the button:

Horizontal Rule

<hr />

An alternative to using the horizontal rule button is the following, darker, rule:

Strong Horizontal Rule

<hr class=”large” />

or in shortcode:

[largebreak]

Examples of horizontal rules

Standard and large horizontal rule.

Single and Double Spacing:

While in WordPress’s Visual Editor, creating a new paragraph is done with the Enter (or Return) key and results in a double spaced break. In order to go to the next line (single spaced), you must hold shift while clicking enter.

Tables:

Tables, like Excel Spreadsheets, are divided into rows and columns and are great for organizing data, images, and other information. Tables are not good for controlling the layout of a website. Click here for more information on tables.