Lesson 19: Working with Text (post, page) in WordPress

This article will guide you how to format and style text in the content editor. The first you should to know is that The Content Editor runs in two different modes: Visual and Text. Visual Mode shows you what your content looks like to visitors, whereas Text Mode displays the raw HTML. Visual Mode is the default setting for the Content Editor, but you can switch back and forth using the tabs at the top right. WordPress remembers what you choose and keeps showing the Content Editor in that mode until you switch back.

With default Block Editor

With Classic Editor

1.  Anatomy Of The Content Editor

While the Content Editor is built to look and act like word processing software  programs, it also has its own unique features.  Here are the key parts of the editor.

1.1. Visual vs. Text Mode

The Content Editor runs in two different modes: Visual and Text. Visual Mode shows you what your content  looks like to visitors, whereas Text Mode displays the raw HTML. Figure 7-1 shows the same content  viewed in Visual Mode (left) and Text Mode (right).

FIGURE 7-1

Visual Mode is the default setting for the Content Editor,  but you can switch back and forth using the tabs at the top right, as shown in Figure 7-2.

WordPress  remembers  what you choose and keeps showing the Content Editor in that mode until you switch back.

Visual Mode does not always show you exactly how your content  will look to visitors. It all depends on whether  the theme you use has styled the Content Editor. WordPress  has a default styling, so you can always see a kind of WYSIWYG(What You See Is What You Get)  in Visual Mode,  but to exactly match what visitors will see, it depends on your theme.

FIGURE 7-2

One sign of a well-written theme is that it matches the styling of the Content Editor with the styling on the front end of the site. Keep this in mind when learning about  choosing a theme in Lesson 27, “Overview of WordPress  Themes.”

1.2. Add Media

The Add Media button enables you to add images, documents, video, and audio to your content. The button is located at the top left of the Content Editor,  as shown in Figure 7-3.

Just as you saw with Featured  Images in Lesson 6, this button pops up a Media Upload Window,  as shown in Figure 7-4.

Referring to Figure 7-4, you can see the window  opened at the Upload Files tab, but it may open at the Media Library tab, depending  on what you did last with uploading media.

By default,  this window  shows all the images in your Media Library,  but because you haven’t uploaded anything  yet, it’s showing the Select Files option  to browse your computer or mobile device. When there’s something  in the Media Library,  you need to click the Upload Files tab at the top left. You can also drag and drop to the upload  area.

After an image uploads, it displays both in the media library listing and on the right.

FIGURE 7-3

FIGURE 7-4

 The lessons in Section IV, “Working with Media Content,” go into detail about  the Media Upload Window  and about  adding various types of media to your content,  as well as how to lay out images and other media within text.

1.3. The Status Bar

After you begin entering content,  the bottom area of the Content Editor displays some useful information, as shown in Figure 7-5.

FIGURE 7-5

On the bottom left is the word count,  and on the right is the last date and time the content  was edited, with the name of the user who made the edits.

The area above the word count tells you what HTML  tags are governing the text your cursor is pointing  to. Referring to Figure 7-5, for example, it says blockquote >> p, which means this text has a paragraph tag within a blockquote tag. If you click a tag, the content  editor highlights the relevant text. Be aware that the HTML  tag status line only displays in Visual Mode.

1.4. The Button Bar

The Button Bar is the heart of the Content Editor,  providing  all the tools for styling and formatting your content.  You’ll sometimes see it referred to as the toolbar, but because the area at the top of admin screens has that name, and the icons all act like little buttons, I prefer to say Button Bar.

In Visual Mode it resembles a word processor,  and in Figure 7-6 you see the default Button Bar, with each button labeled for reference.

FIGURE 7-6

Now consider the second row of key buttons. On the right side of the first row there’s the Toolbar Toggle button (for a long time this was called Kitchen Sink), as shown in Figure 7-7.

FIGURE 7-7

Clicking this button reveals the second row of buttons, and they’ll stay visible until you click the Toolbar Toggle again.

Figure 7-8 shows this second row of buttons with their functions.

FIGURE 7-8

On mobile browsers,  the Button Bar looks and operates  exactly the same way, except, of course, the width of it causes some narrower screens to take two lines per row. Having both rows open at the same time makes for a cumbersome Button Bar on smartphones, as shown in Figure 7-9.

