September 2010
M	T	W	T	F	S	S
« May
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

How to Use WordPress: a Guide for Website Owners

WordPress is a very popular blogging platform. But it’s so easy to use and customize that it’s also often used as a content management system (CMS). A CMS is a collection of searchable informational pages. Some sites use it just for blogging, some just as a CMS, and some as both. But who cares what other people use it for? Let’s get on with what you can do with it.

You may want to have two browser tabs open at the same time: one open to your website front end and one open to WordPress. That way you can quickly switch back and forth between tabs to check your work. Try pressing Control-T (Command-T on Macs) to create a new tab.

Overview of the Dashboard

The contents of the public part of a WordPress website are controlled by what you do within WordPress’ backend administration area. Let’s dive right in. The WordPress admin is often reachable at http://www.yourwebsite.com/wp-admin. Just ask your web designer for the login URL along with the admin password. Once you have these and have logged in, you’ll be in the WordPress “dashboard”. Scroll down to the very bottom to see your version of WordPress. Version 2.3 is the standard as of the beginning of 2008.

As a website owner and content editor, you will most often use the Write and Manage buttons. If you click Write you’ll notice the two sub-options are Posts and Pages. WordPress lets you control two main kinds of content. Posts are normally used in blogs and they correspond to a blog entry. Pages are normally used in CMSs and they correspond to a discrete web page. When creating new content, be sure you’re creating either a Post or a Page as appropriate to your type of website.

Notice that the Manage tab also has a Posts and Pages subtab. The Manage tab lets you edit previously created content.

The other buttons in WordPress do things related to site configuration, and should probably be left alone until you’re very comfortable with WordPress. By all means have a look at the options, but don’t change anything unless you’re absolutely sure of what the outcome will be. The most dangerous option there is probably Presentation / Theme Editor, and unless you know HTML, CSS, and PHP, you should stay out of there.

If your site has comments enabled, then you’ll probably be going to the Comments tab on a regular basis to moderate new entries. Many people find comments more trouble than they’re worth because of the prevalence of what’s known as “comment spam”.

Writing Your First Post or Page

Click the Write button, then if you’re writing a blog post click Write Post, or if you’re writing a web page then click Write Page. There are a few areas of the page to pay attention to.

First up is the Title, which is often also the top headline of your post or page (see below).
Then there’s the post or page content, which you type into the WYSIWYG content editor (see below).
Below the content editor is the Upload area which is used to insert images and document files (.doc, .pdf) into your content (see below).
To the right of the content editor are a number of options. In order to expand each of these and edit them, you need to click the plus (+) symbol for the one you want to edit (see below).

Each of these four areas is described in further detail below. Once you’ve created your content, you click the Publish button, and that’s that. Your new page or post is now on your website.

Editing An Existing Post or Page

This is very similar to writing a post or page. But instead of clicking Write, you’ll click Manage, then either Posts or Pages. You will then see a list of all your site’s posts or pages. Click the Edit link for the post or page you wish to edit.

From here, the process is pretty much the same as described in the previous section (about writing a new post or page). The only difference is that there won’t be a Publish button. Rather, you’ll click Save when you’re done.

The Post or Page Title

It’s important to give your post or page a good title. Some websites even use the Title as the first headline on a web page, so if this is the case with yours, remember not to repeat the title within the regular content area.

Search engines look at page titles with great interest, so try to use keywords when composing the title. But don’t make the title nothing but keywords — make sure a human can make sense of it.

The WYSIWYG Content Editor

Whether you’re writing a post or page for the first time, or editing an existing post or page, you’ll be using the what-you-see-is-what-you-get (WYSIWYG) content editor. It works very much like a little version of Microsoft Word, so if you’ve used that, you already know half of what you’ll need to know.

VISUAL VIEW / CODE VIEW

First note the orange overlay in the example above. If you click on Visual, you’ll be in the WYSIWYG editor. If you click on Code, you’ll be in the HTML editor. Code is useful is you know HTML and want to achieve certain advanced things like CSS styling. But if you don’t know HTML, you probably won’t use it. You cannot enter Javascript in Code View.

TEXT STYLE

To boldface some text you’re writing, just select it then click the boldface button, which is the B at the very left-end of the icon strip (as see in the orange overlay in the example above).
The I is for italicizing.
The ~~ABC~~ is for creating text that has been ~~struck through~~.

BULLETS, INDENTS, JUSTIFICATION

To create bulleted lists, click the “Unordered Lists” icon while your cursor is on the line of text you want to turn into a bullet.
For numbered lists, click the “Ordered Lists” icon.
You can outdent and indent paragraphs of text with the Outdent and Indent icons.
Then there are the left align, center align, and right align icons. These all works on the line of text (or paragraph) that your cursor is currently within.

LINKS

Links are the lifeblood of the web, and there are two kinds:

Links to other websites.
Links to other pages on your own website.
Links to other places on the same page.
Email links.

They’re all created in similar ways. To create a link, select the text you want to turn into a link then click the Insert/Edit Link icon, which looks like a chain link. A popup window will appear asking you for the URL of where you want to link to.

