Getting Started

You should have received an invitation to join this blog to your AU account. Please follow the instructions inside that email to set up a WordPress.com account that is connected to your student email account.

New to WordPress? Here’s a Getting Started Tutorial from UC Berkley.

Remember: Tag all posts with #sis628 for credit. For more information on tagging, see Tags below.

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.

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.

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 wordsPublish 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.

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 TitleCaption, 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.

Have questions? Write them in the comment section below – and feel free to answer anyone else’s comments if you can!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s