Knight Digital Media Center Multimedia Training

Tutorial: WordPress: Getting Started

By Scot Hacker

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/wordpress/

Introduction

Photo by Eric Martin

Though known originally as a blogging platform, WordPress has evolved to become a very capable content management system for many kinds of sites, including small publications, blogs, magazines, FAQs and handbooks, events directories, hyperlocal news organizations and more. WordPress now powers almost 10% of the web. is also used by many big-name publishers looking for a simple way to manage content.

This tutorial is aimed primarily at WordPress authors and editors. You'll learn how to use WordPress to post articles, to manage your growing collection of content, navigate the myriad publishing options in the Post/Page editing screen, upload media (images, video, etc.), and more. Other tutorials on this site cover WordPress system management and settings, installation, plugins and themes, and theme modification.

For now, we'll assume you have a basic WordPress installation to work with, and permission to publish content.

Logging In

Every WordPress site has two faces: One that the public sees, and a private view called "The Dashboard" for authors and editors. Your site's theme (design) may or may not include a link to the Dashboard on the public-facing site, looking something like this:

This login link is present to make things easy for new users, but take a look at "professional" news sites - you'll never see an administrative login link visible to the world. We recommend removing this link from your site - it's easy to do, makes your site look more professional, and doesn't encourage ne'er-do-wells to try logging in to your Dashboard (see the Widgets section of our WordPress: Beyond the Basics tutorial for instructions.)

So, assuming that the Dashboard login link isn't present, you just need to commit one thing to memory:

/wp-admin

Append that to the end of your site's URL, i.e.:

http://example.com/wp-admin

to be greeted by the familiar WordPress login screen.

Bookmark the login URL for future reference! If you're not sure of your username or password, click the "Forgot Password" link circled above. Then check your email for password reset instructions (your username will also be in the email you receive).

Clicking the Remember Me checkbox will cause your browser to remember your login session for 14 days. Once a login session expires, WordPress will require you to log in again to continue using the Dashboard.

Set Your Byline and Password

Before doing anything else in the Dashboard, take a look at your personal "profile" page, which you can get to by clicking your name or username at the top right of the WordPress interface:

We can ignore most of what's on the profile editing page for now, but there are three important things to take care of right away:

1) Most WordPress installers only ask for a username. But you're a journalist, and want your full name to appear on the stories you write. Scroll down to the Name section and enter your first and last name.

2) Once those have been entered, click on the dropdown labeled "Display name publicly as" and select your full name:

Most WordPress themes will use this as your byline -- if it's not present, they'll fall back to your username, which is not very professional looking.

3) At the bottom of the Profile editor you'll find two fields where you can enter a new password. If you've been assigned a password you can't remember, enter the password you want to use, twice. It goes without saying that passwords should not be re-used between sites, and should not include words that could be found in any dictionary.

Your First Post

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.

Kitchen Sink

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

Editing the slug

Once the post has been saved in the database, you'll see a Permalink field under the title field:

Clicking the Edit button on this line lets you alter the URL of the completed post, and can be useful if you want to make sure the keywords you need for good SEO are present.

Publish!

When you're done writing, look to the right of the post editing field for the Publish section. You've got choices!

Clicking Preview will let you see how your post will appear, but without actually making it live on the site. Clicking Save Draft will save your post to the database, but without actually publishing it - use this if you're not done writing.

Clicking Publish will cause your post to go live on the site immediately.

If you click the "Edit" link next to Visibility, you'll have the option either to password-protect your post, or to mark it as "Private." Private posts can only be seen by you - not by the public and not by any non-administrative editors of the site.

It's also possible to modify the publication date for a post by clicking "Edit" next to the words Publish Immediately. This is useful in two circumstances:

1) You may need to back-fill a site with older content, while preserving the old article datelines.

2) You may want to set a "drip date" by setting the publication date in the future. When you do this, the post will become visible on the site as soon as that date and time comes around - a great way to have posts go live in the middle of the night, or while you're on vacation!

Trash

Clicking Move to Trash works as expected - the post will be kept in the database, but removed from the public site. We'll explain how to retrieve trashed posts later on.

Take a Look! (and keep tabs)

Once your post is live, you probably want to see how it looks on your public-facing site. You can click the new View Post link, but if you do that, you'll lose your place in the Dashboard. It's easy for users to get confused, trying to navigate between the Dashboard and the public site constantly.

Any time you're working in a content management system (like WordPress), we recommend using the "Tabs" feature in your web browser to keep both views open at the same time. Then you can use browser tabs to toggle back and forth between the Dashboard and the public site without losing your place in either.

