Classic Content Editor Overview

Description

In this lesson, you will learn how to structure and format content for the web in the WordPress Classic Content Editor for pages and posts. The editor uses a WYSIWYG (What You See Is What You Get) toolbar that is similar to word processing software and text editing applications. You don’t need to understand HTML code which is the standard for web content, as you can use the visual editor which creates and manages the underlying code for you. (Note that the WordPress editor does allow users to see and modify the actual HTML code for content if desired.) You’ll also be able to add links, add images and media, and insert symbols and special characters into web content.

Objectives

At the end of this lesson, you will be able to:

• Recognize the need to structure and format content for the web.
• Choose toolbar and screen modes.
• Identify toolbar features for formatting content.
• Apply WYSIWYG formatting to content.
• Add links to content.
• Add content from other sources.
• Insert symbols and special characters.

Prerequisite Skills

You will be better equipped to work through this lesson if you have experience in and familiarity with:

• Ability to use a general text editor
• Interest in creating and formatting web content
• Basic familiarity with the WordPress Dashboard

Readiness Questions

Have you used any WYSIWYG editors such as:

• An email program with a text editor?
• Microsoft Word?
• Google Docs?

Materials Needed

• A way to display your computer to the group
• A WordPress site that you can show
• Theme Unit Test Data for sample content, if needed
• Classic Editor plugin activated

Notes for the Presenter

• No slides are available for this lesson as it is mostly demonstration.
• Students should import the Theme Unit Test Data if they do not have sufficient content to work with.
• Be prepared to explain the basics of structured text, distinguishing between block elements and inline elements, so that students do not get frustrated attempting to apply excessive manual formatting.
• Be prepared to explain the difference between a paragraph break (press the return/enter key) and a line break (press shift key + return/enter key) for proper paragraph structuring.

Have You Thought About…?

What could present challenges to delivering this lesson? Is there anything that can be done in advance to prepare for those challenges?

• Participants could be in the Text editor instead of the Visual editor. Do you want to go over that too?
• What if a participant doesn’t have a WordPress site to work with? Can they log into yours and work there?

Lesson Overview

• Lecture on the need for the proper formatting of web content
• Demonstrate each of the toolbar buttons by displaying the classic content editor and showing how each button is used
• Student exercises on formatting content using the buttons in the toolbar

Exercises

Add Headings to a Blog Post

Using either lorem ipsum text or existing copy, have students:

1. Switch between Visual and Text modes.
2. Add a variety of headings within a blog post. (Remember that Heading 1 is for the title of the blog post, so students should use Headings 2-6 inside their posts.)
3. Apply bold and italic formatting to text.
4. Add a link to an external webpage.
5. Change the color of some text.
6. Make a paragraph a blockquote.
7. Add a special character to their text.
8. Right-align a paragraph.

Assessment

What is the name of the collection of buttons inside the classic content editor?

1. WYSIWYG
2. The visual editor
3. The toolbar
4. The button bar

Answer: 3. The toolbar

Why is the proper formatting of the content within a blog post important?

1. It looks better and is easier to read
2. It’s easier for search engines to understand the page
3. It makes the information more accessible and mobile friendly
4. It helps organize the information
5. All of the above

Answer: 5. All of the above

Can a blockquote be applied to a sentence in a paragraph?

1. Yes
2. No

Answer: 2. No. It is a block element and applies to the entire paragraph.

What does the toolbar toggle allow a user to do?

1. Add a break in the text
2. Allow the user to move between Visual and Text editing modes
3. Reveals/hides the 2nd row of buttons in the toolbar
4. Move a block of text to the right

Answer: 3. Reveals/hides the 2nd row of buttons in the toolbar

Additional Resources

None.

Example Lesson

Creating Content for the Web

Creating content for the web is not the same as word processing or desktop publishing since there is a difference in how websites display content versus the printed page. A printed page has fixed dimensions and a fixed layout and the content will look the same on any printed version, including PDF format. Websites, on the other hand, can have different layouts on different devices.

In the early days of the web, the people who built the Web devoted a lot of effort to mimicking precise layouts that resembled printed pages, even though not all systems could be accommodated. Now with the proliferation of mobile devices, it’s neither possible nor desirable to attempt to mimic the printed page on the web. The more you try to manually control the layout of a web page in the editor, the more likely that is to fail on some devices. Mobile-friendly responsive web design uses fluid and flexible layout methods for optimal viewing and user experience to make it easy to navigate and read web content with a minimum of resizing, panning, and scrolling on almost any device.

WordPress themes use a combination of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) to display the layout content. So while you can master the structure and format of web content, the overall design of the website is controlled by the theme which handles much of the design for the content on the website.

Using the Classic Content Editor

The classic content editor is available when editing a Post or Page. In the backend administrative Dashboard, select Posts or Pages and then click on a title or hover or an item and click on “Edit.” The classic content editor may be available for other content items, such as custom post types (e.g., Staff, Event, Portfolio), but that depends upon the theme, plugin, or developer customization.

When it comes to styling the text in the content, you select the text to style and then click the appropriate button on the toolbar to apply the style. Some text operations only work properly if there is a paragraph break both above and below the text being styled. These are called block elements and they include: paragraphs, headings, bulleted lists, numbered lists, horizontal lines, and blockquotes. (Otherwise, it is known as an inline element.) Knowing how to work with block elements makes for a much more satisfying experience when using the editor. For example, for paragraph alignment, your cursor simply needs to be somewhere in the paragraph that is to be aligned.

The edits you make to your text only appear on your site after you click the “Update” button. Also, the editor typically displays generic formatting, while the frontend of the website will apply the full, complete formatting based on the theme.

Toolbar

When you open a page or post to edit it, the basic WYSIWYG toolbar appears at the top of the editing panel. By default, the editor only displays a single row of formatting buttons. You can use the Toolbar Toggle button, also called the kitchen sink, to make the second row of toolbar buttons available.