How to Add Content to your Site
Good evening everybody and welcome to this Monday evening edition of our live class on How to Build a Professional Website Using WordPress and Thesis. We will be looking at Lesson 9 on how to add content to your web page or your site.
I want to remind you that this is intended to be interactive and I am looking for you to ask questions directly related to your own site. It doesn’t really matter what the question is, feel free to just dive right in and ask those questions. If you would post those in the question box, that would be great and we’ll be taking questions here in another hour and a piece so please be prepared.
How to Use the WordPress Text Editor
We’re going to start off tonight by talking about how to use the WordPress Text Editor. I know this is a very basic concept but for people who have no experience whatsoever with WordPress, there’s going to be a lot of new good information and for those who have been in and out of WordPress for awhile, there’s going to be plenty of new information here.
Actually, the whole text editor thing has been evolving substantially in the last couple of editions of WordPress and if you’ve been using WordPress since 2.7, you probably are still using it the same way and things have changed considerably in the last year so we’re going to be talking about that.
We’re going to do that from our demonstration site. This is the site that we are creating and this is the site where we are right now as we finished up last week and we’re going to start talking about adding content to this. Just select “Edit this Page”, we’re going to start off by taking a look at this Homepage here and look at the different views of the text editor. It’s important to understand that the text editor has two different modes and two views within each mode.
Two Views and Two Modes of the Text Editor
By default, your text editor probably looks exactly like this. This is the dashboard mode and in the dashboard mode, you see all the rest of your administrative dashboard around you. However, it also has a full screen mode and the full screen mode is deliberately intended to remove all distractions and essentially takes everything away and allows you to start typing as if you’re working on a plain piece of paper. Those were the visual views of that.
You have the dashboard visual view and the full screen visual view and the HTML views. The visual view is sort of a, “What you see is what you get” kind of a view. It’s not actually, “What you see is what you get” , it’s more like, what you see is a hint of what you’re going to get because the visual editor doesn’t know anything about the CSS that’s really running on your site.
The visual editor expands to be whatever width is available to you in the window even though your column might only be 640 pixels wide. With the window opened as wide as this one is, the column looks like it’s a thousand pixels wide and it’ll fill up that space. That just means that what you see is not actually what you get in this context.
The HTML view however, is intended to show you the code view. You can use the HTML view to actually add HTML code to the page that would not be visible in the visual view but is perfectly visible in the HTML view. In fact, there are things you’ll do in the visual view that would generate HTML code and you’ll be able to see that HTML code in the HTML view. As it turns out, the HTML view also has its full screen version and you can look at this version and work in the HTML view and the full screen version as well.
Those are essentially the two modes and two views of the WordPress Text Editor. More often than not, you’ll probably be working in the visual mode and in the dashboard view. It’s certainly is the way I work. This is generally the way in which I add text and edit pages. It seldom occurs to me actually to go into the full screen view but nevertheless, this is a way in which you’re likely to work fairly routinely and this dashboard view has really 3 components to it.
Components of the Dashboard View of the WordPress Text Editor
It has the Media Insert Component, it has your Toolbar and it has the View Tabs, so the Visual view versus the HTML view. Those are really the 3 main components and of course there’s the place where the content is actually added.
The toolbar has a couple of different views as well what we’re looking at right now is the minimal version of the toolbar. It has a little bit of text formatting and this has your link and that has something that’s specific to blog posts, more tag,a spell checker and the button that toggles to the full screen view.
Using the “Kitchen Sink” Toolbar
Then it has the “Kitchen Sink”. When you click on the “Kitchen Sink”, what you get is the entire toolbar and this includes more formatting options or and more functionalities for the Toolbar. We click the “Kitchen Sink”, it gets hidden, click the “Kitchen Sink” again and it shows up.
Now, if you’re looking at this in the full screen view, there is no real equivalent to the “Kitchen Sink” here. You do have your toolbar but it has the “Insert Media” embedded into it. It has a minimum of other tools. For example, bold, italic, an unordered list, an ordered list, a block quote and links but there is no “Kitchen Sink” view of this toolbar inside of the Full Screen Visual View.
The Help Button and Hot Keys
However, it does have an interesting “Help” that is a little bit different than the “Help” in the other version. This Help gives you the shortcut commands. You may not be able to see the “Kitchen Sink” buttons but you can still access all of the “Kitchen Sink” commands by using either Control+a letter or Alt+Shift+a letter as you can see here.
You do have these hot keys and this “Help” to find the hot keys embedded in this toolbar. Notice that the toolbar buttons have tool tips. If you “Exit Fullscreen” and you hover over something, you can see it tells you what that something does. Indents or Outdents or Undoes or you can “Paste Word Document” or “Paste as Plain Tex”t or “Change the Font Color” or whatever. You can see what these things do simply by hovering over them.
I encourage you to do just that. Look at these buttons, hover over them, experiment with them a little so that you can see exactly the kinds of things that you can accomplish using this toolbar. I’m always surprised when somebody sits down in front of the text editor here and maybe has been using the Text Editor for quite some time but doesn’t know that there’s a “Paste from Word” button here.
When you say, “Click on the Paste from Word button”, they don’t really know what you’re talking about because they haven’t really looked at the toolbar. But if you look at the toolbar and you hover over it with your mouse, you’ll see the tools that are immediately available to you, that is in the Visual View.
Toolbars Available in the HTML View
Now in the HTML view, you have fewer tools. You do have a bold or italic, you do have a link, you do have a block quote and cross through and a few other things like that but the number of tools is reduced and there’s no ability for you to select “Kitchen Sink”. There are other buttons here. This is a more pared down version of what’s available here when you switch to full screen.
When you switch to full screen, you can “Insert Media”. Exit full Screen and come back to the main developer toolbar. There are a fewer buttons in the HTML view than there are in the Visual View. Become acquainted with how to use this because this is probably going to be where you spend a lot of your time when you are working on your website and that’s working in this Content Editor here.