Lorelle on WordPress

In this assignment in Lorelle’s WordPress School free online course we are going to explore the Text and Visual Editors in WordPress. WordPress features the two editors on all posts and Pages.

The Visual Editor is the WYSIWYMG editor for writing content. This means it is the What You See Is What You Might Get editor. WordPress developers have worked hard to make the visual editor be as user friendly as possible and offer a streamline experience for the user to see how a post or Page will look on the front pageview of the site. The work continues, but until then, always preview the post before publishing to ensure it really looks like what you want it to look like, not what it shows you in the Visual Editor.

The Text Editor is literally a blank canvas onto which you may write, paste content from word processors, and spice up with a little HTML. Next week we will work on the HTML you need to know to publish with WordPress, only a few words.

Is there a right or wrong editor to use? No. These are choices. Hopefully after you work with WordPress content for a while, you will determine which editor works best for your needs, but be ready to switch if the need calls for it.

Today’s assignment is to learn about the differences between the two and how to use them.

The WordPress Visual Editor

The Visual Editor in WordPress is where most people start and are most familiar with. It is the word processor editor for WordPress. The toolbar features bold, italic, and basic content format buttons including links and lists.

At the end of the toolbar row is a button currently labeled “Toggle Toolbar,” formerly labeled “The Kitchen Sink.” While most people didn’t understand what it meant, to the rest of us, we loved the Kitchen Sink button. The button reveals the second row of buttons on the toolbar where you will find more formatting options.

WordPress automatically creates paragraph HTML tags around your content if you present it properly. In the visual editor, simply hit the ENTER or hard return key once when creating a new paragraph or heading. To make an address with no space between the lines, simultaneously press the SHIFT+ENTER keys. This creates an HTML line break and helps you to write poetry, addresses, and ingredients in recipes.

While the visual editor gives you a preview of what your content will look like when published, make it a habit to preview the post or Page using the two tab method to ensure it meets with your approval before publishing.

The Text Editor

While the Visual Editor offers the opportunity to view your content in a way that emulates the front end view of your post or Page, the Text Editor in WordPress reveals the codes that style the content. I will go into the HTML specifics later.

Notice that the buttons are…boring…as my students describe them. Not pretty nor graphically pleasing. Just words representing their task. Also notice that there are fewer of them. You won’t find a second row of styles. WordPress assumes that if you are using the text editor, you know how to make an HTML heading and a few other common content HTML tags.

To make a paragraph in the text editor, instead of using one ENTER between paragraphs, you must add two. A single ENTER creates a line break in the text editor, used for write poetry, addresses, and other content that requires no space between the lines.

To use the buttons in the text editor, select the content and click the button. To use buttons such as lists, click the list type button then the list item button, type the list content and click the list item button to close the list item. When done with the list, click the closing list type button to end it. Notice how the buttons will change their labels from open li to closed /li as you work through each item on the list. Remember that all open HTML tags must be closed (unless they are self-closing tags – more on that soon).

To preview what the post or Page will look like, save it as draft and preview it in a separate tab. You may switch back and forth, editing and making changes as you go, using the two tab method as you should with the visual editor.

The Visual and Text Editor Toolbar Buttons

Instead of going through each of the buttons on the toolbar for each browser, I want to focus on just a few to talk about why you should or should not use them.

Blockquote/b-quote

The blockquote is an HTML tag that wraps around content to highlight is as a quote, something published elsewhere. In many WordPress Themes the content is indented, but this HTML tag is never to be used to intent content. The blockquote styles often feature background colors, words in italic, possibly a different or larger font, and a graphic to indicate this is a quote and not your words.

The blockquote is often featured with the <cite> HTML tag, wrapped around the link citing the original source. We will cover more on citations and quoting in a future tutorial.

Strikethrough/del/ins

The strikeout or strikethrough HTML tag is used visually in many ways to represent the deletion of content, most commonly to say something without really saying something, a form of visual and contextual satire.

The true purpose of this tag is to visually remove content while leaving it in place to signify a change in the article or documentation, letting the reader know that a correction or change has been made.

