Build Your Own Business Website header image

WordPress 3.9 Crash Course – Part 11 – Using the WordPress Text Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

We now have WordPress 3.9 all set up so the next thing we’re going to do is take a look at the WordPress text editor. It is the same in both posts and pages.

Let’s come over to our Pages and we’ve got 3 pages here. We’ve got the Blog page that we created to display our blog posts, the Home page that we created to have our home content and the Sample page that was originally created.

Adding Text to the Editor

I’m going to start off by editing the Home page. And for demonstration purposes I’m going to use lorem ipsum text. This is dummy text. It’s what graphic artists have used for a long time to fill up layouts. So here I am on my page and I’m going to paste that lorem ipsum text. Hit update and now I’ve got some text in there.

What the Edit Page View Looks Like

When you first open up your page editor, it’s going to look like this. Your page editor can have a bunch of things. The two main themes that I teach are Thesis and Genesis and they both have a bunch of meta boxes that follow after the content editor but in the default WordPress theme it doesn’t and so you don’t see any of the boxes that can be available.

In fact, if we come over and just look at this seminar page, you’re going to get an idea of what a page can look like if it’s got a lot of other things in it like video post options, SEO information, different javascript that could be added.

I’ve got something from Thesis multimedia box. I’ve got the ability to add a custom excerpt. I’ve got custom fields, discussion settings and wishlist member content protection. There can be a lot of choices under the content editor which are all added by various plugins or the theme you’re using.

2 Modes of the Text Editor

The text editor has two modes. It has the Admin mode where we’ve got all kinds of tools around and it has the Distraction Free mode. You can click on the Distraction Free mode and now all you have is just the text with nothing else going on.

If you want some kind of a toolbar, you can just go up to the top and you’ll get a minimal toolbar. It’s a much more reduced toolbar. If you hover over this section here you’ll be able to see where you can put your cursor and start typing.

It’s called Distraction Free Writing so if you want a nice clean canvas to write your post on this is the perfect way to do it. Then over here exits the full screen view and then you’re in your regular admin screen.

So those are the two modes, you’ve got the dashboard mode and what is in WordPress 3.9 the distraction free mode. It used to be called the fullscreen mode.

Different Views of the Editor

You also have two different views of the editor, that is you have the visual view and you have the text view.

Text View and Visual View

The text view of the editor shows any HTML that’s embedded in it. It doesn’t show the text in a special font or anything like that. The visual view of the editor shows you sort of what the text is going to look like on the page. Not entirely but sort of.

There are different reasons for working in different versions that is, working in visual versus text view. There are some things you can only do in the text view but for lots of things the visual view I think is perfect.

WordPress does allow you to disable the visual view for yourself. So if you’re the kind of person who prides himself in being able to write their own HTML and you don’t want a visual editor you can always disable it by clicking that checkbox. But I think there are a fairly small number of people who fit in that category.

The editor has some interface aspects to it. You’ve got the little button that takes it to the Distraction Free Writing, you’ve got the tab visual and text and we’ve also got toolbars.

Text Editor Toolbar Options

This toolbar used to be called the kitchen sink before WordPress 3.9. When you click on this little icon it opened up the second toolbar and showed you the kitchen sink. This toolbar icon should be reasonably familiar to you if you’re accustomed to using a Word processor because the icons essentially do what you expect them to do.

This opens and closes the kitchen sink, this is a help. In this case, the help just shows you keyboard shortcuts and it uses pretty much the same keyboard shortcuts that you would expect. Control A selects everything, Control C copies, Control Z undoes, Control B bolds just as you would expect.

It has a pretty common set of keyword shortcuts to the extent that you use those. You can also select text and bold it using the icon or select text and italicize it or strike it through. You can do all those kinds of things.

You can create bulleted lists or numbered lists. You can create block quotes so if this is some piece of information that was a quote you can set it up as a block quote. If you are a fan of the horizontal rule you can insert a horizontal rule or horizontal line.

You can align to the left, to the center and to the right. If you’ve selected something you can create links. You can insert a Read More tag although that really only works on posts. You can set different text styles here which we’ll look at in a minute. You can underline text.

Why on earth the justify button is not up here I don’t know but you can left align, center align, right align and then justify. You can set text colors which I don’t recommend. You’ve got pasting. There are some things that are responsive to undo formatting. You can insert special characters. You can indent, increase or decrease indentations and undo or redo.

Those are the options you have and you get to all of those things by clicking on the toolbar from here.

If you go to the text view of the toolbar you’ll notice that the toolbar is quite a bit different. It has a much more limited number of things you can do. For example, if I select this block of text and hit bold, you’ll notice what it does is it wraps that in HTML strong tags. If we take this and make it italic, it wraps them in emphasis tags.

There are some things that you can do with this editor but you can’t do everything. Most of your choices are really available to you here in the visual editor of the text editor.

If you’re asking yourself what does something do? All I have to do is hover over it. That’s pretty much the case with all of these things. All you have to do is hover over them and they will give you ad indication of what they do. Let’s update this and view our page. Now our Home page has all this content on it.

0 Comments… add one
0 comments… add one

Leave a Comment