This chapter is from the book
This chapter is from the book
This chapter is from the book
The Post and Page Editor Explained
The first thing to know is that the Post, Page, and Custom Post Type editors are functionally the same. The only differences between them come down to Posts and Custom Post Types having sections to add Categories and Tags, whereas Pages have Page Templates instead (not that the functions are the same). Just like with Menus in Chapter 10, “Tweaking, Tuning, and Customizing Your WordPress Site,” checking out the Screen Options is a good idea here, too. Figure 11.1 shows the options I like to see. I tend to write for sites that have more than one author, so I like to be able to switch authors if I need to. I also like to be able to see the check marks to enable or disable comments or trackbacks on that post (or page) as well. If these bug you, hide them from view. Many plugins (like WordPress SEO and All In One SEO Pack) add sections to the Editor as well, so things can get cluttered at times. Hide the sections you don’t want to see (or don’t need to see), and you’ll be happier for it. You can also collapse sections by clicking the triangle in the corner of the title bar. Heck, you can even move the sections around to the order you want by clicking and dragging them. The Post and Page editors are very flexible to match how you like to work.
)
Figure 11.1 Screen options for the Editor window.
Now let’s get down to the Editor itself. Regardless of whether you mouse over the Posts button in the admin area and select Add New, hover over the Pages button and select Add New, or use the +New menu at the top and select Post or Page (Figure 11.2), you’ll get to the Editor screen (for Posts or Pages).
){kind=link}
Figure 11.2 +New menu.
Figure 11.3 shows the Post Editor, and Figure 11.4 shows the Page Editor. They look pretty much the same, don’t they? This is good. You don’t have to learn different editors for the different kinds of WordPress content. Even Custom Post Types use the same Editor, making learning those easy as well. Besides the top of the page that says Add New Post/Page, the only difference you’ll see is in Figure 11.5—the Tags, Categories, and Post Formats on the Post Editor and Page Templates in the Page Editor.
)
Figure 11.3 Post Editor.
)
Figure 11.4 Page Editor.
)
Figure 11.5 Post versus Page Editor.
Before we continue the tour of the Editor, we need to click one wee but important button; we need to open the Kitchen Sink. This little button in the editing toolbar reveals a second row of buttons that are packed with handy features. We’ll talk about them shortly, but for now click the button and check out the fancy new buttons (Figure 11.6).
)
Figure 11.6 Opening the Kitchen Sink.
Because we have Jetpack enabled, we have an extra button next to Add Media: Add Contact Form. As you add other plugins or themes, more buttons might appear in your editing area. Some themes help you with quick shortcodes for buttons, multicolumn layouts, and other tools, but for now we’re going to stick to the basics.
Most of the icons on the toolbar should be pretty familiar to you if you’ve used a word processor, but some might leave you a bit stumped, so let’s cover those. Figure 11.7 has the annotated image and the descriptions follow.
)
Figure 11.7 A few tools you might not recognize.
Let’s start at the top and work our way down through the buttons. The pair of icons that look like links in a chain are the tools for creating (the whole links) and removing (the broken links) links in your content. They don’t “light up” until there is text selected. Next is an odd-looking button that inserts the <!-- more --> HTML tag in your post at the insertion point. The “more tag” is what gives you the break in your content where you’d see the Read More... link. If your theme shows just excerpts on your home page or archive page, you might not ever need this. However, if you have a really long post that you don’t want taking up a lot of real estate on the home page, you can use this tag to split the post into two parts so readers can finish the post on its own page. This makes for less clutter on your home page but lets people continue reading if they want. The button with the arrows pointing out to the corners is the full-screen, distraction-free writing mode. A common practice for many writers (including this one) is to block out all other distractions while writing to focus at the task at hand—writing. If you click the button, you get a screen that looks like Figure 11.8.
)
Figure 11.8 Distraction-free writing.
When you start typing, even the toolbar at the top disappears. Talk about focus! You already know what the Kitchen Sink is, so let’s move down to the next row. The Paragraph Styles menu (Figure 11.9) lets you quickly switch between different built-in styles for your text. These aren’t definable styles; these are HTML styles that are important for creating structure for documents. Paragraph is normal text, Address is for addresses, Preformatted is typically used for code, but the headings are probably the most important ones in the list. Heading 1 is usually the title of the post or page, but consider Headings 2 through 6 as sections and subsections of your content. Breaking up the content with headings does several things: First, it makes the content easier to read. There are breaks in the flow of the text for people’s eyes to stop on. Second, it gives your readers an idea of the structure of your content. H2 is a major heading after the title, H3 is a subsection of the H2 above it, and so on. Again, a structure makes it easier for people to read and follow your content. Third, headings give search engines an idea of the big sections of the document as well so they can characterize and index the content more fully and accurately. Headings are a simple thing you can do to make your content so much better for readers and search engines. The styles menu is one of my favorite tools in the Kitchen Sink, but my real favorites are still to come!
Figure 11.9 Paragraph styles.
The “A” with the gray bar is a menu that lets you change your text’s color (Figure 11.10). This is something that I tend to caution against. It is very easy to get carried away with colors in your text and have things get out of control. I’ve had to fix more than my share of posts and pages that went sideways from over-exuberant color application. Use it like hot sauce on your food; use a little to try, and use a lot only if you know what you’re doing.
){kind=link}
Figure 11.10 Text color menu.
The next two buttons, Paste as Text and Paste from Word, go hand in hand with each other. They handle the same task or problem in slightly different ways. Suppose you have some text from a Word document (or web page) that you’d like to put into your post or page. However, when you copy and paste the text, everything seems messed up on your site or the text just looks different from the rest of the site—and just wrong. These buttons fix this. After you copy the text, but before you paste it into your post or page, you can click the Paste as Text button (Figure 11.11) and paste the text into the window. Then when you click OK, WordPress will put the text into your post as plain text. All formatting, links, and such will be gone. Now, if you’d like to keep some of the formatting (bold, italic, bullet lists) and the links, you click the Paste from Word button and do the same steps (Figure 11.12). Now when you click OK, WordPress keeps some of the formatting and discards the rest. Paste from Word is like “Paste and Match Style” functions in word processors. Use this for times when you want the basic formatting, but not things like fonts, font sizes, or colors. Believe me, this is a very handy button indeed!
)
Figure 11.11 Paste as Text window.
)
Figure 11.12 Paste from Word window.
NOTE
In the newest version of the code that makes the editor work, the need for Paste from Word has been diminished. The basic function handles pasting rich content (the term for formatted text) much more smoothly. As good as the Editor is, it’s better to be safe than sorry in my book. I use Paste as Text and Paste from Word myself.
The little eraser icon is a Clear Formatting button. It’s for those cases when the formatting of the text has gotten out of hand and you need to start from scratch. It happens. It’s easy to get formatting a little wonky if you’ve been working on a post or page for a while and maybe copying and pasting sections of text around. This will get you out of a jam in a click.
The last button on the tour is the Insert Special Character/Symbol button. When you click that button, you’ll get a table of special characters and symbols you might need in your text (Figure 11.13). If you know how to type en dashes, em dashes, or ü, the Editor will handle those just fine, but if you don’t, this is the tool you need.
)
Figure 11.13 Insert special characters.
Now that we’ve discussed some of the key buttons, let’s start creating content.