In most browsers, you can pull down File | New Tab, or hit Cmd-T (Mac) or Ctrl-T (Windows) to open a new tab. Most browsers also let you open a link in a new tab by holding down the Cmd, Ctrl, or Alt key while clicking the link. So try Cmd-clicking that "View Post" link instead.

The Admin Bar

WordPress 3.1 makes it a bit easier to keep track of your place without using browser tabs by displaying an "Admin Bar" above the content on the public site.

Note that this bar is only visible to you while logged in, not to the general public. The Admin Bar will let you quickly edit the post you're currently viewing, or create new posts or pages, or jump directly to your Dashboard. We'll cover other features in the Admin Bar later.

HTML vs. Visual Modes

When editing a post or page, you can select either Visual or HTML mode at the top right of the editing area.

Visual mode operates much like a word processor, and lets you work without seeing or touching any HTML code whatsoever. But note that the Visual mode does not completely reflect how things will appear on your live site, since your final design is controlled by the CSS stylesheets in your theme, while the Dashboard focuses on the structure of your content.

HTML mode offers advanced users an added level of control when formatting media and text (i.e. there are many more HTML tags in existence than are represented by the toolbar icons). HTML mode is also used when you need to insert "embed" code in your posts, such as the code provided by YouTube for embedding videos in other sites. We'll come back to that.

If you prefer to stay in HTML mode permanently, you can disable the Visual mode from your Dashboard Profile page (click your name at the top right of the Dashboard).

You'll notice that the formatting toolbar icons also change when you switch to HTML mode. The purpose of most of them should be fairly clear, but see the toolbars appendix for full descriptions.

Posts vs. Pages

So far, you've been creating Posts exclusively. But take a look under "Pages" in the Dashboard navigation and you'll see that you can create a new Page just as easily.

While Pages and Posts may look superficially the same, their behavior in a WordPress site is very different. A Post is your basic story unit. A Post has a timestamp, and can be sorted chronologically alongside other items. Posts can also belong to categories, and can have tags (more on those later).

A Page, in contrast, is used for "permanent" content, such as your About page, or Contact page, or Company History, etc. Pages do not have timestamps and thus can't be sorted chronologically. Typically, the pages you create will be visible in your site's main navigation, while Posts will not.

Pages can also be stored in a hierarchy, so that, for example, both History and Brochure could be subordinate to About. When you store pages in a hierarchy (which is done by setting the "Parent" for a Page), the resulting URLs reflect that hierarchy, e.g.:

http://example.com/about/history

You can also set up your navigation menu to automatically reflect the hierarchy of pages, so that rolling over About would reveal a submenu containing History and Brochure, for example. However, this ability has been superseded by the new Menus system in WordPress 3.1.

Pages vs. Posts

Screen Options

At the top right of the post editing screen, you'll see a "Screen Options" link, giving access to a bunch of less-common post writing options. We cover these in detail in the Screen Options appendix of this tutorial.

Categories and Tags

There are two main ways to organize content on a WordPress site - by "Category" or by "Tag." In most cases, you'll want to do both.

Categories

Think of Categories like the "beats" in a newspaper - you have the Sports section, the Health section, the Science section, the Politics section, etc. Those big "topic" buckets become the main taxonomy of your site. Typically, your site's list of categories will appear in the main navigation menu. Therefore, it's best to not create too many of them - keep your list of categories relatively confined.

Categ5

On this site's navigation system, the menu is built from a combination of Pages and Categories (the Categories are in the red box).

You can place a post in more than one category. A story about socialized medicine might appear in both the Health and Politics sections of the site.

By default, all stories will appear on the homepage. But they'll also show up on any relevant category pages, as well as any "date index" pages, if your site uses them (e.g. in a listing of all posts from March 2011). Not all themes use the default WordPress behavior, however.

To place stories in categories, simply check the boxes for all relevant categories in the Post editor:

Category picker

If you have administrative permissions on the site, you can also create additional categories at any time, either from the "Add new category" link you see here, or by clicking the Categories link in the left sidebar of the Dashboard.

Categories 2

That interface lets you create, edit, or delete categories. It also lets you "nest" categories within categories, which is useful for special purposes not covered in this tutorial.

Tags

On the surface, Tags work similarly to Categories - they let you group related content together. But Tags are meant to be used in a more "ad-hoc" fashion, and can be much more granular than categories. An author might put a story in the Health category but give it the tags "Nutrition," "Diet," and "Exercise."

Tags can be added to a Post by typing them directly into the Tags field while editing a Post. If you don't see the Tags field, enable it from the Screen Options tool at the top of the page.

