Let’s dive in! First, take a quick look at the vertical sidebar along the left side of the Dashboard.

Roll your mouse over a section, and a downward-facing arrow will appear (#1, pictured above). Clicking that arrow will expand that section of the navigation, allowing access to more options. Try doing that with all of the downward-facing arrows in the sidebar, just to get oriented – we’ll revisit all of these sections in other KDMC WordPress tutorials.

With the Posts section expanded, you’ll see an “Add New” link (#2 left, pictured above). Note that you’ll also see a big New Post button near the top right while you’re in most sections of the Dashboard.

The main aspects of the New Post screen are fairly self-explanatory. Your headline or post title goes in first main field, and your story goes in the second.

Across the top of the main field is a row of formatting icons. The first nine should look familiar if you’ve ever used a word processor – select some text then click these buttons to control the appearance of your text. The lone exception is the icon that looks like a pair of quotation marks – this is used for setting off a chunk of text as an HTML “blockquote,” which you’ll generally use when quoting some external source at length. The appearance of a blockquote on the public site will be controlled by your theme.

The chainlink icons are used for linking words or images to other pages on the web (or on your own site). Copy a URL from your browser to the clipboard, select some text, click the chain link icon, and paste in the URL. Click OK and those words will become a hyperlink. Use the “broken chainlink” icon to un-do an existing link.

Pay special attention to the icon that looks like a pair of stacked rectangles – it’s used for creating a “More” break in your text. Clicking it produces the horizontal dotted line seen in the image above. On your homepage or category pages, only the text above the “More” break will appear, while the whole story will be displayed when a user clicks through to read the full content. It’s important to use this whenever a post is longer than, say, a paragraph – you don’t want to overwhelm your homepage with full-text stories!

Also note the small diagonal lines at the bottom right of the post window – grab these and drag to make your text editing field larger. If you really want a large editing area free of distractions, click the small blue icon circled on the toolbar above to go full-screen, then click it again to exit full-screen mode.

Finally, note the last icon on the toolbar, dubbed “kitchen sink.” Click this to enable another row of icons, with less common purposes. The purpose of all of the toolbar icons is explained in Appendix A of this tutorial.

A second row of formatting icons is revealed by clicking the “Kitchen Sink” icon.

Categories and Tags

There are many ways to add images, video, audio, or PDFs to posts or pages in WordPress. Media can either be uploaded directly to your site through the WordPress media manager, or hosted on an external site such as YouTube or Vimeo (for video) or Flickr or Picasa (for images).

In general, we recommend hosting video on external services, for several reasons:

1. Videos will probably be much larger than the max upload size allowed by your host.
2. Video can be tricky to compress correctly (with a good size/quality ratio).
3. Video can consume a lot of disk space to store and a lot of bandwidth to serve. Many hosts have quotas on these resources, and you can exhaust them quickly.

Images, however, should generally be uploaded directly to your site. However, there are some up-sides to using external services like Flickr. For example, these services make it super easy to create sophisticated slideshows, and may help you capture additional “drive by” traffic from those sites.

We’ll cover direct uploads first, then the process of embedding externally hosted media.

On the right side of the Post field, there are a series of icons to Add Media to your post. Select the appropriate icon and follow the prompts to upload your content.

Adding an Image

Before you start uploading, place your cursor in the text of the Body field where you want the image to appear. This will save a bit of hassle later on.

Just above the formatting toolbar’s icons, look for row of small icons labeled “Upload/Insert.”

The first of these icons is for uploading images – click it.

Click Select Files and navigate to the image file you want to upload (you can actually upload multiple files at once, but we’ll just work with one for now). Click OK, and you’ll be looking at something like this:

Take a moment to study this panel. There’s a lot you can do here!

Clicking the Edit button will reveal a sub-panel that lets you crop, scale, rotate, and otherwise manipulate the image itself (though we recommend doing this kind of image editing in Photoshop or iPhoto before uploading).

The Title, Caption, and Description fields are used in different ways by different templates and gallery plugins. You should use these as instructed by documentation or your webmaster.

The Alternate Text field is not displayed on the page, but is present in the HTML. This field is critical for handicapped users who have “screen readers” dictate the web page to them. The Alternate field is also used by search engines, so they have some sense of what the image is about. Remember, Google is the web’s largest blind user!

The Link URL field lets you control whether the user can click the image to go elsewhere, and if so, where. Set it to None to make the image not clickable. Setting it to File URL will cause the image to link to a full-size version of the same image in a raw browser window, without your site’s design/theme. Clicking Post URL will cause the link to go to an “Attachment page,” which is a special WordPress page that hosts a piece of media associated with a story. This is a good choice for showing larger versions of images without losing the “context” of the site.

The Alignment options are pretty straightforward – set this to None, Left, Right or Center to control whether or how text wraps around the image.*

* Note: For these alignment options to work properly, your theme’s CSS stylesheet will need to include the following rules. Your web developer can take care of this if your theme isn’t aligning images properly:

.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignleft { display:block; margin-right:auto; }
.alignright { display:block; margin-left:auto; }

The Size option lets you control the dimensions of the inserted image. When you upload an image, WordPress makes some decisions about whether to also create additional versions of that same image for use in various contexts. If your uploaded image is larger than your theme’s content area width, or if you just want to show a small version, select the thumbnail or medium version, with the appropriate linking option as described above. To control the image sizes WordPress will generate, see Settings | Media | Image Sizes.

Finally, click Insert Into Post. The image will be inserted wherever the cursor was in the text when you began the upload process. If the image ends up in the wrong place for some reason, you can simply drag it to the right spot.

If you upload multiple images into a post, WordPress will give you the option to “Insert as Gallery.” If you take this option, your images will appear as a small gallery of thumbnails, each of which links to the full-sized image on a separate page. See our WordPress Galleries tutorial for more on this topic.

Re-Using Images

When you first clicked the Upload/Insert icon, you may have noticed three “tabs” across the top – From Computer, From URL, and Media Library. You may also see a “Gallery” tab up there. The Gallery tab, if present, gives you quick access to all images that have been previously added to the current post. The Media Library tab gives you access to everything that’s been uploaded to the entire site, ever! If you want to re-use an image you’ve used in the past, don’t re-upload it – just use these tabs to pull it back into your post.

See also: Our tutorial on working with WordPress photo galleries.