Editing pages and posts
Page vs. Post
In WordPress, you can put content on your site as either a “post” or a “page”. When you’re writing a regular blog entry, you write a post. Posts, in a default setup, appear in reverse chronological order on your blog’s home page.
In contrast, pages are for non-chronological content: pages like “About” or “Contact” would be common examples. Pages live outside of the normal blog chronology and are often used to present timeless information about your site — information that is always relevant. You can use Pages to organize and manage the structure of your website content.
More information can be found on the WordPress Codex.
Visual vs. Text
When deciding whether to use the text or visual interface the main trade-off is the ease of use or having more editing capability. The visual interface is great for beginners to WordPress who aren’t very comfortable with HTML and CSS syntax and offers an easy-to-use interface. On the other hand, the text interface offers more control with editing capability beyond the visual toolbar and is great if you have some knowledge of HTML and CSS syntax.
Visual Editor
Visual interface
You can use the visual interface to put a majority of content directly onto pages without much adjustment as shown in figure 1a. On the visual interface, there are ways to do basic content formatting like add images, embed links, and manipulate header/paragraph fonts and see them similar to how they would show up on the actual site. Shortcodes can be put into the visual box for specific features, like iframes and buttons.
Figure 1a. This is the visual interface of the Rec Club Officer Resources WordPress page editor which is very similar the page itself as seen in figure 1b
This is what the actual Rec Club Officer Resources site displays for the visual interface in figure 1a.
Visual toolbar
The following briefly introduces the toolbar found when editing pages with the visual interface. The toolbar is one way to customize different aspects of a page, in the convenience of clicking a button to quickly change the features of a page.
| Button | Visual | Description |
 |
 |
Upload visual content into Media Library |
 |
 |
Changes the type of text |
 |
Bolded text | Bolds text |
 |
Italicized text | Italicizes text |
 |
|
Create bulleted list |
 |
|
Create numbered list |
 |
|
Indented text, typically used to emphasize long quotes |
 |
Text | Left align text |
 |
Text | Center align text |
 |
Text | Right align text |
 |
Link | Links text to URL. Also underlines and turns blue |
 |
 |
Insert Read More tag |
 |
 |
Toolbar toggle |
 |
 |
Make an InfoBox |
Text Editor
Text interface
The text interface can do everything that the visual box does and beyond, using markup language to structure and format your content. The major difference is that you should have fairly proficient knowledge of HTML and CSS syntax, which will be interpreted by CMS and render the exact visual representation of what you have just written in markup. Figure 2a shows the HTML that would be typed into the text interface to display the content in figure 2b.
Figure 2a. This is a section of HTML in the text interface for the UW recreation page.
Figure 2b. The HTML in figure 2a translate to the following CMS web content on the UW Recreation page.
Text toolbar
The following briefly introduces the toolbar found when editing pages with the text interface. The toolbar is one way to customize different aspects of a page, in the convenience of clicking a button to quickly add bits of code to a page.
| Button | Code | Description |
|
<img class=”alignment” src=”link” alt=”text”> | Upload visual content into Media Library |
 |
<strong> … </strong> | Bolds text |
 |
<em> … </em> | Italicizes text |
 |
<a href=”link”>text</a> | Links text to URL. Also underlines and turns blue |
 |
<blockquote> … </blockquote> | Indented text, typically used to emphasize long quotes |
 |
<del> … </del> | Strikes through text |
 |
<ins> … </ins> | Underline text (only – no link) |
 |
<img> … </> | Shortcut to add just image |
 |
<ul> … </ul> | Create bulleted list |
 |
<ol> … </ol> | Create numbered list |
 |
<li> … </li> | Add each set of code (with text/content) for each bullet in a bulleted or numbered list. |