Categs3

You can manage your site's entire collection of tags by clicking "Post Tags" in the Dashboard sidebar, within the Posts section.

Because tags are much more granular than categories, you generally won't be putting them in your navigation menu. Instead, you might use them to show a list of "Related Stories" at the end of every story, where "related" is defined as "other stories sharing one or more of the same tags."

Another popular use is to build a "tag cloud," which is a list of all tags used on the site, with their font sizes automatically changed to reflect how commonly they're used, like this:

Categs4

However, most usability experts now agree that tag clouds are of questionable value to readers. Your best bet is to use tags for tracking related content.

Managing Content

WordPress includes a very nice interface for quickly searching for stories to edit (or delete). You can also use this interface to filter content by category or date.

Click the Posts link in the Dashboard sidebar to see all of your content listed by date.

Use the status section (1) above to filter by posts that have been published, in draft mode, in the trash, or all posts.

Use the Search feature (2) to find posts by keywords in the title or body of the post.

Click column headers (3) to sort the results by Title, Author, or Date.

Click a post title to edit just that post.

This interface also provides some very powerful batch-management capabilities, letting you change the categories, tags, authors, or publish status for hundreds of posts at once. See our Beyond the Basics tutorial for more on that.

Deleting Posts and Pages

If you want to delete a post, click on the checkbox for the post you want to delete. From the Bulk Actions dropdown, select "move to trash".

There's also a "move to trash" link on each post-editing view. The Trash link is to the right, at the bottom of the Publish section.

To restore items from the Trash, view Trash from the Posts manager, then roll your mouse over the item you want to restore. You'll see options to Restore or to Delete Permanently.

Adding Media

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.

Medialib

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

Embedding External Media

Many sites, such as YouTube and Vimeo, let you embed content into other sites (such as into your blog). This is also true of Google Maps and Charts, video services, widget providers, and more. Look for the "Embed" option on those sites. Here's what it looks like on YouTube:

After clicking the Embed option, YouTube gives you a bunch of options. The most important one to notice is the Size selector. You should select the size that most closely matches the width of the content area in your site's theme. For example, if your site's content area is 700px wide, select the option that's 640px wide. Notice that you can also embed the content at custom dimensions.

Copy the embed code provided to your clipboard, return to your Post, and switch to HTML mode. This is critical - you cannot paste raw HTML into the editor when in Visual mode.

In addition, there is a potential limitation - only users who have the role of Administrator on the WordPress site can post embed code without having it stripped out.

If you are not an administrator and/or don't want to use HTML mode, there is an alternative for users of WordPress 3.1 and higher. Go to the Settings section of the Dashboard and enable the Auto-embeds option. Set a maximum width and height at which you want embedded media to appear.

Now, returning to the example YouTube video, don't grab the embed code. Instead, copy the URL of the page hosting the video to your clipboard:

Back in the WordPress post editor, paste the URL on a line by itself, directly into the body of the post. You do not need to be an administrator, and you do not need to be in HTML mode for this to work. If the service you pasted the URL from is a cooperating "oembed" provider, the media embedding will be taken care of for you, automatically. A list of supported providers can be seen here.

Notice that this technique does not work with Google Maps or Charts.

Flickr Slideshows

To embed a Flickr slideshow, try this: On Flickr.com, go to any Set, Album, or Photostream, and click the Slideshow button. Once in the slideshow, click the Share link at the top right.

At this point, you can copy the code provided in the embed field, but notice that it defaults to 400px wide, which is probably not wide enough. Instead, click the Customize link and you'll be taken to a new page where you can enter a custom width and grab updated embed code for posting.

Appendix A: Post Toolbar Icons

Here is a complete guide to the formatting icons found in the WordPress post/page editor. Since the icons change when you switch between HTML and Visual modes, guides to both modes are shown below.

Visual display Bold icon Make text bold
Visual display Italic icon Make text italic
Visual display Strikethrough icon Strikethrough text
Visual display Unordered List icon Create an unordered list
Visual display Ordered List icon Create an ordered list
Visual display Blockquote icon Convert to blockquote
Visual display Align Left icon Align text left
Visual display Align Center icon Center text
Visual display Align Right icon Align text right
Visual display Hyperlink icon Convert text into a hyperlink
Visual display Remove Link icon Remove hyperlink
Visual display More icon Creates a "More" break*
Visual display Fullscreen icon View the editor in fullscreen mode

A final icon at the right-most end of the toolbar enables "Kitchen Sink Mode," and turns on a second row of buttons with more advanced functionality not covered here.