For links to other websites, the URL looks like http://www.otherwebsite.com — note the prefix http:// — it won’t work without it. You can’t just put in www.otherwebsite.com or otherwebsite.com. If you want to link to a specific page on another website, just include that page in the URL like http://www.otherwebsite.com/contactus.html
For links to other pages on your own website, the URL looks like index.php?page_id=32. Where would you get this information? It’s pretty simple. The first part is always index.php?page_id= and the second part is a number. This number corresponds to the page ID, which you can get when you click on Manage / Pages. The ID is the left-most column in the page list.
Creating links to other places within the same web page requires that you know a little HTML and you use the content editor’s Code View. Contact your web designer if you need this.
When creating an email link, put into the URL the prefix mailto: and then the email address, like mailto:info@crunch42.com
Links for website users to download files such as PDFs, DOCs, RTFs, TXTs, and others are created using the Upload feature, described below.

To uncreate a link, select the link, then click the Unlink icon.

IMAGES & MORE

The Insert/Edit Image button can be used only if you know the location of the image on your server. In all likelihood, when you want to include pictures in your content you will instead be using the Upload feature described further on down. Then after you’ve uploaded it, you can use the Insert/Edit Image button to align it correctly (also described below).
The “split post with more tag” icon is used to cut long posts into two posts that have a “More …” link at the bottom of the first half. Rarely used.

SPELL CHECK & HELP

Spell Check is normally enabled at all times, and you’ll see a fuzzy red underline on any word that the spell check doesn’t know. There’s usually no need to run an explicit spell check by clicking this icon.
The Help icon brings up a very basic help screen. It does have some useful keyboard shortcuts, however.

SHOW / HIDE ADVANCED TOOLBAR

If your version of WordPress is earlier than 2.3, you will not have the advanced toolbar. Clicking this button brings up a second row of icons…

FORMAT SELECTOR

The format selector is the most useful of the advanced toolbar options. It lets you choose between unformatted text, paragaph text, and headline text. Here’s where the biggest difference with traditional word processors lies.

When you first start typing a new page or post, the text will be unformatted. When you press the Enter key, it will become paragraph text. You’ll also note that instead of the cursor just going down to the next line, it skips a line. This is to ensure that there is a space between paragraphs. On the web, new paragraphs are denoted not by indenting the first line of the paragraph but by the space between them.

Headline text is larger than paragraph text. Normally, you will only use Heading 1, Heading 2, and maybe Heading 3. If you want to make text larger, select it and format it as Heading 1 (the largest) or Heading 2 (the next largest).

THE RARELY USED (aka ADVANCED) BUTTONS

The Underline button should not be used. Underlining on the web implies that the underlined text is a link. So you don’t want to underline text that isn’t a link and confuse people. And if it’s a link it will probably be underlined anyway, so why bother?
Full Justification can often look bad on the web where the resolution is much lower than it is with print. Stick with left justification.
It’s easy to go overboard with the Text Color button. Use sparingly to catch the eye.
The Paste As Plain Text button can be useful for stripping formatting from text copied from other people’s web pages (not that you’d do that, would you?).
The Paste From Word button should be used whenever pasting text copied from Microsoft Word.
If you happen to paste from Word without using the special button and the resulting content looks like a mess, just select the mess and then click the Remove Formatting and Cleanup Messy Code buttons.
That button that looks like an Omega is used for entering special characters like copyright symbols and foreign language characters.
And lastly there are the Undo and Redo buttons.

Putting Images into Your Content (the Upload Feature)

You can insert images into your content with the Upload feature. The one caveat is that your images should already be in a web-ready format before you insert them. What this means is that you shouldn’t take a photo straight from your digital camera and upload it to your website. First it needs to be made smaller and optimized, and it needs to be in .jpg format. If you don’t know how to do this, contact your web designer. It requires graphics software which you may or may not have. You can also try the free picnik web service.

To start, click the Browse button.
In the popup window, navigate to the picture on your hard drive and click OK.
Give the picture a descriptive short title, maybe three words or less.
Click Upload.

The Upload section will change so you can see your image you just uploaded.

To place the image in your content, click your cursor in the content editor where you want the picture to appear.
If you want the image to appear as a thumbnail then change Show to Thumnbail. If you want the image to appear full-sized, then change Show to Full Size.
If you’re inserting a thumbnail and you want it to link to the full-sized image, then change Link To to File. Otherwise change Link To to None.
Click Send to editor.

Now you need to properly align the image. Click on the image in the WYSIWYG content editor once to select it, then click the Insert/Edit Image button in the WYSIWYG editor. A popup window will appear.

For Image description put in a few words that describe the image, or leave blank.
For Alignment, you will probably want to select Left or Right to make the image appear to the left or right of text that flows around it. Leave blank to make it so that text doesn’t flow around the image.
Leave Dimensions blank unless you want to force the resizing of the image.
Border lets you put a thin black line around the image by entering a number greater than zero. You can leave it blank.
Vertical space determines how many pixels will lie between the image and any text that surrounds its vertical borders. A number between 10 and 20 is good.
Horizontal space determines how many pixels will lie between the image and any text that surrounds its horizontal borders. A number between 10 and 20 is good.

Putting Downloadable Files into Your Content (the Upload Feature)

You can use the Upload feature to insert files such as Word documents or Adobe PDFs into your content. Really, any kind of computer file.

To start, click the Browse button.
In the popup window, navigate to the file on your hard drive and click OK.
Give the file a descriptive short title, maybe three words or less.
Click Upload.

The Upload section will change so you can see your file you just uploaded (in the example below it’s called “Report”).

To place it in your content, click your cursor in the content editor where you want the link to the file to appear.
Make sure Link to is set to File.
Click Send to editor.

A link will appear in your content. When your website’s users click this link, they can download the file (or in some cases it will appear in their browser).

A blog for website owners written by a web designer