The HTML used is <del>, the replacement for the deprecated <strike>. It is often used in combination or an indication of additions to the content with the <ins> HTML Tag representing inserted content.

The Del or Delete HTML tag features two parameters that may be added manually via the text editor in WordPress. Here is the HTML with the example parameters in use:

This is deleted <del cite="Change in US Law"
datetime="2015-11-05T13:15:30-05:00">text</del> 
in an example.

The <ins> works the same way, providing source code information as to when content was added.

Underline

The underline HTML tag has been deprecated in all modern versions of HTML, and I’d love to see it gone from WordPress, though it is making its way back into HTML5 for international characters and rare unarticulated annotations. According to many international laws for web accessibility, the underlining of text is indicative of a link. Ever clicked on something underlined only to have nothing happen?

The underline on words has become an internationally recognized standard to indicate a link. It adds no emphasis to the content any more, replaced with bold and italic, and is not used to represent titles or other traditional editorial styles.

Avoid using the underline to avoid confusing the reader.

Alignment, Justify, and Indent

The Justify or justification button forces the content of the post or Page to be aligned by paragraph to the right and left margins with no rough right margin for right-to-left languages or the reverse. The alignment feature forces the alignment of text and images to the right, left, or center.

Full-justification of text on a web page tends to look odd and be a bit challenging to read as the fonts and spaces between the words seem to stretch to fill spaces to touch the outer edges of the content walls, so to speak.

Centering text is a technique considered deprecated on the web in web content as well. A student of mine researched why the center HTML tag was deprecated and the use of centering in web publishing and published her findings in “Why Not Center?” on ClarkWP WordPress Magazine. It speaks better than I about why you shouldn’t center content.

Forcing content to occasionally shift from the left margin to the right is fine if the usage is rare. It shifts the eye away from scanning the content and disrupts the reading flow, but it can work if used judiciously.

Indents or indentions force the text to move in from the left margin (for Left-to-Right languages) like a tab. WordPress adds a “tab” with padding on the left side of the paragraph to push it over. Experiment with the indents and you will notice that they do not behave as tabs in a word processor, the content wrapping back around past the first line to the left margin. It works like a forced indent, moving the margin, so to speak, in to the indention point.

           Indented content such as the use of tabs have been found to actually slow down the reading process and add clutter to the look and feel of a web page. While it was successful in traditional print media like books, indented content just doesn’t work with the way people’s eyes scan the web. The whitespace between paragraphs is indicative of a paragraph break, and the indention is not required to let the reader know you are moving to a new paragraph, thus a new thought or point.

So don’t use the indent button to create a tab, or spaces, or any other methods to indent a paragraph. Just add the spaces between paragraphs and keep writing.

More importantly, these means work. Once you start styling content this way, you need to continue doing it for every post if this is the way you wish to present your content.

Such a style is usually set by the WordPress Theme for all paragraphs, saving you work. When we get to the section on customizing and tweaking your WordPress Theme, you can set the text alignment styles then. Until then, consider skipping this.

Fonts, Font Styles, Sizes, and Colors

As mentioned above, any time you force styles upon your content, they persist, making it hard to know which is a forced style and which are styles associated with a WordPress Theme.

As you write your content in WordPress, ask yourself this question: Who are you publishing for?

If you are publishing for yourself, and you really don’t care who reads it, do whatever you like.

If you are publishing to be read, then present readable content.

Forcing font sizes, sizes, and colors on your readers may feel creative and artistic, but save this for those moments, and not make it a standard for professional or business web content.

Use such styles like you would spices in your food. A little is fine across the entire website, but too much, and the recipe is spoiled.

Just because you can, doesn’t mean that you should.

On your test site, you are asked to not force styles upon the content to help you learn better about how WordPress and WordPress Themes work.

HTML Tables

If you are someone that presents data frequently, you will see that there are no buttons on either toolbar for tables.

Historically, tables were used to style content, something now prohibited, replaced with Cascading Style Sheets that design the architecture of a site. For years we would preach “tables are for data not design” in training sessions.

But what if you wish to present data in a post or Page?

