Blog

WordPress authors have the option to create pages and posts in a Visual Editor or a Text Editor. While the Visual Editor does a reasonably good job with its toolbar options and easy editing environment, the use of the Text Editor allows maximum flexibility on how to organize content.

Let me explain not just why you’d want to use the Text Editor (in place of the Visual Editor), but how easy it can be to use.

Why might you prefer the Text Editor?

• Your content will make more sense for your readers and search engines.
• You only need to know a few HTML tags to make the Text Editor very useful.
• You can apply CSS style properties directly to your HTML code.

What Happens When You Use The Visual Editor?

When you add copy, media or links to your Visual Editor you’re really adding HTML to your page or post. It all takes place under the hood.

Not sure what I mean? Try this.

Add some copy in the Visual Editor. Then select the Text tab. What you’ll be looking at is HTML. Just like with the Visual Editor, you can edit your HTML code directly with the Text Editor.

In fact, you can do a lot more with the Text Editor than you can with the Visual Editor. This makes working in text mode not just more productive but more satisfying too. You’ll be able to more accurately markup your content which will benefit your readers and boost your SEO efforts.

HTML is about as straightforward as it gets. Every web page, including those generated by WordPress, use it.

Learning HTML will have benefits far beyond using it with WordPress!

What is HTML?

Known as the lingua franca of the web, HyperText Markup Language (HTML) is a system which allows authors to assign meaning to content. Using HTML elements (better known as tags) you can define content as being paragraphs, headings, lists, links, and other structures.

HTML is much like grammar.

It has NOTHING to do with how a web page looks or how it is styled. The matter of web page design – layout, typography, and color – is taken up with CSS (Cascading Style Sheets), the language of web design style.

HTML is being developed by the World Wide Web Consortium (W3C). The most current version is HTML5.

The Tags You’re Most Likely To Use

HTML is a containerized markup system. For every open tag there is a matching closing tag.

For example, for the most important content on a page or a section of a page you’d use a Heading 1 tag like this.

<h1>All About HTML</h1>
The open tag is<h1>and the container is closed with</h1>

Similarly, here is how a paragraph is marked up:

<p>Several years ago, a client and good friend suggested I learn WordPress. At the time I was against any type of CMS. Little did I know that I would come to love it and teach it to many people in New York City classrooms and via webinar.</p>

All you need to do is write your content in the Text Editor, adding your tags either as you go or after you’ve typed in the copy.

Here’s an explanation of the most common tags you will use when writing HTML. They’re the heading, list, link, grouping and a few miscellaneous tags.

HEADING TAGS

<h1></h1>

<h2></h2>

<h3></h3>

• There are also h4, h5, and h6 heading tags which in practice are rarely used.
• Never use a heading tag for the purpose of altering font size.

LIST TAGS

You can create 3 types of lists with HTML. The 2 most popular are ordered and unordered lists.

An unordered list is used when the order of the items is not important.

<ul>

<li>flowers</li>

<li>vegetables</li>

<li>trees</li>

</ul>

• flowers
• vegetables
• trees

An ordered list is used when the order of the items is relevant.

<ol>

<li>California</li>

<li>Texas</li>

<li>Florida</li>

</ol>

1. California
2. Texas
3. Florida

(In this example, the order is relevant and determined by the largest populations in U.S. states.)

NOTE: Lists can also be nested to create a hierarchy of list items. This is difficult to do when using the Visual Editor.

LINK TAG

You can turn text or an image into a link by wrapping the text or image inside of any anchor (link) tag. While the syntax for creating a link is always the same (<a href=”url”>link text</a>), there are 2 very common ways to do it.

For a link to a WordPress page, use:

<a href=”http://domain.com/this-is-the-page-title”>link to a WordPress page</a>

For a link to any page or resource, not just a WordPress page, use:

<a href=”http://domain.com/about.html”>link to an HTML page</a>

NOTE: There’s actually a third way. You can use the special way WordPress creates links with the following syntax:

<a href=”index.php?page_id=356”>link to a page in your site</a

In this case, you’ll need to know the page or post id of the page you are linking to on your site. (Each page or post has a unique id number).

GROUPING TAGS

Technically, there is no such thing as “grouping tags” but it’s the best way to describe a set of HTML tags that contain other elements. The purpose of these tags is to more accurately describe the meaning of your content.

For example, the <header> tag can be used to define the part of your page that contains leading information like this:

<header>

<h1>A Leading Heading Line</h1>

<img src=”url of image file”>

<p>A paragraph of information following the heading and image which logically holds together as a group of information.</p>

</header>

Here are some very common grouping tags

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

