WordPress offers two ways to display content: Posts or blog entries are date-sensitive content that are displayed in reverse chronological order on blog pages. They can be assigned categories and they become part of the site's archives when created. Pages are content that are not part of the blog itself. Instead, they are accessed through page links that can be displayed in the header, sidebar, or elsewhere in the blog. This terminology can be confusing, since both posts and Pages appear on Web "pages." In an attempt to keep things straight in everyone's mind the WordPress Codex and this book use title case to indicate content using the Page feature. Most of the content you create for your blog will be created by writing posts. You're likely to use Pages for content that you want immediately accessible from blog pages, such as information about yourself or the blog, a contact form, or an archive index page. In this part of the chapter, we explain how to create both types of content. As you'll see, they're very similar. Tip Important note about Web browsers and editing toolbars The visual rich editor and editing toolbars that appear in WordPress's Write Post or Write Page administration panels are created with JavaScript. While most Web browsers are capable of displaying these toolbars properly (Figures 10a, 10b, and 10c), not all can (Figure 10d). Figure 10a, 10b, 10c, & 10d. Not all Web browsers are equal. Although the editing toolbar appears to function properly in Explorer for Windows (top), Firefox for Windows (middle), and Firefox for Macintosh (bottom-left), it doesn't appear at all in Safari for Macintosh (bottom-right). Shame on Apple! Your choice of Web browser will determine how well you can follow the instructions presented throughout this chapter. If your Web browser cannot properly display the editing toolbar, we recommend that you download and install a compatible browser, such as Firefox. Tips | You can download a free copy of the Windows, Macintosh, or Linux version of Firefox from www.getfirefox.com. We use Firefox for most browser screenshots throughout this book.
|
To create a post or Page 1. | If necessary, log into your blog and display the Dashboard.
| 2. | Click the Write button.
| 3. | To create a post, click the Write Post button to display the Write Post administration panel (Figure 11).
or
To create a Page, click the Write Page button to display the Write Page administration panel (Figure 12).
Figure 11. The Write Post administration panel, with some options displayed. Figure 12. The Write Page administration panel, with most options displayed. | 4. | Enter a title for the post or Page in the Title or Page Title box.
| 5. | Enter the text of the post or Page in the Post or Page Content box. The text can be as long or as short as you like. Be sure to press or each time you want to start a new paragraph.
| 6. | Format the text, insert links, split the text, or check the spelling as instructed in the next section titled, "To use the visual rich editor's toolbar."
| 7. | Insert images as instructed in the section titled "To insert an image."
| 8. | Set post or page options as instructed in the section titled "To set post options" or "To set Page options."
| 9. | Click Publish. The post or Page is added to your site.
| Tip To use the visual rich editor's toolbar 1. | To apply text formatting, select the text you want to format and click the appropriate button (Figure 13):
- Bold applies bold formatting (Figure 14).
Figure 13. The visual rich editor's toolbar. Standard buttons include: Bold, Italic, Strikethrough, Unordered list, Ordered list, Outdent, Indent list/Blockquote, Align left, Align center, Align right, Insert/edit link, Unlink, Insert/edit image, Split post with More tag, Toggle spellchecker, Edit HTML source, and Help. Figure 14. You can apply bold, italic, or strikethrough formatting to selected text. - Italic applies italic formatting (Figure 14).
- Strikethrough applies strikethrough formatting (Figure 14).
- Unordered list applies bulleted list formatting. Use this option on multiple paragraphs of selected text (Figure 15) to make each paragraph a bulleted item (Figure 16).
Figure 15. To create a list, start by selecting the paragraphs that will make up the list. Figure 16. Then click the Unordered list button... - Ordered list applies numbered list formatting. Use this option on multiple paragraphs of selected text (Figure 15) to make each paragraph a numbered item (Figure 17).
Figure 17. ...or the Ordered list button. - Outdent shifts indentation to the left or removes blockquote formatting. This button is only available if you have used the Indent List/Blockquote button on the selected text.
- Indent list/Blockquote either increases the indentation of a bulleted or numbered list or formats the selected text as a block quote.
- Align left, Align center, and Align right changes the paragraph alignment of the selected text.
| | | 2. | To insert a link, select the text you want to turn into a link and click the Insert/edit link button. Enter the following information in the dialog that appears (Figure 18) and click Insert:
- Link URL is the complete URL for the link. In most cases, this will begin with either http:// or mailto://.
- Target is where you want the link to open. Choose an option from the drop-down list to specify whether the link should open in the same window or a new window.
- Title is text that appears in a box when you point to the link.
or
To remove a link, select the link text and click the Unlink button.
Figure 18. Use a dialog like this one to set options for a link. | 3. | To split the text so it appears on multiple pages with a More link to access the second page (Figure 19), position the insertion point where you want the split to appear (Figure 20) and click the Split post with More tag button. A More tag appears (Figure 21).
Figure 19. A More linkwhich can display any text you likegives readers access to the next page of a split post. Figure 20. Position the insertion point where you want to split the post or Page text. Figure 21. A More tag appears at the split. | | | 4. | To check spelling in a WordPress.com blog, click the Toggle spellchecker button. After a moment, the text is checked and red squiggly underlines appear beneath unknown words (Figure 22). To get a suggestion for an unknown word, click it. You can then choose a correction from the list of words that appears (Figure 23). When you're finished using the spelling checker, click the Toggle spellchecker button to remove the red lines.
Figure 22. The spellchecker identifies all the words it doesn't know. Figure 23. You can use a pop-up menu like this one to select the spelling you want. | | | 5. | To edit the HTML code for a page while still using the visual rich editor, click the Edit HTML Source button. Then use the HTML Source Editor window that appears (Figure 24) to modify the code and click Update. Your changes are reflected in the visual rich editor window.
Figure 24. Use the HTML Source Editor to modify HTML code for a post or Page. | Tips | The visual rich editor is also known as the WYSIWYG editor. If you're not sure what a button does, point to it. A box with the name of the button appears to identify it. The visual rich editor applies standard XHTML codes such as <strong>, <em>, and <ul> to text. These codes are hidden from view unless you click the Edit HTML Source button on the toolbar. How various list and blockquote formatting appears in your blog depends on the associated tag options set in the style.css file for the blog's theme. We tell you more about themes and formatting in Chapter 6. The exact text of a More link (Figure 19) varies depending on settings in your blog's theme. We tell you how to modify this text in Chapter 6. To remove a More tag, select it (Figure 25) and press or . Figure 25. You can select a More tag to delete it. As this book went to press, the spelling checker was not available in the server installation version of WordPress. The HTML Source Editor (Figure 24) is not the same as the HTML Editor you use when the visual rich editor is disabled. We tell you more about that later in this chapter. To get additional information about using the visual rich editor, click the Help button in its toolbar. A window like the one in Figure 26 appears with more information. Figure 26. Clicking the Help button displays more information about the visual rich editor.
|
To insert an image 1. | If necessary, use your FTP client software to upload the image to your WordPress blog or Web server.
| 2. | In the Post or Page Content box, position the insertion point where you want the image to appear.
| 3. | Click the Insert/edit image button in the toolbar (Figure 13).
| 4. | Enter the following information in the Insert/edit image dialog that appears (Figure 27) and click Insert:
- Image URL is the complete URL for the image file.
- Image description is the text that appears if the image cannot be found or if browsing images is disabled.
- Alignment allows you to set the alignment for inline images (Baseline (Figure 28), Top, Middle, Bottom, TextTop, Absolute Middle, or Absolute Bottom) or text wrapped images (Left (Figure 29) or Right).
- Dimensions is the size of the image in pixels. WordPress automatically retrieves this information from the image file, but you can override it to resize the image.
- Border is the thickness, in pixels, of an image border. Leave this box blank or enter 0 for no border.
- Vertical space is the number of pixels between the top and bottom of the image and other content.
- Horizontal space is the number of pixels between the left and right sides of the image and other content.
Figure 27. The Insert/edit image dialog. The image appears with the text (Figure 28 or 29) in the Post or Page content box.
| Figure 28. This example shows an inline image positioned at the baseline. Figure 29. The same image, with left alignment. Tips | We explain how to use some popular FTP client software to upload files to a server in Appendix B. You can also insert an image uploaded to your WordPress blog using options in the Browse tab of the Upload area on the Write Post or Write Page administration panel (Figures 11 and 12). We explain how to upload images and insert them into posts or Pages in the section titled "Uploading Files" later in this chapter. To resize an image proportionally, enter a value in just one of the Dimensions boxes in step 4. To return an image to its original size, clear the values in the Dimensions boxes in step 4. To remove an image, select the image in the Post or Page Content box and press or . The WordPress Codex has an excellent reference guide for using images in your blog's posts and Pages. Read it at codex.wordpress.org/Using_Images.
|
To set post options 1. | In the Write Post window (Figure 11), if necessary, click the + button on the right end of the blue title bar for any category of options you want to set. The section expands to show options.
Figure 30. Use Discussion options to allow or disallow comments, pingbacks, and trackbacks. | 2. | To control comments and pings, set Discussion options (Figure 30):
- Allow Comments allows blog visitors to enter comments about the post.
- Allow Pings allows visitors to post pingbacks or trackbacks to the post.
| 3. | To require a password to view the post, enter a password in the Password-Protect Post box (Figure 31). With this option enabled, a visitor will be prompted to enter a password (Figure 32) before the post or its comments are displayed.
Figure 31. You can password-protect a post by entering a password in this box. Figure 32. In your blog, visitors are prompted to enter a password to view a password-protected post. | 4. | To set the name of the post to be used in permalinks, enter a name in the Post Slug box. The name can include only letters, numbers, and hyphens. Figure 33 shows an example.
Figure 33. A post slug is used by the permalinks feature. | 5. | To assign one or more categories to the post, in the Categories list, turn on the check box beside each category you want to assign (Figure 34). You can also use this area to quickly add a category to your blog; enter the new category name in the box and click the Add button; the category immediately appears in the list and is selected.
Figure 34. Toggle check boxes for the categories you want to apply to a post. | | | 6. | To determine how the post will be saved or published, select one of the Post Status options (Figure 35):
- Published publishes the post to the blog. This option is automatically selected when you click the Publish button after composing your post if you have not selected Private.
- Draft enables you to save your post as a draft to be completed at a later time. To use this option, be sure to click the Save button instead of the Publish button when you're finished working with the post.
- Private enables you to publish the post so it only appears when you view the blog. You must be logged into the blog to view your private posts.
Figure 35. You have three options for setting the status of a post. | 7. | To assign a specific date and time to a post, in the Post Timestamp area (Figure 36) turn on the Edit timestamp check box and set date and time options as desired.
Figure 36. To change a post's timestamp, turn on the check box and set the desired date and time. | 8. | To set the post author, in the Post author area (Figure 37), choose a user name from the drop-down list. This list will include all blog users who have been assigned a role of author or higher.
Figure 37. You can choose an author name from the Post author drop-down list. | 9. | To create a custom excerpt for the post, enter the text you want to appear in the Optional Excerpt box (Figure 38). This excerpt is used for RSS feeds if you chose the Summary option in the Reading Options administration panel and may be used in various archive and category pages, depending on the theme applied to your blog.
Figure 38. You can enter an optional excerpt for a post to be used in RSS feed summaries and elsewhere. | | | 10. | To send a trackback ping to another site, In the Trackbacks area, enter the URL for the trackback in the Send trackbacks to box (Figure 39). To enter more than one URL, separate each one with a space.
Figure 39. Enter URLs for sites you want to send trackback pings to. | 11. | To include a custom field in the post, set options in the Custom Fields area (Figure 40) and click Add Custom Field. This option, which is discussed in greater detail in Chapter 10, is available for WordPress server installations only.
Figure 40. WordPress users with their own WordPress server installation can include custom fields with their posts. | Tips | Access to the comments feature is also controlled by settings in the General Options and Discussion Options administration panels, as discussed in Chapters 2 and 4. We tell you more about comments, pingbacks, and trackbacks in Chapter 4. about permalinks and reading options in Chapter 2, and about users and roles in Chapter 5. The Draft option in the Post Status area (Figure 35) can also be used to "unpublish" a post and save it as a draft. In step 7, if you do not turn on the check box, the date and time you manually set will not be used. You can use the post timestamp feature (Figure 36) to schedule a post's publication date and time. For example, suppose you write a post today but don't want it to appear until next week. If you set the timestamp for the date and time you want the post to appear, it will not appear in your blog until on or after that date and time.
|
To set Page options 1. | In the Write Post window (Figure 12), if necessary, click the + button on the right end of the blue title bar for any category of options you want to set. The section expands to show options.
| 2. | To control comments and pings, set Discussion options (Figure 30):
- Allow Comments allows blog visitors to enter comments about the Page.
- Allow Pings allows visitors to post pingbacks or trackbacks to the Page.
| 3. | To require a password to view the Page, enter a password in the Password-Protect Page or Password-Protect Post box (Figure 31). With this option enabled, a visitor will be prompted to enter a password (Figure 41) when he clicks a link to the Page.
Figure 41. When a Page is password-protected, the password prompt appears when you click its link. | 4. | To assign a parent Page to the Page you are creating, in the Page Parent area (Figure 42) choose a Page name from the drop-down list. The list includes all existing pages. Choosing an option other than Main Page (no parent) creates a subpage that appears indented beneath its parent in Page lists (Figure 43).
Figure 42. You can use the Page Parent feature to turn a page into a subpage. Figure 43. A subpage appears indented beneath its parent Page in lists. | 5. | To set a specific template for the Page, in the Page Template area (Figure 44), choose a template name from the drop-down list.
Figure 44. You can apply a specific template to a Page. | 6. | To set the name of the Page to be used in permalinks, enter a name in the Page Slug or Post Slug box. The name can include only letters, numbers, and hyphens. Figure 33 shows an example.
| | | 7. | To set the Page author, in the Page Author or Post author area (Figure 37), choose a user name from the drop-down list. This list will include all blog users who have been assigned a role of author or higher.
| 8. | To specify where the Page will appear in Page lists, in the Page Order box (Figure 45), enter a value that sets the Page's order in relation to other Pages. For example, if you wanted this Page to appear last and you have about 10 Pages, enter 10.
Figure 45. Use the Page Order option to assign a page number to a Page. | 9. | To include a custom field in the Page, set options in the Custom Fields area (Figure 40) and click Add Custom Field. This option, which is discussed in greater detail in Chapter 10, is available for WordPress server installations only.
| Tips | Access to the comments feature is also controlled by settings in the General Options and Discussion Options administration panels, as discussed in Chapters 2 and 4. We tell you more about comments, pingbacks, and trackbacks in Chapter 4. about page templates, in Chapter 6, about permalinks in Chapter 2, and about users and roles in Chapter 5. To display a list of pages in the sort order you specify with the Page Order option (Figure 45), you must use the sort_column=menu_order argument with the wp_list_pages template tag. We tell you more about themes and templates in Chapter 6.
|
To use the WordPress bookmarklet 1. | Scroll down to the WordPress bookmarklet area near the bottom of the Write Post window (Figure 11).
| 2. | In Windows, right-click on the Press-It link.
or
In Mac OS, hold down and click the Press-It link.
A menu of options should appear (Figures 46a and 46b).
Figures 46a & 46b. The shortcut menu for the bookmarklet link on Windows using Internet Explorer (left) and Mac OS using Firefox (below). | 3. | Choose the appropriate command to add the link to your bookmarks or favorites. The exact wording of the command varies from browser to browser.
| 4. | Follow any additional steps required by your browser to add the link as a bookmark or favorite item. For simplicity's sake, we'll assume you kept the "Press It" name (Figure 47).
Figure 47. You may find it useful to add the bookmarklet to your browser's bookmarks bar. | 5. | Use your Web browser to view a Web page you want to write about in your blog.
| 6. | Select the Press It bookmark or favorite item. The Write Post administration panel of your WordPress blog appears. The title is filled in with the name of the page you were viewing and a link to the page is entered in the Post box (Figure 48).
Figure 48. The bookmarklet does most of the work of creating a new post about a Web page. | 7. | Modify the post and set options as desired to complete the post.
| 8. | Click Publish.
The entry is created (Figure 49) and you are returned to the page you were viewing when you accessed the bookmarklet.
Figure 49. An entry created from a slightly edited version of what's in Figure 48. | Tips | If you have a Macintosh with a two-button mouse, you can follow the Windows instructions in step 2. On some browsers, you can create a bookmark bar button for the bookmarklet link (Figure 47) by simply dragging it to the bookmark bar and releasing it. You only have to complete steps 1 through 4 once for each browser you use. After the bookmarklet is installed in a browser, it can be used at any time. If you selected any text in the Web page you browsed in step 5, that selected text also appears in the Post box in step 6. In step 7, it isn't necessary to modify the post in any way. You can simply click Publish to publish it to your blog as it is created by the bookmarklet. If you are writing a post about a blog entry, you might want to copy the entry's trackback link before accessing the Press It bookmark. You can then paste it into the Trackbacks box for your WordPress post. We tell you more about trackbacks in Chapter 4.
|
To preview a post or Page before publishing it 1. | Follow the instructions throughout this part of the chapter to prepare your post or Page in the Write Post or Write Page administration panel (Figure 11 or 12).
| 2. | Click the Save and Continue Editing button.
| 3. | Wait for the page to refresh.
| 4. | Scroll down to the bottom of the page. A preview of your post appears in the Post Preview area (Figure 50).
Figure 50. A fully-functioning preview of the entry appears in a scrolling window near the bottom of the Write Post or Write Page administration panel. | Tips | The preview area of the window has its own scroll bar. Be sure to use that scroll bar and not the window's main scroll bar to view the entire post preview. Any time you change the contents of the Post or Page Content box, you must click the Save and Continue Editing button to refresh the preview. The date and time in a new post's preview may not be accurate. The time will be corrected when the post is published. To save all your changes and publish the new post, click the Publish button. If you are editing an existing post, click the Save button. We tell you more about editing posts later in this chapter.
|
To use the HTML editor instead of the visual rich editor 1. | Follow the instructions in Chapter 5 to disable the visual rich editor for your user profile.
| 2. | Follow the instructions earlier in this section to open the Write Post or Write Page administration panel. The toolbar over the Post or Page Content box is replaced with QuickTag buttons (Figure 51).
Figure 51. The HTML Editor has QuickTag buttons instead of a formatting toolbar. | 3. | Enter the text of your post in the box.
| 4. | Use QuickTag buttons to apply formatting to selected text. Instead of the text appearing with the formatting applied, HTML tags are inserted around the text to apply formatting (Figure 52).
Figure 52. Here's some sample text, formatted with the QuickTags. You need to know HTML to use this feature. | 5. | Complete the post or Page as instructed earlier in this section and click Publish to publish it to your blog.
| Tips |