* The "More" tag creates a break between the "teaser" that will appear on index pages such as the homepage and the "body" section of your post, which will appear on the post's individual "permalink" page (the actual story page).

Icons in HTML Mode

If you switch from Visual to HTML mode, you'll see a somewhat different set of toolbar icons:

HTML Icons

Most of these follow the functions of the Visual mode icons pretty closely - bold, italic, link, blockquote, and more all work as expected. The "ul" and "ol" buttons create unorderd and ordered lists, respectively, while "li" creates a list item within those lists.

The "del" and "ins" buttons are for making corrections to posts. Select the text you want to change and click "del" and it will be rendered in strikethrough. Enter your new text, select it and click "ins" and the new text will be styled by the browser or stylesheet. WordPress will add a timestamp to show when the insertion was made (which you can remove if you like).

The "img" button does not take you to the WordPress media uploader - it lets you insert an image from a known URL instead.

The "code" button is for adding computer code samples to posts - it wraps text in the HTML "code" tag which is styled specially by the browser or stylesheet.

"lookup" provides a quick way to look up a word in an online dictionary, while "close tags" does its best to close any unopened HTML tags.

Appendix B: Screen Options

When editing a Post or Page, there are many more options available than those you see by default. Depending on your site's needs, you may or may not ever need access to these "power features," but it's worth familiarizing yourself anyway. Look for the "Screen Options" link at the upper right corner of the screen:

Screen options 1

A panel will drop down, similar to this one:

Screen options 1

Each item in this panel represents a "section" of the Post-editing interface, which you can show or hide via checkbox. You can also switch your overall layout from 2-column to 1-column. Doing so gives you a wider space to work in, which is nice, but pushes the all-important Publish section further down the page.

Sections of the page can actually be dragged around to other positions - try it! Your preferences will be saved automatically, and will remain in effect on the next post you edit as well.

Experiment with the options here - you can't break anything! Here are notes on some of the section options available:

Format: The vast majority of posts you create will be "Standard" format. "Gallery" and "Aside" are used only in special circumstances - your theme may direct you to create posts of these types when creating certain kinds of content. You can generally ignore this option.

Categories and Tags: These let you position the current story in a "taxonomy" for your site. We'll discuss these in detail later.

Featured Image: In the course of writing a Post, you may upload many images to that Post's internal "gallery." But in some site designs, certain stories get displayed prominently, with big images to go with them. Featured Image lets you tell WordPress which associated image is to be considered the "main" one. With the right setup, Featured Image can also be used to set a custom banner image for the current post.

Excerpt: This optional field is mainly used when generating RSS feeds for a site. If you don't specify an Excerpt, the first 55 words of the post will be used by default. If the lede of your post doesn't do a good job of summarizing the content, use this field to override the default.

Send Trackbacks: When you create a post that contains a link to another site, and Trackbacks are enabled, WordPress will attempt to "ping" that other site. If that site is also Trackback-enabled, a link to your site will appear in that site's comments section. In this way, sites can communicate automatically about whether similar conversations are happening on the web.

Custom Fields: WordPress can store arbitrary "meta" information about a post, which can then be used in the theme's templates. For example, your theme might support "extra wide" posts, which cause the sidebar to disappear so your content can use the full screen-width. Such a theme might instruct you to use Custom Fields to "wide" to "true." You'll only need these fields if your theme's instructions (or your web developer) tells you to use them.

Discussion and Comments: These two fields are related but different. Discussion lets you control whether people are allowed to leave comments on the current post. Comments let you manage the actual comments that have been left on this post (you can also manage comments from the main Comments portion of the Dashboard sidebar).

Slug: When you write a headline, WordPress automatically creates a "slugified" version of that headline -- all lowercase, punctuation removed -- for use in the URL. For SEO and convenience reasons, you might want to edit the slug and alter the URL. This field lets you do that.

Author: By default, all posts you create will appear as though they were authored by you. But if you work on a multi-author site and sometimes post content for other writers, this lets you set the byline to their name, rather than yours.

Revisions: Every time you save a post to the database, WordPress saves your changes to a "revision," which can later be restored. This is a nice safety net, protecting you against authoring accidents.

About this Tutorial

This tutorial was written by Scot Hacker, webmaster for the Knight Digital Media Center and web host specializing in WordPress platform development. This tutorial was written primarily for fellows of KDMC digital media training programs, but is appropriate for anyone getting up to speed with WordPress for the first time.

This is an introductory level tutorial intended primarily for writers. Other tutorials on this site are aimed at site administrators and developers.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.