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.
|TAG||WHAT IT DOES|
|Used at the top of a page – or a part of the page – to designate the most important copy.|
|Used after h1 to designate the second most important copy in a page or a part of a page.|
|Used after h2 to designate the third most important copy in a page or a part of a page.|
- 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.
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.
An ordered list is used when the order of the items is relevant.
(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.
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).
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:
<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>
Here are some very common grouping tags
|TAG||WHAT IT DOES|
|Used only once on a page, this tag groups the page’s most important information.|
|The section tag can be used more than once to divide content into sections.|
|Most commonly used to define content as being a blog post or article.|
|Used to define content which is supplemental to main, section, article or other grouping tag.|
|Used to define any content which is leading information on the page or part of a page.|
|Used to contain content which typically finishes a section or page, such as author, contact info, copyright, and “back to top” link.|
|Used to define a navigation interface. Commonly wraps around (contains) the <ul><li><a> tags.|
|Used when no specific tag exists to describe content more accurately.|
Besides the tag, you’ll find these tags very helpful when working with the Text Editor.
|TAG||WHAT IT DOES|
<img src=”url of image file”>
|Embeds an image in your page.|
|Breaks a line of text to the next line. Similar to soft return on keyboard.|
<!-- hidden code or info here -->
|This is the comment tag which is used to hide code or any notes you make in the Text Editor that you do not want to display on a web page.|
<blockquote> or <q>
|Use either of these tags for a quotation in your copy.|
|Character Entities||For all non-alphanumeric symbols such as copyright or trademark. Detailed list.|
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 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.
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.
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.
If you are having problems with having tags stripped out, this could be your solution.
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
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:
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.
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.
Bud Kraus firstname.lastname@example.org 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