OTHER TAGS
Besides the  tag, you’ll find these tags very helpful when working with the Text Editor.

<img src=”url of image file”>

<br>

<!--  hidden code or info here -->

<blockquote> or <q>

While those tags will get you a long way, here are a few resources to help you.

● You Only Need 10 HTML Tags (tutorial)
● HTML Element Reference in Alpha Order
● HTML Element Reference

The Rules

The beauty of HTML is that there are just a few rules to follow and they’re easy to remember.

* HTML Is Case Insensitive

Uppercase,  lowercase or mixed case – write HTML any way you like. The common practice is lowercase.

* For Every Open Tag There Must Be A Close Tag

There are exceptions to this but to make it real easy, get into the habit of closing all open tags.

* Tags Are Closed In The Reverse Order In Which They Are Opened Within A Block

This can be a little difficult to understand, so here’s an example.

<p>Here is a <strong>paragraph with <a href=”url here”>a link</a></strong> inside and some of the text is emphasized.</p>

Notice the order: <p><strong><a>….</a></strong></p>

* Some Elements Don’t Have A Closing Tag

Tags such as <br> and <img> have no closing tag as there is no reason for one.

* Use HTML Correctly And NOT To Style Your Page

For example, don’t use <br> tags when you have a list.  Or don’t use <table> tags to create a grid for layout.

The Text Editor Toolbar

Because I find it efficient to write code into the Text Editor, I generally do not use the toolbar. However, if you are getting started with HTML, you may find some of the tools useful as a way to teach yourself some HTML.  Ultimately, you will realize that there are more tags that you can use to properly markup your content than what the Toolbar allows.

HTML Plugins

Sooner or later you’ll notice that if you create a paragraph in the Visual Editor, you won’t see a <p> tag wrapping around your copy when you see it in the Text Editor. Don’t let that bother you.  WordPress will still generate a <p> tag when the copy appears on your page.

If you are having this or other problems with your code, you might like to use these plugins.

Always Edit In HTML

This guarantees that when you go to create or edit page or post content, your editor will always open as a Text Editor and not a Visual Editor. This can be very useful since WordPress can strip out your tags in some circumstances where the Visual Editor is used.

Preserve HTML Editor Markup Plus

If you are having problems with having tags stripped out, this could be your solution.

HTML Editor Syntax Highlighter

This is a wonderful plugin that turns the bland Text Editor into a color coded cornucopia. It can also change to a black background and larger fonts. It’s best to use this plugin with the Full Screen option.

NOTE: I have not tested two or more of these plugins at the same time, so incompatibilities could exist.

How Shortcodes Fit Into The Picture

Shortcodes are what many plugins use to add a form, set up columns or add some other feature to a page or post. It’s an easy way to add code like HTML, javascript, CSS, and PHP without having to know anything about those languages.

Use shortcodes in the Text Editor just as you would in the Visual Editor.

To the uninitiated, shortcodes may look like HTML, but they are not.

You can either paste in a shortcode in this manner if you are adding a contact form, for example,  with the popular Contact Form 7 plugin,

[contact-form-7 id=”326″ title=”Contact Form Sample”]

or you can use it like this for a plugin,

[one-half]Content for left side of column[/one-half]

[one-half-last]Content for right side of column[/one-half-last]

Which creates two columns on a page.

That shortcode looks like HTML with an open and close tag, but it is not

Adding CSS Styling Using The Text Editor

You can provide CSS style properties to the content you add in the Text Editor. This can’t be done with the default Visual Editor.

With the Text Editor it can be done in 2 ways.

One way is to add an id or a class attribute to an HTML element as in this example:

<p id=”lead”>This is the lead paragraph in my post.</p>

Then, in your style.css file you would add the style properties for #lead.  Maybe something like this:

#lead

{font-weight:bold;

text-align:center;

color:#f00;}

The second way is to add inline styling. (However, the best approach is to keep your HTML and CSS separate as in the above scenario.) You can add inline styling like this:

<p style=”font-family:arial,helvetica,sans-serif”>The font for this paragraph is Arial.</p>

NOTE: This would override any font-family style rule for this paragraph that may be present in an external file or within the <head> container of the page.

Conclusion

The Text Editor will give you total control over how you want to format your page or post content. You can use any HTML tag, not just those in the Text Editor toolbar. The result will be content that is easier to read and understand by people and search engine spiders.  It may take a little time to get used to writing HTML, but in the end, you will find it very satisfying.

Author Bio

Bud Kraus bud@joyofwp.com is a veteran WordPress Instructor in New York City and teaches WordPress for individuals and groups via webinar. He also works on sites for small businesses. http://joyofwp.com