FIGURE 7-9

This is a good reason for mobile users to toggle the second row off most of the time, and display it only as needed.

2. Working With The Content Editor

Although  you’ll hear some people say that aspects of working  with the Content Editor in Visual Mode can be frustrating, it’s still the easiest way for the average user to work with content.  That’s why this lesson is conducted in Visual Mode.  Included are some tips that can help smooth  over those minor quirks,  but they’re few and far between,  and the advantages of Visual Mode far outweigh  such issues.

2.1. Sizing the Content  Editor

Up until WordPress  4.0, working  with large amounts of content  meant resizing the height of the Content Editor or making sure your cursor was inside the Content Editor before scrolling (or else you’d end up scrolling the entire browser  window).

Now the Content Editor automatically scrolls no matter  where you have your cursor and no matter how long the content.  This is why you won’t find any resizing option—you don’t need it.

Distraction Free Writing Button

You can resize the Content Editor by clicking the Distraction Free Writing button on the far right of the Button Bar (in Visual or Text Mode).  (This button used to be called Full Screen and I still think of it in those terms.)

The idea is to get rid of any other boxes on the screen and let you focus on writing.  Figure 7-10 compares  the same Post in regular screen mode on the left and Distraction Free Writing on the right.

Referring to the right side of Figure 7-10, you may ask, “Where’s the Button Bar?” To keep you focused on writing,  WordPress  hides any options  until you mouseover  the top portion of the screen.

At that point you can access all key functions,  including Update and Exit full screen mode, as shown in Figure 7-11.

FIGURE 7-10

FIGURE 7-11

You might also ask where the Add Media button has gone in Distraction Free Writing mode. It’s now an icon—the one near the middle that looks like a camera and music notes. Clicking that button produces  the usual Media Upload Window.

2.2. Styling Text

Styling buttons on the Button Bar, such as Bold or Italic work as follows:

  • They’re toggle switches. That means if some text is in italics, clicking the Italic button removes the italics, and vice versa.
  • Highlight the text you want to work with and then click the button to apply the change. I’ll demonstrate by working  with some of the text in the first Post for my website. I want to emphasize the name Kingston in the opening sentence and to italicize the name Bob Marley Museum.  As shown in Figure 7-12, I simply highlight the text first and click the corresponding button, just like any word processor.

FIGURE 7-12

If you prefer working  with keyboard shortcuts, those all work in the Content Editor,  too. (For a complete list of shortcuts, click the question  mark icon on the Button Bar.)

Lesson 6 mentions  that WordPress  usually retains most types of basic styling when you copy and paste text from a program such as Word.  But it’s always important to check for any that might have been missed.

WARNING  If you copy from a web document, it’s better to use the Paste from Text button on the Button Bar. It will strip out HTML that could interfere with how your theme styles the text.

Although  WordPress  provides  you with powerful  tools for styling your text, with any power comes responsibility. The following  suggestions  aren’t about  WordPress,  but they’re important for your visitors.

Bold

Please use this button wisely. If you use too much bold text on a page, the purpose begins to get lost.

Everything becomes important so nothing  stands out. Like that.

In addition, bolding is next to all caps, and no one likes writing that “shouts.” Search engines, too, take a dim view of excessive bolding.  They can see it as a sign that the author is trying to manipulate the way the page will be interpreted and ranked.

Underlining

I’m not a fan of using the Underline function,  at least not on the web. I think it’s just too confus- ing to your visitors, because underlined text spells “link” in their minds. They try clicking the underlined text and you either disappoint or confuse them.

I know some uses of underline  are actually required,  such as in scholarly documents, but for cases like that,  the visitor has some context  and is familiar with the underlining. If you need to emphasize text, it’s usually best to stick to bold and italics, or perhaps  color.

Coloring Text

Having mentioned coloring text, remember  a few things before you start using it:

  • Don’t use the same or a similar color as the one you use for your text links—that’s going to confuse visitors. colored headings in your theme, using the same color for pieces
  • If you have of text can also be confusing, though  a shade of that color may be okay
  • Always think about the background color behind the text. You want enough contrast with the background to keep the text readable.

