Last week I encouraged you to use HTML mode rather than visual mode for preparing your blog posts for scheduling.
I can hear you from here:
“But I don’t know HTML!”
“I prefer wysiwyg technology!”
“I like to write in purple Curlz font!”
First, let’s demystify HTML or text mode. It does not mean you need to know how to create a website. In fact, it doesn’t mean you need to know any code at all. You can do everything you need from the menu bar.
But just as you’d pick up some Russian by hanging around Siberia for a few months, you’ll pick up some HTML by hanging around in the text mode space. It won’t be painful, and there isn’t a test. In the end, you may find it convenient to know a few key phrases that come up often.
HTML stands for Hypertext Markup Language and is not shown to the page viewer as code. Instead, it translates what you meant and shows it that way.
Here’s how to use text mode in WordPress blog posts:
1. Use the buttons in the task bar.
You want a word in bold? Highlight the word and click [b]. The code now surrounds the word (or words) you highlighted. The button [i] for italics is right beside it and works the same way.
Next is the [link] button. Highlight the words you want to be clickable, then click [link]. A box will pop up offering you the option to insert or edit a link. Where it says URL, paste in the URL you want the click to go to. You can skip the title space completely. Then tick the box that says “open link in a new window/tab” if you refer that option. (I do.) Click [add link] and the pop-up will disappear, leaving a coded link in your post-writing pane.
The next button offers the use of a blockquote, such as the one this paragraph is in. In this case you’ll usually highlight a paragraph or two before clicking the [b-quote] button. What it will look like is determined by the style prescribed by your theme. Many put the entire quote into italics as well as indented. If you’re not sure what your theme’s default is, set up a blockquote and have a look by using the preview button.
The [del] button provides what is more commonly known as
strikethrough. It’s hilariously funny amusing at times to show how you’ve changed a sentence on purpose.
The next two buttons I personally don’t see much use for. The [ins] button takes the remainder of the paragraph and highlights it. The [img] tag is a clumsy way to link to an image. Instead, use the [add media] button on the bar above. (I’ll do a separate post on using images on your WordPress blog next week.)
The next three buttons are related: [ul] [ol] [li]. These all have to do with lists.
- [li] creates an unordered list (just bullet points, like this one).
- [ol] creates an ordered list (numbered).
- And [ul] indents the whole works so it’s easy to see what’s part of the list and what isn’t.
It takes a bit of experimenting to get it clear.
The next button is [more]. With this, you select the snippet that will show on a page with a group of posts, ending it with a read [more] code. Note: the read more doesn’t show on a single-post page, where we assume the reader wants to view the entire post.
If anyone knows what the [close tag] button actually does, let me know. It seems like it should alert you to the fact that you haven’t closed a tag and offer a solution. However, whenever I’ve played with it, it seems to do absolutely nothing.
[proofread] lets you know when your spelling and grammar are out of whack, and [fullscreen] removes the peripheral so you can only see the post you’re trying to write.
Half of those you won’t ever use. Another quarter you’ll use occasionally.
And yes, there are missing buttons. You can’t click a button and change the font size or color, or center/full/right align a post. You can’t click a button and get different sizes of headings.
- What do the buttons do in Text Mode aka HTML in the WordPress dashboard? click to tweet
- How (and why) to use Text Mode aka HTML instead of Visual in #Wordpress: click to tweet
Which brings me to the second way to use HTML in your blog posts:
2. You can write the code in yourself.
When you’re using the same tags over and over (such as links or bold), it may be faster to keep your hands on the keyboard and type them in yourself than to mouse back and forth to the buttons.
Examine the codes created by the buttons you use a lot. Notice that they all use less-than < and more-than > to surround the command. They nearly all have both an opening tag and a closing tag. There’s no magic in the buttons. You can type those bits yourself, if you like, with the same result.
To create some of the common tags that WordPress hasn’t seen fit to prepare buttons for, however, you’ll either need to switch to Visual Mode (please don’t) or type in the code from scratch.
Visual Mode, also known as WYSIWYG (what you see is what you get), creates a ton of bloated code that can make editing a real pain in the patootie. There are easy solutions for everything you’re likely to want to do in your blog post. Remember last week’s post on pretty and readable posts? This means you don’t want a ton of different fonts and colors and indents, etc. You want a lot of uniformity instead.
A few exceptions include headlines to break up the post. The largest font can be created with <h1> at the beginning of the title and </h1> at the end. You can choose any number from 1-6, but frankly, I don’t see a lot of point in any number larger than 3.
The other exception I use fairly often is center justification, usually used in conjunction with a headline. It can be achieved with <center> at the beginning of the part you want centered, and </center> at the end.
See? It’s not that hard, and it will give your posts less weird code and a more uniform, readable look.
P.S. I used the postable widget to create code I could show you.