You will need to do so manually through the text editor.

Don’t know HTML or wish to learn it? You will learn some through this course, but if you want to add a table of data to your posts or Pages now, quickly and easily, use the following method and one of the free online HTML table creators listed below.

1. Have your data ready to enter
2. Choose an HTML table creator or generator below and go to their site
3. Add the data to their form or style the table the way you wish it to look and add the data after pasting into your content
4. Generate the table
5. Copy the supplied HTML code
6. Switch to your post or Page Edit screen tab and switch to the TEXT editor
7. Place your cursor where you wish the table content to start and paste the code into the spot
8. Save draft and preview the post or Page to ensure it meets your specifications. You may edit the table to modify it or change the data, or return back to the table generator or try another to ensure you present the data the way you want it to appear.
9. When the post or Page is ready, publish it

The following are HTML Table generators available free online. If you have a quality text editor, you can do the same with their table features. Please note that WordPress and WordPress.com may strip out some style features if they do not match their requirements upon saving the draft.

• HTML Table Generator by TextFixer
• Accessible Table Builder – Accessibility Tools – Accessify
• Html Table Generator v0.2
• HTML table generator by HTML tables
• HTML Table Generator by Rapid Tables

Switching Back and Forth Between Editors

It is natural to switch back and forth between the two editors in the beginning when you are learning. I’d like you to break the habit now.

If you wish to preview a post, save it as draft and use the preview or view post button to use the two tab method for previewing content on your site.

Even if you switch back and forth, you aren’t getting the true visual of how your content will look on the site when published. Use the preview to get a truthful perspective.

When you switch back and forth, WordPress does its best to “fix” your code. While the intention is good, the end result can remove or change whole sections of acceptable and web standard code. This is most evident in the use of HTML tables, Lorelle on WordPressHTML Character Entities, publishing code, and other styles such as inline styles. I’ve spent hours fiddling with the presentation of some content only to have it messed up by switching to the visual editor.

If you are producing standardized article content with no special HTML or styles, then this isn’t important, but make it a habit anyway to preview the post to get a visual view of the content no matter which editor you are using in WordPress and avoid switching between the two editors.

Assignment

Your assignment today is as two sections.

Edit previously published content and switch between the two editors. Compare the content styles in the visual editor with the front end view of your post or Page in another tab. Are they the same or different?

Explore the HTML tags in the text editor and try to read the tags wrapped around your content. Can you tell which are links, lists, images, headings, etc.? Study how they are formed. What makes the click of the text within a link go to a specific web page or site? What is the link to an image? Can you tell where the image is stored on your WordPress web server?

In the previous assignment, you were to add a minimum of three images to the second post in the article series on your test site. The images were to be aligned right, left, and center when embedded.

In the Text Editor, look for these images and change the CSS style for alignleft to alignright and reverse it on the next images aligned to the right. Save draft or update the post and preview the front end view of the post. Notice the changes? Like them? Don’t? Go back and edit them back.

In the Text Editor, change the dimensions of one of the left or right aligned images to make it smaller or larger. You may have to do this in three places.

1. WordPress uses a PHP code in the link address to resize an image. The link address looks like this: uploads/2015/02/picture-of-trees.jpg?w=350. Change the 350 carefully to 200 or delete the ?w=350 if you are experimenting with widths.
2. The embedded image features the height and width of the image when inserted into your post or Page. It looks like this within the image HTML tag: width="350" height="150". Delete the height part of the code and carefully change the width to 200. The height of the image will naturally display.
3. WordPress also adds a CSS class to represent the default image width. In the HTML it looks like class="aligncenter size-medium wp-image-12612". Delete the size-medium to ensure that the stylesheet associated with the size of the images will not force the image to be that default size.

Save the draft or update and preview the post to see the size change.

Yes, you could do most of this with the visual editor, but sometimes a quick edit like shifting the image from the right to the left to make it fit within the content better is faster in the text editor than in the visual editor.

Talk to us below in the comment box or join us on our active WordPress School Google+ Community to discuss this assignment and share your experiences on using the two editors in WordPress.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism