When you click to create a post or a page, you open a window that features a content editing box. It has a bunch of buttons at the top just like a word processor (hover over any of them to see what they do). And for the most part, you create content in much the same way you create a Word document. But underneath that editing box, WordPress has to take your words and turn them into HTML. This means that there are a few differences that it’s helpful to know about.
First, WordPress has two editing modes — “Visual” and “Text” — which you switch between using the tabs at the upper right of the editing box.
You’ll be in visual mode by default, and will generally be better off staying there, but as you get more comfortable with WordPress you may find HTML mode helpful at times. It allows you to see the actual HTML (the markup code for creating web pages) that WordPress is using to display your content. Sometimes fiddly formatting issues are most easily solved by taking a look at the underlying structure. (See HTML: An Introduction for more details.)
This next part is going to sound both boring and confusing, but if you have the patience to absorb and come to terms with the concepts, it will save you a lot of time and frustration in the long run. If you can’t bear to deal with it now, skip ahead to the Specific Tips below, but please do come back to this section!
Semantics vs. Presentation
As we have discussed, WordPress stores content separately from the information about how that content should look. This allows you to change the look, feel and structure of your site as easily as clicking to select a different theme. This separation between the look of information and its meaning (its “semantics”) is a key principle in modern web development.
But “how it should look” is a more subtle idea than you may think. “Looks” come in two flavors: style and structure. The way content it is organized – structured — is a critical part of conveying that information (indicating some text is a subheading helps convey the meaning of the text), but how that structure is conveyed (e.g. “subheadings should be bold and in a larger font size”) is a separate matter.
When you add or edit text in WordPress, you need to preserve your content’s structure, but allow the theme to convey that structure’s style. So, for example, if something is a title or the head of a section or part of a numbered list, that information is part of the content and you need to indicate it when you’re entering the content. Likewise, if a section is an extended quotation, then marking it as a block quote is part of the information. What isn’t part of the content is whether a block quote is indented one inch or two, or a title is blue or green, or exactly how large section headings should be. In short, when you’re adding or editing text in WordPress, it’s important to try to indicate only structure, not style.
The most important part of the structure you want to convey is the headings — the title and any subtitles or subsections. A Post’s or Page’s headings are what a search engine uses to learn what that page is about, so it’s important to label things as headings when that’s what they are. Search engines are very literal, so it’s important to use the headings in numerical order, according to the hierarchy of the content, rather than to choose headings according to how you want something to look.
Headings in a web page document come in 6 levels (though levels 5 and 6 are rarely used), called “heading 1, heading 2” etc. (in HTML they are <h1>, <h2> and so forth). To designate text as a header, you highlight it and then use the “Format” drop box on the formatting bar to select the appropriate heading.
The first heading, Heading 1, is so important that it has its own separate box, which appears above the main editing window as the title for the page. To a search engine, the primary headline, or <h1>, is the most important text in your whole post or page, so it’s important to write it carefully. Sadly, search engines aren’t particularly sophisticated readers, so clever or creative headlines can set your content back if a search engine gets confused by your ironic or cute use of language. Stick to clear, factual and informative headers for best search engine results.
Generally speaking, it is best practice is to have just one <h1> per page, to help Search Engines understand “What This Page is About” (if you use more than one <h1>, they may not understand what is most important). WordPress makes whatever you type into the title box the <h1> for your page,* so you shouldn’t use the Heading 1 format in the formatting drop box. It’s worth noting that this rule is changing as HTML5 comes into widespread use, however, since that newer version of HTML makes it possible to indicate that a page has specific sections, each of which can have its own <h1>, so search engines don’t get confused.
*[WordPress uses what you type here as the page <title>, too, which is the other key piece of text a search engine pays attention to. This text doesn’t appear on your page itself, but is used at the top of your the browser window or tab when you’re on that page. It’s also the text that appears when you bookmark a page. The two don’t have to be identical, however, and there are a number of ways to create a specific <title> for your page using plugins. See more in SEO.]
Other formatting that you should add to your text includes bold or italic text; block quotes (the button is a single large quotation mark), and bulleted or numbered lists. You should NOT use the font size, font color or font family buttons! Many people do, and you may get the results you want when you look at the page, but using these controls will make your site’s look and feel much more difficult to change or update. (Why are these font controls and the forbidden heading 1 on the editing menu then, you ask? Well, because WordPress makes use of some generic editing software and the buttons are included by default.)
- CUTTING AND PASTING. Always use the W or the T button to paste text from a Word document or other document with formatting: otherwise, you may end up with unintended formatting code that will make it difficult to edit your text. If you cut and paste from a web page, you may — or may not — want the formatting too. You can always try pasting with the formatting, seeing how it looks, and then decide whether you’d be better off pasting without formatting.
- CLEARING FORMATTING. If you do have formatting that just isn’t doing what it’s supposed to, try the “remove formatting” button to get back to a blank slate (the button is an eraser icon, usually located next to the T and W buttons).
- LINE BREAKS VS PARAGRAPHS. When you press “enter” (or “return” – same key, different names), you get a new paragraph, which usually means a bit of extra space between your lines. If you don’t want the extra space, you need a line break, which means “start on a new line, but don’t start a new paragraph.” To create a line break, press SHIFT-RETURN. (If you need multiple blank lines, you should use SHIFT-RETURN as well: WordPress will tend to remove blank lines otherwise.)
- LINKS (HYPERLINKS). Highlight (select) the words you want to be linked (ie, blue and underlined) then click the “link” button – it looks like one link in a chain. (The “broken link” icon next to it is how you remove a link.) For details, see Create Links in your Posts and Pages.
- PHOTOS. To make changes to a photo, just hover over it until two icons appear: the red circle with a slash will delete the photo (useful if you’d rather just start over), and the other icon will open the editing window for that photo. For details, see Add an Image (aka “Media” to a post or page.
- SPACES. HTML handles spaces oddly. If you’re in the visual editor, you can add multiple spaces and they’ll show as you intend them too, but in the HTML editor, any number of spaces in a row is interpreted as a single space.
- SLUG, AKA WEB ADDRESS OR URL. Just below the title is what WordPress plans to give your page as a web address (WordPress calls this the “slug”). By default, WordPress copies whatever text you add to the title box, removes any punctuation, and adds hyphens instead of spaces between words (web page addresses aren’t supposed to have spaces). For a page titled “About Us,” the slug will be “about-us.” Likewise, a page called “Tips on How to Format a Web page for WordPress beginners, part 1” will be “tips-on-how-to-format-a-webpage-for-wordpress-beginners-part-1.” Search engines do pay attention and extract meaning from the words in your page address (they understand that hyphens are really spaces), so it’s OK to have a long slug, but you can edit the slug if you want to – and if you can convey enough meaning in a shorter phrase, that will make it easier for people who are typing in the page address.