How,  then, do you color text? It’s the button with the letter A, on the second row of the Button Bar. If you highlight some text and click that button, the text turns the color of the small bar displayed at the base of the button. If you want to change that color, click the down arrow  and you see some preset choices. Click More Colors and you see a pop-up  window  where you can choose from any color, as shown in Figure 7-13 A.

FIGURE 7-13

I often see people create special styles for a section heading.  Those headings are already controlled by your theme. Creating  a style for a particular heading overrides what’s in the style sheet, and that’s okay, but maybe what you actually want to do is change the style sheet so that all headings of that type look the same. Lesson 29, “Advanced Design Customization,” mentions  how a change like that could be made.

2.3. Formatting Text

Formatting text is another way to help visitors read your content  easily, and the Button Bar offers many formatting options. By formatting, I mean how text is structured: paragraphs, lists, groups of paragraphs separated by headings,  alignment  (left, center, or right), and indenting.

Following are some examples of each of these so that you can more easily associate that look with each button. The exact nature  of the look will vary by theme, of course, but the general concept always holds.

Aligning Text

There are four alignment  buttons: left, center, and right alignment  are on the first row of the Button Bar, and justified alignment  is on the second row. To use any one of them, simply place your cursor in the paragraph you want to align, and click the appropriate button. You cannot  align a single sentence within a paragraph.

You may think that to return  alignment  to the normal  position  of left-aligned,  you must click the Left Align button. This works,  but it’s better if you simply click the button of your current alignment  and thereby toggle it off. HTML  defaults to left alignment,  so if you just remove the current  alignment,  the text will be left-aligned.

Blockquotes

Blockquotes  are meant to distinguish  blocks of text from regular paragraphs, often with some nice styling. As the name suggests, the most common  way to use blockquotes is when quoting  someone else. Figure 7-17 shows you how it works in our sample package.

FIGURE 7-17

Keep in mind that the font styling you see here is based on the default Twenty Fourteen  theme. What you’d see would depend on your theme. One common  styling is to indent the left side or even the right side as well.

Applying blockquotes works only on entire paragraphs. If you try to highlight just one sentence of a paragraph, clicking Blockquotes  would format  the entire paragraph. It follows from that,  you need to place your cursor only somewhere  in a paragraph to make it all a blockquote.

If you want to make more than one paragraph into a blockquote (assuming they’re all in a row), you need to highlight the entire group.

Lists

One of the most effective ways to present information on the Internet is with the use of lists, because they:

  • Emphasize points by separating them visually
  • Allow the eye to scan through material quickly
  • Provide a roadmap when giving instructions or long explanations
  • Help readers remember points

WordPress  makes it easy to create lists with bullets or with numbers;  there’s a button for each on the Button Bar. The basics for each type are the same, so following are a couple specific items.

The key to making lists in the Content Editor is to remember  that each list item needs to be separated by a return  before using the Button Bar. Another  way to think of it: Each item needs to be a paragraph.

Assuming, of course, that each of these separated lines follow one after another, creating a list is just a matter  of selecting the entire group and clicking one of the list buttons. You can see the before and after in Figure 7-18.

The result is a bulleted list. As always, the exact way it looks depends on your theme.

Writing a List in the Content Editor

If you create your list in the Content Editor,  begin by pressing Return/Enter after the paragraph and before the point where you want to put in the list. Then click the button of the list type you want.

A bullet or number  appears,  and you can begin writing the first list item. Press Return/Enter at the end of the item, and another bullet or number  appears.  Repeat until you complete the list.

When you finish, press Return/Enter once. You see a bullet or a number;  then press a second time. The bullet or number  disappears, meaning the list is complete,  and you’re on a new line ready to start writing a new paragraph.

Pasting List Items into the Content Editor

If you paste a list of items into the Content Editor,  WordPress  may display it as a list immediately.  It all depends on the source. Lists from Word,  for example, should carry over just fine.

However,  if your list is not formatted after pasting (Figure 7-19 A), you need to manually  do it. The problem  is, highlighting  your list items and clicking a list button is likely to produce  something  odd: a single bullet or number,  with all the original items as one list item, as shown in Figure 7-19 B.

