Part III: Working with Written Content
Lesson 7: Working with the Text Editor
Finally, Figure 7-3 shows the single row of buttons for HTML mode.
Figure 7-3
Sizing the Text Editor
One way to change the size of the Visual Text Editor so you have more room to work is to locate the three lines on the lower right-hand corner of the editor box, shown in Figure 7-4, click them with your mouse, and drag the box downward (this does not work in HTML mode).
Figure 7-4
WordPress will remember the new height for as long as you’re logged in. If you would rather have the Text Editor larger by default each time you log in, you can change that under Settings ➪ Writing as shown in Figure 7-5 (the “Size of the post box” setting).
54586book.indb 55
54586book.indb 55 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
56
Part III: Working with Written Content
Figure 7-5
Keep in mind that this default sizing will apply to all users on the system, but they’ll still have the abil- ity to resize the box each time they log in.
However, height isn’t always the only issue you may have with the size of the Text Editor. You could fi nd your screen looking like Figure 7-6 (possible causes: as you add plugins to WordPress, they may place more buttons on your Text Editor or perhaps you’ve increased the text size of your browser and the button bar gets larger as a result, pushing the Text Editor to the right).
Figure 7-6
54586book.indb 56
54586book.indb 56 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
57
Lesson 7: Working with the Text Editor
Whatever the cause, you need to fi nd more width and for that you have a few options:
1. Increase the width of your browser window — the center column with the Text Editor is fl uid and will expand with the window.
2. If you’re already at your screen’s limit, another option is to collapse the admin menu on the left side of the screen, as shown in Lesson 4.
3. You can set the Text Editor to full screen mode. By clicking the Full Screen button the editor expands to take over the whole of your screen. The button bar remains visible at the top, along with the buttons for the Upload/Insert menu. To get back to the normal screen, just click the Full Screen button again.
4. Finally, a method introduced in WordPress 2.8 is to make the Add New Post page have only one column instead of two. To change the columns, open up Screen Options at the top right and select
“Number of Columns: 1”. All the boxes on the Add New Post screen will still be there; they’re simply moved into a single column with the Title and Text Editor at the top.
If you do change to a single column and then change back to two columns, WordPress does not automatically restore your screen. Instead it makes space for the second column and you’ll need to drag back the boxes you want to appear on the right-hand side.
Styling Text
Whenever you’re thinking about styling some text, keep in mind these two points:
Does the styling help visitors understand what you’re saying in the post or is it simply adding
❑
clutter to what they see, no matter how “pretty” it looks?
Take the example of making text bold, which was covered in the preceding lesson. If you use too much bold text on a page, the purpose begins to get lost. Everything becomes impor- tant so nothing stands out properly. Like that.
Is this styling needed for this post alone or is it something that might better be handled by your
❑
theme’s style sheet because you want to develop a standard style across multiple posts?
I often see people create special styles for a section heading on a post. Those headings are already controlled by your theme. Creating a style for a particular heading overrides what’s in the style sheet, and that’s okay, but maybe what you really want to do is change the style sheet so that all headings of that type look the same.
There isn’t time to go through all types of text styling here, and I cover the styling of large bodies of text in the next lesson, so I’ll cover just a few common issues.
Underlining
I’m not a fan of using the Underline function at all, at least not on the Web. I think it’s just too confusing to your visitors because underlined text spells “link” in their minds. They try clicking the underlined text and you either disappoint or confuse them.
54586book.indb 57
54586book.indb 57 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
58
Part III: Working with Written Content
I know some uses of underline are actually required, such as in scholarly documents, but in cases like that, the visitor has some context and is familiar with the underlining. But if you need to emphasize text it’s usually best to stick to bold and italics, or perhaps color.
Coloring Text
Having mentioned coloring text, remember a few things before you start doing it:
Don’t use the same or similar color as the color of your text links or there’s going to be confu-
❑
sion for the visitor.
If you have colored headings in your theme, using the same color for pieces of text can also be
❑
confusing, though a shade of that color maybe isn’t so bad.
Always think about the background color behind the text. You don’t want anything that’s going
❑
to blend in too much with the background, especially when people are printing the page in black and white.
How, then, do you color text? It’s the button with the letter A on the second row of the Text Editor but- ton bar. If you highlight some text and just click that button, it will turn the color of the small bar dis- played on the button. If you want to change that color, click the down arrow and you get some preset choices. Click More Colors and you get a popup window where you can choose from any color.
The Formatting Menu
The drop-down menu on the left-hand side of the second row of buttons can be a bit confusing at fi rst.
It seems to be, as the name suggests, a way of formatting text in different ways, but the trick is, these formats apply only to paragraphs. So, for example, if you highlight some text to be emphasized, and choose Heading 2, instead of those few words changing, the entire paragraph changes. Styling of para- graphs is covered in more detail the next lesson, so for the moment I’ll leave it at this: don’t try to use formatting to highlight individual words or phrases.
Working with Text Links
Creating links within the body of your text is important for leading visitors to more information — it’s one of the greatest strengths of web-based material. But it’s easy to mess up the formatting of links, so thankfully the WordPress Text Editor makes linking very simple. It’s not quite as straightforward as bolding, but you’re led through every step with an easy-to-use form.
Much of what is said here applies to creating links using images. Details about linking images are cov- ered in Lesson 13.
The fi rst thing to do is highlight the text that’s going to be linked. Sometimes deciding which text to link is fairly obvious: “I was reading an article in People magazine today and…” But the best rule of thumb is to link as much of the text as relates to where you want to take your visitor.
Once your text is highlighted and you click the link button, you get a popup window like the one in Figure 7-7.
54586book.indb 58
54586book.indb 58 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
59
Lesson 7: Working with the Text Editor
Figure 7-7
As the name Insert/Edit Link suggests, this window is not only for adding new links, but also editing existing ones.
Link URL is obviously where you’re going to put the address of the web page you’re linking to. WordPress automatically puts in the http:// so you’re not wondering whether it’s required. It’s also highlighted so that if you’re like me and paste URLs copied from your browser address bar, you’ll automatically erase the default text and not end up with http://http://.
Next, from the Target drop-down menu, you can decide whether you want your visitor to be taken to a new browser window (or tab) or to remain in the current window, with the new content replacing the existing content. If you don’t make any choice, the link will automatically stay in the current window and replace its contents.
Either way of handling this has pros and cons. I personally like it when a link opens in a new window or tab — I’m not a big fan of using the back button (which may explain why I have dozens and dozens of tabs and windows open at any one time). Others will say it’s confusing for new windows or tabs to be open, particularly when visitors end up with a whole raft of them. Do what you think best.
You can also give your link a Title, which is what people will see when they mouse over the link. This can also be helpful in search engine optimization, which I talk about in Lesson 30.
You don’t need to worry about the last option in this window — the Class of the link. This can be handy for advanced style sheet work, but mostly you can just leave it at Not Set.
Once you have everything entered, click Insert and you’ll see your text underlined and colored. Remember that this link format is just to help you distinguish the link in the Text Editor. How your links look on the web site depends on your style sheet. And of course, before leaving the screen, click Update Post or your nice new link will not be saved.
54586book.indb 59
54586book.indb 59 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
60
Part III: Working with Written Content
Creating E-Mail Links
Under the Link URL heading you also have the option of creating a link that starts up the visitors’
e-mail program and allows them to send you a message. Instead of a website address, you put this in the Link URL box: mailto:youremail@you.com. That will cause the link to open up the user’s e-mail program and place the e-mail address in the To: box of the new message.
If you’re concerned about spammers grabbing the e-mail address in the link, you have a couple of options:
don’t create a link, but just put in an e-mail address formatted something like this: youremailATyouDOTcom. It doesn’t fool all spam robots, and isn’t as convenient for your visitors, but it can help control spam harvest- ing and is simple to do.
A better option is to create a form through which people get in touch with you. A number of plugins for WordPress help you create forms, and I talk about those in Lesson 36.
Editing Links
To edit an existing link, just click it and you’ll see the two link buttons highlighted. Click the solid link button to get the popup window you saw earlier. You can change any of the options in the window and then click Update to save those changes and be taken back to the Text Editor.
If you want to change the highlighted link text, you simply erase words or insert words, and the link remains in place. If you want to change all of the wording, highlight the entire link and begin typing the new text. Be careful not to highlight anything beyond the link or else you’ll break it and you’ll need to create a whole new link.
If you want the link moved to new text elsewhere in the post, you could highlight the link, copy it, and paste it where you want. Then you would change the wording and fi nally remove the earlier link. It’s probably just as easy, however, to copy the URL from the old link, remove it from that text, and create a new link using the copied URL.
Removing Links
I’ve been careful to use the phrase “remove a link” rather than “delete a link” because removing a link means you’re keeping the words that were linked. Deleting a link could mean that you want to get rid of the words as well as the link.
To delete a link you simply highlight words and delete them, but to remove a link you need to click the link itself and then choose the broken link button. You’ll see the underlining and the coloring removed from the words — then you know the link is no longer functioning.
When removing links, remember that you need to Update your post for the change to take effect.
Because you didn’t alter any wording it’s easy to forget.
54586book.indb 60
54586book.indb 60 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
61
Lesson 7: Working with the Text Editor
Impor ting Text
Nobody likes typing when you’re just re-entering things into a post, so copying and pasting is a popu- lar sport. Quite often, though, you’re copying from a source that can cause you problems by carrying hidden coding with it.
I often have clients say to me that they can’t change a certain part of their text, no matter what they try to do in the Text Editor. A look behind the scenes in HTML mode quickly reveals the problem: hidden coding that’s controlling the look of the text. In Figure 7-8, compare the text on the left — what the per- son saw in her word processor and wanted to copy — with the actual coding that got pasted into the WordPress Text Editor.
Figure 7-8
Because of the way style sheets work, this coding takes precedence over anything in your style sheet.
Then there’s the problem of excess coding — you get a few of these on a page and it can make your HTML bloated and slower to load.
One way around the problem is to put any text into a simple text editor program fi rst (such as Notepad on Windows or TextEdit on Mac) and then copy and paste from there. The excess coding will be stripped off in the process, and that includes all formatting, even bold and italics.
If you want to try and preserve some basic formatting, so you don’t have to reconstruct it in the Text Editor, you can try using one of the Paste buttons. There’s one for text copied from Word and one for pasting text from other sources. The Word button is most commonly used and reports vary on what formatting will be preserved from your document, so it’s really a matter of trying it out. Basic things like bold text usually make it through the process, but complex layouts like tables and so on typically do not.
54586book.indb 61
54586book.indb 61 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
62
Part III: Working with Written Content
Try It
In this lesson you practice creating a new link.
Lesson Requirements
A post with text.
Step-by-Step
1. Make sure you’re in the Visual mode of the Text Editor.
2. Highlight the text you want to be linked.
3. Click the link button (the unbroken chain icon on the top row).
4. In the address bar of the window or wherever you have the full URL you’re linking to, copy the web address.
5. In the popup window of WordPress, paste the URL into the Link URL box.
6. On the Target drop-down menu, choose Open Link in New Window.
7. Enter a Title for the link.
8. Click Insert.
9. Verify that the text is linked the way you planned.
10. Click Update Post.
11. Click Preview to see how the link looks on the live site.
To see some of the examples from this lesson, including how to import text from a Word document, watch the video for Lesson 7 on the enclosed DVD.
54586book.indb 62
54586book.indb 62 10/15/09 12:21:02 PM10/15/09 12:21:02 PM
Laying Out Text
Now that you know how to style bits of text, it’s time to look at styling larger blocks using the Text Editor and laying out entire posts. In this lesson you learn how the Text Editor behaves and tips for how to arrange your written content effectively. In the end, it always comes down to what’s easiest for your visitors to read.
Styling Paragraphs
I’m using the term paragraph to refer to any block of text that you’ve separated in the Text Editor by using the Enter key. That’s because in HTML terms, the Text Editor sees any text separated in that way — even a single sentence — as a paragraph.
Aligning
To change the alignment of a paragraph, you simply need to click anywhere in the paragraph (there’s no need to highlight the whole paragraph, though you can) and then click the appropriate alignment button — left, center, and right appear on the top row of the button bar.
There’s a fourth alignment button that’s only visible on the second row of the button bar, and that’s for justifi ed alignment. This is when text lines up fl ush on the left and the right, as shown in Figure 8-1.
Though the symmetry of this look pleases one part of my brain, there’s another part that says
“isn’t that gap between words the same gap that indicates the end of a sentence?” Still worse is when justifi cation is used on very narrow paragraphs, resulting in gigantic gaps between words.
As a rule, I never use justifi cation, but if you do, make sure your aesthetics aren’t getting in the way of readability for your visitors.
54586book.indb 63
54586book.indb 63 10/15/09 12:21:12 PM10/15/09 12:21:12 PM
64