Working with text in WordPress

Overview
Text
Headings
Links and buttons
Additional resources

Overview

In this guide, we review some best practices for working with text, including headings and links, on your website in Dornsife WordPress. Our focus is on text in the Rich Text component, but many of these practices can apply to other components with the text formatting toolbar, such as Two Column Component and Accordions.

You can consult the table below to see which text features are available depending on the toolbar and component:

Toolbar type
Full text formatting toolbar Simplified text toolbar
Appearance Which components use this toolbar? Rich Text, Accordions, Two Column Component All other components (Editorial Cards, Stacking Cards, etc) Basic text Yes Yes Headings Yes No Links Yes Yes Buttons Yes No

Text

Copying and pasting text from elsewhere

If you copy text from a webpage, email, Word document, or elsewhere, and then paste it into WordPress, make sure you review the pasted text in preview mode (select Preview in a new tab). Sometimes pasted text appears fine in the editor, but formatting differences become obvious when viewing your website.

If the formatting looks odd (for instance, the pasted text has a different font or size than the rest of the website), you have a few options for removing the formatting. Be aware that with once you remove the formatting, you will have to re-add any bold, italic, or other formats that you wanted to keep.

Option 1: Clear formatting feature (full formatting toolbar only)

Select the text, and then select the Clear formatting icon in the toolbar.

Option 2: Paste as text feature (full formatting toolbar only)

Select the Paste as text icon in the toolbar.
Once the icon is selected, proceed to paste the text in the editor.

Option 3: Paste without formatting (full and simplified toolbar)

If you are using the simplified toolbar, you may not have the Clear formatting or Paste as text features. Here's how you can paste as text, depending on your computer and browser:

Operating system Windows PC Mac If you prefer keyboard shortcuts Ctrl + Shift + v Shift + Option + Command + v If you prefer clicking

Firefox: Right-click within the text field, and select Paste Without Formatting.
Chrome: Right-click within the text field, and select Paste as plain text.

Safari: In the menu bar, select Edit and then select Paste and Match Style.
Firefox: Right-click (control + click) within the text field, and select Paste Without Formatting.
Chrome: Right-click (control + click) within the text field, and select Paste and Match Style.

Text vs. the text tab

Whether you are typing or pasting text, you should work in the Visual tab. If the text formatting looks odd, you may be in the Text tab, which is the HTML version and should only be used if you are comfortable with HTML. To exit the HTML version, select the Visual tab.

Shortened toolbar

The simplified text toolbar cannot be expanded. However, if you are using the full toolbar, but only see one row of options, you can click the Toolbar Toggle icon to view more options.

Headings

Headings provide structure to your content. They are helpful for website visitors and search engines scanning or browsing your pages. Additionally, people with screen readers rely on headings to help navigate a page—particularly if the page is very long, as the headings help them jump between sections.

You can designate text as a heading by selecting a heading level in the toolbar. The heading levels go in descending order from Heading 1 down to Heading 6, but you should only use Headings 2–6. Heading 1 is reserved for the page title and should not be used anywhere else.

How to set a heading

To set a heading, select or highlight the text that you want to make a heading. Then, click Paragraph in the toolbar and select an appropriate level between Heading 2–6.

Example

In the following example, each paragraph section is preceded by a title set at Heading 2. Within one of the sections ("Step 1: Request IT equipment"), there are two subsections ("Order a new computer" and "Re-purpose an existing computer"). The subsection titles are set at Heading 3, to avoid skipping from Heading 2 to a non-sequential heading level (such as Heading 4 or 5).

Guidelines

Start with Heading 2. Heading 1 is reserved for the title at the top of the page.
Do not skip levels between headings. For example, the next level down from Heading 2 is always Heading 3, not Heading 4 or 5.
If you copied headings from elsewhere, double-check the heading level that was pasted into WordPress, and correct it if needed.
You can make minor visual adjustments that don't affect the heading structure, but you should not change the heading level itself. In the example below, the heading levels are unchanged, but Heading 2 titles were bolded to stand out, and an extra blank line was added between sections for spacing.

Links and buttons

Create a link

Quick guide

Select the text you want to turn into a link, and click the Insert link icon in the toolbar.
Click the Link options icon.
You can add a link to another page on your website or to an unrelated website:
- To link to a page on your own website: Type the page title in the Search field, and then select the page from the list.
- To link to a different website: Paste the website address in the URL field. It's a good practice to select Open link in a new tab for external websites.
Click Add Link.

Detailed guide (with screenshots)

Select the text you want to turn into a link, and click the Insert link icon in the toolbar.
Click the Link options icon.
You can add a link to another page on your website or to an unrelated website:
- To link to a page on your own website: Type the page title in the Search field, and then select the page from the list.
- To link to a different website: Paste the website address in the URL field. It's a good practice to select Open link in a new tab for external websites.
Click Add Link.

A note about accessibility

When using links, make sure that the link text describes the destination clearly and concisely.

Correct: "For more information about accessibility, visit the Web Accessibility Initiative website."
Incorrect: "For more information about accessibility, click here."
- Why is this less accessible? People using a keyboard to navigate your page will skip the contextual information outside the link, and will not know what "click here" is referring to.
Incorrect: "For more information about accessibility, visit https://www.w3.org/WAI/fundamentals/accessibility-intro/."
- Why is this less accessible? People using screen readers will hear the entire URL being read to them, one letter at a time. Additionally, URLs are often harder to understand than a brief description of what can be found at the URL.

Turn a link into a button

If you are using Rich Text or another component with the full text formatting toolbar, you can optionally turn the link into a button to help it stand out further:

Quick guide

Select the link. The text appears highlighted in blue when it is selected. For the button to look its best, this link should be on its own line (no other text to the left or right of the link).
In the toolbar, click Formats and select CTA Link.
The link appears unchanged in the editor, but when you view it on the website, it appears as a button.
(Optional) If you later decide that you don't want the link to be a button, repeat steps 1–2. This will unselect CTA Link and remove the button formatting.

Detailed guide (with screenshots)

Select the link. The text appears highlighted in blue when it is selected. For the button to look its best, this link should be on its own line (there should be no words to the left or right of the link text).
In the toolbar, click Formats and select CTA Link.
The link appears unchanged in the editor, but when you view it on the website, it appears as a button.
(Optional) If you later decide that you don't want the link to be a button, repeat steps 1–2. This will unselect CTA Link and remove the button formatting.

Additional resources

Rich Text component guide
Creating accessible links in WordPress
Semantic Structure: Headings (WebAIM resource)