FIGURE 7-18

FIGURE 7-19

No worries; just put your cursor at the beginning of each original item and press Return/Enter. Figure 7-19 C shows you the result part way through the process: A bullet or number  appears  each time you do this, until your list is fully formatted.

Multilevel Lists

If you have complex lists with sublevels, WordPress  can handle that using the Indent buttons in combination with the List function.

To create a subitem,  press Return/Enter to start a new list item, and then press the Increase Indent button. The list item moves to the right, and for numbered lists, you see numbering begin again for the new level. For bulleted lists, the bullet for the new level may be the same or different,  depending on your theme.

The Decrease Indent button moves a list item to the left and returns  the bullet or number  to the type for that level of the list.

You can see a new multilevel version of my food list in Figure 7-20 in bulleted form on the left and using a numbered list on the right:

FIGURE 7-20

The number  of levels you can have is limited only by the width of your content  area.

The Formatting Drop-down

The drop-down menu on the second row of the Button Bar is one of the most misunderstood and misused elements of the Content Editor.  Following is a description of each of the formats  in the order on the drop-down.

Paragraph

The default  formatting when you enter text in the Content Editor  is a paragraph. Even a single line of text followed  by a return  creates a paragraph in the technical  sense of having HTML paragraph tags.

About the only time you need to use the Formatting drop-down for paragraphs is when you want to change some text back from some other format.

Paragraphs by default are left-aligned and their styling is controlled by the theme’s style sheets.

Address

Despite the name, do not use this to format  a mailing address.  The address tag is actually intended to designate the contact  information for the author of a web page or a portion of a page designated in HTML  as an article. Typically, that contact  information would be an e-mail address,  a web link, a Skype handle,  and so on.

Even though  your theme gives this a particular styling, do not simply use it for styling. Search engines and other web reader functions  look within this tag for specific kinds of contact information.

Pre

The “pre” is short for preformatted content,  and the idea here is that the text in question  has a particular spacing, and the job of this tag is to preserve it. By default,  HTML  ignores white space and puts a single space between elements. The pre tag, however,  maintains the original white space, as shown in Figure 7-21.

FIGURE 7-21

You can see in Figure 7-21 A how the Content Editor tried to keep some of the spacing, but when the preformat was applied in Figure 7-21 B, all the spacing displayed exactly as in the original.

Usually the pretag displays using a fixed width font, such as Courier  (the typewriter font), and sometimes without any word-wrap function.  Coupled  with the ability to maintain the original white space, the tag is often used for displaying computer code; though  there is a specific HTML  tag called “code” for that purpose.

Headings 1 Through 6

Many people try out the formatting menu and discover that if they use one of the Heading  settings, they can make their text look different (larger, bolder,  and so on). But this is a misuse of headings.

The reason your theme styles each heading differently is to help visitors see the relationships between headings.  The numbers  1 through 6 are derived from the HTML  tags h1, h2, and so on. Heading  1 is meant to be the most important on a page, or as of HTML5, the most important within an HTML  Section. Heading  2 is less important, and so on down the line.

And the term Heading  is also important here. It means a word or short phrase.  A series of two sentences is not a heading.  Headings  introduce and mark out groups of paragraphs and other content.

Consider  this outline:

Heading  1

Heading  2A

Heading  3A

Heading  3B

Heading  2B

Heading  3C

Heading  3D

The H1 tells you the overall topic, the two H2s divide that topic in some related way, and the H3s divide their respective areas in some further  way.

The value to visitors is tremendous. By glancing at the wording  of the headings,  they should get a good sense of what the page covers, while the styling of each heading conveys the importance of relationships between the segments.

If your goal is simply to style text, do not use Headings.  If you don’t know how to use CSS to achieve specialized styling, plugins can help go beyond the default Content Editor.  See the end of this lesson for some suggestions.

If you use Headings  to divide up your content  and make its structure clearer to visitors (and search engines), make sure you are clear and consistent  with the different levels of headings.  Unless you know what you’re doing, for example, there should be only one H1 on the page, and that should be the Title of the Post or Page. Your theme should take care of that automatically, so do not to use H1 in the Content Editor.

Leave a Reply

Your email address will not be published.