This chapter is from the book
This chapter is from the book
This chapter is from the book
Writing and Posting Content
Because the Editor works the same when you write a post or page, we’ll cover the mechanics of writing and posting content first: the basic tasks for typing content in, formatting it, adding links, and clicking the Publish button (and what happens after that). For the examples, I’ll switch between creating a post and a page just to illustrate the similarity between the two, but later in the chapter, I’ll create posts and pages focusing on the special features in each of them. For now, let’s start typing.
Regardless of how you get to a blank Editor window, the first thing is the title at the top of the screen. I typically have a snappy title in mind before I start my posts, but that’s just my process. You can put a title in whenever you want, and change it anytime you want, but after you save to Draft or Publish, the URL for the post is automatically set based on the title you have at the moment. Yes, you can change the URL later, but it’s not a good idea to do that after the post or page has been published. After you’ve published content, changing the URL can cause people to get a 404 Page Not Found error. So, from a fresh Editor screen, type in a title (remember from Chapter 7 about how to write for search engines), and then click down into the content area (Figure 11.14).
)
Figure 11.14 Post with title, ready to accept content.
NOTE
What’s the deal with the weird text? I’m using some handy lorem ipsum text as fake text for these posts. Yes, it’s Latin. No I’m not making this up. You can learn more about lorem ipsum from lipsum.org.
Formatting text works exactly like you’d expect. Select some text; click the I to format the text with italic. Select some text; click B to format the text as bold. So let’s get to things that aren’t so straightforward, like links, headings, and blockquotes.
Creating Links
To create a link within your text, first select the text to be the link (remember the lessons from Chapter 7 on writing for SEO); then click the Link tool button (the whole links icon) and you get to a window like Figure 11.15.
)
Figure 11.15 Inserting a link.
The URL for where you’d like the link to go to goes in the top box (where I have a URL) and the Title is what readers see if they pass their mouse pointer over the link without clicking on it. The Title is optional, but a nice thing to do for visitors and search engines. Below that section is one that is closed when you first come to the Insert Link screen—Link to Existing Content. This lets you quickly look for past posts (they have dates beside them) or pages (they just say PAGE) to link to within your content. This is a fast and easy way to link to content within your site without having to go to your site, find the post or page, copy the URL, and come back to the editor to insert the link. When you click Add Link, you return to the Editor with the link all set and done. Simple as that.
Inserting Images
I’m going to spend a lot more time talking about images and other media in Chapter 12, “Using WordPress: Images, Videos, and Other Media,” but if I don’t talk about how to insert images, at least briefly, parts of Post Formats won’t make sense. Inserting an image (or other kinds of “media”) all starts with clicking the Add Media button above the main editing toolbar (Figure 11.16).
)
Figure 11.16 Media button in the Editor.
Technically, you need to click in your post where you’d like have the image inserted, and then click the Add Media button. I’m going to insert an image in the second paragraph of the text and have the image float to the right and the text wrap around it to the left. Clicking the Add Media button brings you to a window where you can upload your pictures, videos, PDF files, and podcasts. You can drag and drop as many images as you want onto this window for them to upload. If that doesn’t work for your browser, you can click the Upload button to see the regular file chooser window. I’m going to drag two images onto the window. We’re only going to use one for this example (Figure 11.17).
)
Figure 11.17 Dragging and uploading images.
If you don’t have any images uploaded yet, you’ll just see a blank window to upload, like in Figure 11.17. But if you already have images uploaded, you see the other images. You can still drag new images to upload into this window and the images will upload. No need to click the Upload tab; WordPress figures it out.
){kind=link}
NOTE
How big an image can I upload? If by “big” you mean dimensions, there isn’t a limit. However, the real limit is file size, which tends to be 7MB for most hosts. If you have files larger than that to upload (videos and podcasts can often be far, far more than 7MB), you’ll need to use FTP to upload them. The downside is that media files that you upload via FTP aren’t listed in the Media Library. More about managing media in Chapter 12.
After uploading my two images, both have check marks in the upper-left corner of the image (Figure 11.18), so I click the check for one of the images to deselect. This makes sure I’m putting only one image in right now. In Figure 11.19, you can see the options I’ve set for this image. I’ve given it a caption, set the alignment to Right, and if someone clicks the image in the post, it will show the image on its own page (Media file option). And I’ve set the medium-size image (300×225). When I click Insert into Post, I get Figure 11.20.
)
Figure 11.18 Images uploaded and selected.
)
Figure 11.19 Setting the options for the image.
)
Figure 11.20 Image in the post.
Looks pretty spiffy. Now let’s insert another image with a few different settings. I put a blank line between a couple of the paragraphs and clicked the Add Media button again. Using the second image I uploaded, I’m opting for no caption, no alignment, and the large size (Figure 11.21), which in the post gives me what you see in Figure 11.22.
)
Figure 11.21 Inserting a second image.
)
Figure 11.22 Second, larger image in place.
Before I publish this post, I’d like the image to be centered on the page. All you need to do is to click the image and then the center text button on the editing toolbar. Images behave just like paragraphs or any other text in that respect.
If you want to change something about the image after you insert it, click the image once in the Editor, and two icons appear in the upper-left corner. The picture icon lets you edit the properties of the image; use the other icon to remove the image from the post (Figure 11.23). I’m going to switch the first image from floating right to floating left. After clicking the picture icon, I see this edit screen (Figure 11.24).
){kind=link}
Figure 11.23 Editing image properties and settings.
)
Figure 11.24 The editing window with float left set.
There is a lot more to that screen than what we just did. Don’t worry, we’ll cover all of that in Chapter 12. For now I’m going to hit Publish, and you can see the post with the images in Figure 11.25.
)
Figure 11.25 Yes, those are pretty pictures.
That’s all there is for images—for now. In Chapter 12, we’ll get more into galleries, featured images, slideshows, and all other media-related topics.
Headings and Paragraph Styles
Inserting headings (or using any of the styles from the pull-down menu) is as simple as clicking in the paragraph you’d like for the heading and picking the heading level from the menu. The same process goes for any of the other styles. The default style is the Paragraph style. For clarity, a “paragraph,” when you’re editing text like this, is a chunk of text that you separated from text above and below with a return. This is important because even though a heading (like Headings and Paragraph Styles above) isn’t a paragraph in the grammar world, for formatting content, it is. It’s a distinct and discrete block of text that has formatting distinct from above it and below it, and the formatting will carry throughout the entire block of text. Like a blockquote, for example.
Blockquotes
If you have some text you’d like to stand out from the rest of the text, especially if it’s a quote from someone else, you can use the Blockquote button. Just click in the section of text and click the button with the big quotation mark (“) icon. You’ll see something in the Editor that looks like Figure 11.26, where the text in italic is the text with blockquote applied (the bold text above is a Heading level 2).
)
Figure 11.26 Blockquoted text and a heading.
Clicking the Preview button gives you a look at what the post looks like thus far (Figure 11.27).
)
Figure 11.27 A preview of our post.
Editing Published Posts
Notice the little Edit Post in the menu bar at the top of the window and the little Edit in the gray box on the page? If you click those, you’ll be tossed back into the Editor to be able to edit the post some more. This post isn’t published yet, but even if it were, as long as you’re logged in to your site, you’ll see those. No, your visitors can’t see them (I know you’re wondering that), just you, and only when you’re logged in (which will probably be most of the time). I went ahead and clicked Publish back in the Editor, and after WordPress works its magic, the post is live and ready for the world to see (Figure 11.28). You’ll notice that Publish from Figure 11.14 is now Update, as in Figure 11.28. If you make changes to the content, you click Update to make those changes live. Don’t worry, you don’t have to publish a post before you leave the Editor. In Figure 11.14, you’ll notice a Save Draft button. You can at any point click that button, leave the Editor, and come back later to finish the content. You can get back to any post or page you have on the go (or have already published) by clicking the Posts or Pages button on the left. The default behavior for those buttons is to show you a list of all the posts and pages. (You can also get to that page from the All Posts or All Pages fly-out menu as you pass your mouse over those buttons.) From that list, clicking the title of a post or page will bring you to the Editor. We’ll talk more about the All Posts and All Pages list and how to use it later in the chapter.
){kind=link}
)
Figure 11.28 Post published.
Autosaving: Save Your Work and Your Sanity
If you’ve been trying this as you read, you might have noticed that WordPress automatically saves your work as you go. Your content is automatically saved every few minutes, so if you accidentally close the window or lose your Internet connection, or whatever, you won’t lose all your work between clicking Save Draft or Publish/Update. This is a handy feature that everyone uses from time to time. I certainly do. Even while writing this section, I accidentally hit the Back button between creating Figures 11.14 and 11.15, and the text I pasted in was there when I came back to edit. The link was gone, but the bulk of the text was there. Now what if you’re working on a longer post or working on a post with a few people? What about going back to a previous version or seeing who made what changes? WordPress has you covered there with Revisions. We’ll come back to it later in the chapter and show you what a great tool it is.
){kind=link}
Believe it or not, that’s the basics of editing content. I encourage you to experiment with the full-screen Distraction-Free Writing Mode, inserting symbols, the Paste as Text, and Paste from Word tools, but as far as the basics of writing and posting content in general, that’s it. I’ll cover inserting and managing images, videos, and other media in Chapter 12. I’ll cover Categories, Tags, Page Templates, and all the rest in their own sections later in this chapter. This section is about the general writing. We’re not all done with the Editor, though—we still have a lot of nifty features to go through.
Scheduling Posts and Pages
What if you have some content that you don’t want to appear until sometime in the future? Maybe you have an announcement that can’t be live until 8:00 a.m. on a Monday, but you want to finish writing on Friday and have it “be live” Monday morning without needing to do anything else. That is as simple as a few clicks from the Editor (Post or Page).
Start with whatever content you’re working on, and before you hit Publish, click the Edit link next to Publish Immediately. You’ll see something like Figure 11.29 with options for changing when the page (or post) will be published.
){kind=link}
Figure 11.29 Scheduling a post.
When you click OK, Publish becomes Schedule, so when you’re done with the content, clicking Schedule will tell WordPress to publish that post at that date and time (Figure 11.30). Until that time, the only people who can see the post or page are the author of the content, an Editor, or an Administrator of the site.
){kind=link}
Figure 11.30 Post ready to be scheduled.
NOTE
Can I backdate content? Yes, you can, and there aren’t any rules against doing that, but the real question is why are you doing it. If it’s making sure your content has a certain flow or order, that makes sense, but you might want to think of using Pages instead of Posts if time and order are that important.
Post/Page Status
Even after content is published, you can change its status from the Editor using the Status menu. Clicking Edit next to the status gives you a menu where you can change content from Draft, Pending Review, or Published/Scheduled (Figure 11.31). So content that is live (or due to be live) can be pulled back to Draft (unpublished) status at any time. Functionally, Draft and Pending Review are the same (the content isn’t live), but in an All Posts or Pages list, Drafts and Pending Review can easily distinguished from each other (Figure 11.32).
){kind=link}
Figure 11.31 Published, Draft, or Pending menu.
)
Figure 11.32 Draft and Pending posts.
What Pending Review means to Editors is that there is content ready for their review and approval before it goes live. For sites where the Editor has final say, especially where you use the Contributor role, which can’t publish content live, this feature is handy to be able to tell what is ready and what is still being worked on.
Controlling Who Sees Your Content
Although most of the time you want people to be able to read everything on the site, there are times when you might like to hide some content from most visitors, or even behind a password. This is what the Visibility options are all about (Figure 11.33). Public is the default; anyone and everyone can read the content on the site. Password protected will see that the post or page exists, but unless you have the password, you can’t read the content. Private means that no one except the author, Editor, or Administrator can even see that the content exists. It doesn’t appear on post or page lists within the Dashboard, or on any public part of the site—even if you know the URL to the content, it doesn’t exist for you to view (if you’re not logged in to the site and have the required privileges to see it). This is more than just hiding a page in plain sight by publishing it and not directly linking to it (there are always ways to find that kind of content). This is a complete “need to know basis” kind of hiding content.
){kind=link}
Figure 11.33 Public, Private, or Password Protected posts.
If you’re setting the Visibility on a post, you’ll also see an option below Public to “Stick this item on the Front page” (aka a Sticky Post). This pulls that post out of the timeline and puts it at the top of the Post stream—regardless of how old the post is. As newer posts gather below it, this Sticky Post will remain at the top. This is a great way to make sure certain posts (think in general content terms) are more likely to be seen. It will also come into play later when we talk about the special Showcase Page Template in Twenty Eleven.
Visual Versus Text Views
The last part about working with content is the difference between the visual (or rich text or WYSIWYG editor) and the text (or source or HTML) views of the content. The visual view in the Editor lets you see what the content looks like (for the most part) when it’s published. You can always click Preview to see what the content will look like on your site within the template, but you have a general idea of how things will be. The key here is that while you see bold, italic, links, and images, in the background, WordPress and the Editor components are writing HTML (the language of websites) for the content. Most people rarely (if ever) need the Text view, but sometimes....
First, let’s look at one of the posts on my personal blog in the visual editor (Figure 11.34).
)
Figure 11.34 A post in the visual editor.
Now the same post in the text view (Figure 11.35).
)
Figure 11.35 Same post, but all HTML.
Yep, that’s HTML. If you look closely, you might make out some of the text and formatting that makes the things you see. Those of us who learned to create web pages back in the 1990s remember this code well. It’s all we saw of our pages before the world saw them as websites. Today—not so much. Why would you ever need to switch into text view? A few reasons. One (and most common) is if there is something on the page that just doesn’t look right, you can see if looking at the source view helps. Clicking the Close Tags button sometimes helps to fix strange formatting problems that might have crept in. Generally this isn’t something you want to mess about with. It’s pretty easy to wind up with a real mess if you aren’t careful. The other reason is if you need to paste in HTML code to embed a video, slideshow, or some other interesting piece of web content. If you paste HTML into the visual editor, WordPress will convert the code into...well...words. It will make sure that the code isn’t code anymore so it won’t do anything on the page. Sometimes we want this to happen when we’re showing off samples of our code (there are better ways to do it, though), so this isn’t a bad thing that WordPress does, but it’s not what most people want to happen when they are pasting code into the Editor.
For the code to “work,” you need to flip to text view, make space for the code, and paste it in. It will generally be okay to switch back to the visual side to continue working on the content, but be ready for it not to work. Pasting the code into Notepad or TextEdit wouldn’t be a bad idea just until you’re sure it works.