Using WordPress
Introduction
Though known primarily as a blogging platform, WordPress is actually a very capable management system for certain kinds of sites. WordPress is employed by many big-name publishers looking for a simple way to manage their content.
In this tutorial, you'll learn how to use WordPress to post articles, upload media (images, video, etc.) and to control your content in a way that makes sense for your users.
If you have suggestions on other WordPress-related areas we should cover, be sure to let us know.
Creating an Account
If you control your own WordPress installation, you can create and manage accounts in the system by clicking the Users tab. Each new user can be given the role of Contributor, Author, Editor, or Administrator. The exact capabilities of these roles are described here. Don't give new users any more privileges than they need!
If you've been asked to blog for a publication, your web administrator will create the account for you, and provide an initial password. Your first act after initial login should be to reset your password. Click on your name in the upper right corner, then scroll to the bottom of the Profile page to change your password.
Write a Post
Take a moment to study the horizontal navigation system in WordPress. Across the top you'll see a row of major options, such as "Write" and "Manage." Clicking a major option will cause a secondary navigation bar to appear below it. For example, do you want to write a page or a post? Do you want to manage pages, posts, media, or links?
Definition: In WordPress, a "post" is a normal entry, such as a blog entry or an article. Posts are always timestamped, and are sorted on the homepage and on other pages in reverse chronological order (this behavior can be changed by editing templates). A "page" is very similar to a post, but does not have a timestamp and is not listed in any chronology on the site. Instead, a page is used for "static" or "evergreen" content such as your "About" or "Contact Us" page. When using WordPress as a publication, you'll use posts almost exclusively. When using WordPress to build other kinds of sites, you may find yourself using pages exclusively, or in combination with posts.
To write a post in WordPress, click the Write tab on the top horizontal menu. Once you reach the next page, enter your headline in the Title field. The story body goes in the Post field.
HTML versus Visual
When writing your post, you can either select Visual or HTML displays on the right hand side of the Post area. The Visual display works much like a word processor such as Microsoft Word. This type of editing is calleed WYSIWYG or What You See Is What You Get (though you'll find that things don't look exactly the same as they do on the live web site, since the live site's appearance is controlled by stylesheets. This display is best used by those who want to see how their post will appear online as they type.
The HTML display, however, is for more advanced users who want to make use of HTML coding in their post. HTML mode offers advanced users an added level of control when formatting media and text. Many users start in Visual mode and then "graduate" to HTML mode.
When you toggle between the Visual and HTML displays, you’ll notice that the Post area changes accordingly.
What do the Visual icons mean?
If you are writing a post in WordPress while in Visual mode, you'll find the following icons. Here is a list of the functionality behind each icon.
NOTE: You can get the information listed below by hovering the mouse over each icon for a moment.
 | Make text bold |
 | Make text italic |
 | Strikethrough text |
 | Create an unordered list |
 | Create an ordered list |
 | Convert to blockquote (What is a block quote?) |
 | Align text left |
 | Center text |
 | Align text right |
 | Convert text into a hyperlink |
 | Remove hyperlink |
 | Insert an image |
 | Used for creating a break between the "teaser" that will appear on the homepage, and the "body" section of your post, which will appear on the post's individual "permalink" page (the actual story page). |
 | View the editor in fullscreen mode. |
What do the HTML icons mean?
If you are writing a post in WordPress while in HTML mode, you'll find the following icons. Here is a list of the functionality behind each icon.
NOTE: You can get the information listed below by hovering your mouse over each icon for a moment.
 | Make text bold | |
 | Make text italic | |
 | Convert text into a < a href="#">hyperlink | |
 | Convert to blockquote | |
 | Convert to inserted text, typically displays as und erlined text on most browsers | |
 | Insert an image | |
 | Create an unordered list (i.e. bullet points) | |
 | Create an ordered list | |
 | Create a list item. Used in conjunction with the unordered list or UL t ag | |
| Convert to blockquote (What is a block quote?) | |
 | Sets text into a preformatted style, generally a Courier font | |
 |
| |
 | The definition of highlighted text will be searched for at Answers.com. A good way to look up the meaning of words while you write | |
 | Closes any open HTML tags for you, but be sure to doublecheck the button worked properly |
Publishing a Post
Once you’ve finished writing, you can preview your post by clicking on the Preview This Post button at the right side of the page.
If everything looks good, click the Publish button to make your content live. If you click on Save, your post will be stored in the database but not necessarily have published.
Just below the Preview this Post button, there are a series of publish states that may apply to your post:
- Unpublished means the post has yet to be published. This is the default setting
- Pending Review means the current post is waiting for the approval of someone else before being published
- Published means the post has already been published and is live on the Internet
If you change the Publish Status of your post and click on the Save button, the most recent status will apply to the post.
More publishing options
You also have the ability to keep your posts private. To do this, check the box labeled ‘Keep this post private.’ Private posts can only be viewed by you, and only when you're currently logged in to the system.
You can also set the time and date you want your post to publish. By default, your posts publish immediately after you click on Publish. To change that, simply click on the Edit link just above the Publish button on the right side of the page.
The area will expand to let you specify the time and date you want to publish your current post. This is also known as the timestamp. You can even specify a date in the past if that’s what you want to appear on your site.
If you set a timestamp in the future and click Publish, the post will NOT go live on the site until that date and time has actually arrived (this feature is sometimes called a "drip date.")
By altering the timestamp, you can bring old content back to the top of the homepage or category pages, or vice versa. Changing the timestamp is a useful tool in controlling the order your stories/posts appear on your website. However, journalists need to be aware that altering a timestamp may have implications for journalistic ethics.
Managing Your Content
To manage your content, click the Manage tab on the top horizontal menu. There, you’ll find a series of sub-sections to help manage the content on your site. The first sub-section you land on is Posts.
You can sift through posts or pages one page at a time, or use the search field to locate a specific post. Click a post title to edit that post.
Managing Posts
You’ll find all of your posts listed by most recent date. At a quick glance, you can see when certain items were created and their Publish status. You can filter the list by Category or by date published.
To edit your drafts, you can go to the Manage Posts section. The list of content will show you which posts have been Published or Unpublished. Sort the list by Unpublished and start editing your drafts.
Deleting a Post
If you want to delete a post, click on the checkbox of the post you want to delete and click on the Delete button. BEWARE: WordPress sits on top of a database. Like all databases, there is no UNDO function.
FYI: There's also a delete link on each post-editing screen. The link is to the right of the Save and Publish buttons.
Managing Other Content
Managing Pages
Under the Manage tab, there are a series of sub-sections to help manage your content. The Page manager works much like the Post editor, but is, of cours, for editing Pages rather than Posts (important for people building non-publication web sites with WordPress).
Managing Links
Another feature in WordPress is that you can have a list of links on your page (often called a "blogroll.") These would generally appear in the sidebar of your site. To manage these links, click on "Links" under the Manage tab.
Managing Categories
If you click on Categories under the Manage tab, you’ll be able to create/edit/delete categories for your content. Categories are used to group your posts by topic or theme (much as newspapers have "beats," except that, unlike a newspaper, a piece of content in WordPress can belong to multiple categories at once). These categories could include items such as “Entertainment”, “Sports”, “Breaking News”. Users can make use of your categories to filter content.
You can also create categories on the fly on the Write screen by scrolling down the page to the Categories section. There you'll find a link that reads "Add New Category" which will do the same thing as going to this section of WordPress.
Other Management Features
Tags: Tags are labels or keywords that help people filter your content. Unlike Categories, which can be wide-ranging, tags can quickly give people an idea what your post is about with the use of keywords. WordPress allows you to add/edit/delete tags on your site. (NOTE: You can also create these on the fly from the Write page.) Once you've tagged a lot of content, consider building a tag cloud for your site.
Link Categories: Links, like your posts, can also be categorized. Use this screen to place your links into groups or subgroups that make sense for your users. By modifying your templates, you can even display some sets of links in one place and other sets in others.
Media Library: Whatever media you upload (photos, audio, etc) using WordPress can be found in the Media Library. Here you can edit or delete your media content. However, for the most part you'll be adding and managing media content from the media editor built into the post editing screen. Users will rarely use the Manage | Media section.
Working with Comments
Any piece of content is optionally open for public comments. Comments are a powerful way to enrich the scope and impact of almost any story. However, whether a given story actually should accept public comments is up to you.
Note that administrators can use an option in Settings | Discussion to control whether commenting is open or closed by default for all new posts.
To manage comments from readers, click on Comments on the top horizontal menu. You can Approve, Mark as Spam, Unapprove or Delete comments.
Comments are also mailed to the post author.
Comment spam is a huge problem for all systems that host public discussion, and needs to be dealt with. We recommend a two-pronged solution to spam control: 1) Enable the Akismet Spam blocker from the Plugins page (administrators only), and 2) Leave the default setting "Moderate comments from unapproved users" checked in the Settings | Discussion screen. Akismet will catch 99% of everything, and moderation will let you preview the remaining 1%. Comments from pre-approved users will go live immediately.
Adding 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
To add an image into a WordPress post, you can do one of two things:
Here's how to upload an image.
Left: The image is aligned to the left and content flows around it
Center: The image is centered and content flows around it
Right: The image is aligned to the right and content flows around it
The sizes range in Thumbnail, Medium and Full Size. If you’ve cropped your image down to a usable scale, then you can simply use Full Size, otherwise, you may want to use one of the other two options.
.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignleft { display:block; margin-right:auto; }
.alignright { display:block; margin-left:auto; }None: You do not want your image to be clickable
File URL: When a user clicks on the image, they see the full image in a new window
Post URL: Users see the image on a different page within the framework of your site, so that users can comment on the image.
When you’re done, click on Insert into Post and the image will be placed where your cursor was last.
Adding QuickTime Video
WordPress is designed to be as lightweight and fast as possible. To extend its functionality into more "unusual" territories, it supports a wide variety of "plugins." From this point of the tutorial on, we describe the use of WordPress with certain 3rd-party plugins installed. Ask your administrator to install any plugins you feel you need.
This page on adding QuickTime video requires the QuickTime Embedding Plugin.
Video may either be uploaded into your WordPress system, or may live on an external site such as YouTube or vimeo and merely embedded in your site.
To embed video from an external site:
At a site such as YouTube, find the field labeled "embed." Click on that field to select its contents, then pull down Edit | Copy to copy the code to the clipboard. Return to your WordPress editing screen, click the cursor where you want the video to go, then switch to HTML mode. Making sure the cursor is still at the right location, pull down Edit | Paste. That's all there is to it! You can now return to Visual editing mode, if you prefer.
To upload fresh video into your own site:
Video should be uploaded either in Flash format (see "Adding Flash," next) or as QuickTime. Video should be compressed to ensure quicker download. Check the file size of your exported video carefully -- your web-ready video files should generally consume no more than 4MBs per minute of video (in other words, a 4-minute video should not be larger than around 16MBs). If your file size is too large, then something is wrong. Our tutorial on compressing video for the web is here.
You should try to avoid uploading uncompressed or improperly compressed video. If you do upload bad video, please take the time to delete it from the server before trying again - you don't want to fill up a server with unusable data.
After uploading a compressed QuickTime file, select "Link URL" and insert the linking HTML code into the story body. Now edit out everything but the actual URL for the uploaded video. You should be left with something like:
http://www.somesite.com/.../dogtown.mov (Sample URL shortened for brevity)
Now surround this URL with code so it looks similar to the following:
[QUICKTIME http://www.somesite.com/.../dogtown.mov 320 256 false true]
Notice the four parameters at the end of this string. The two numbers are the width and height of the video. In the example above, note that the height is 256px, rather than the usual 240px. This is because the QuickTime controller bar is always exactly 16px high. You must add 16px to the height if you use a controller, or else it will be invisible.
The first true/false option lets you control "autoplay" - whether the video should play automatically when the page loads. When this is set to false, the user must click the play button to watch the video.
The second true/false option lets you specify whether the movie will have a "controller" beneath it (highly recommended).
A final option is to use a "poster frame" to stand in for the video. Using a poster frame means that the user is not forced to download all 12MBs of your video file just because they visited the page. Instead, a one-frame movie loads where the movie goes. Clicking the poster frame causes the movie to load. Unfortunately, you cannot use a standard JPEG image as a poster frame - you must use a one-frame QuickTime movie. To create one, launch QuickTime player and import an image file (which could be a still from the video you want to show, or anything else). Then pull down File > Save As and choose "self-contained movie." Give your one-frame movie a name like koipond-poster.mov. Upload the poster frame into the site. Now you've got your compressed video file (let's say it's koipond.mov) and a poster frame for it. Insert the whole wad into your story like this:
[QUICKTIME http://www.somesite.com/.../koipond.mov http://www.somesite.com/.../koipond-poster.mov 320 256 false true]
In other words, specify the full URL to the movie file, followed by a space, followed by the full URL to the poster frame, followed by the parameters.
Adding Flash
This Flash embedding tutorial requires the Kimli Flash Embed plugin, available here.
Upload your finished Flash .swf file (do not upload .fla files!) much as you would upload an image. Once uploaded, click your mouse in the "Link URL" field and copy to the clipboard.
Then place your cursor in the story body where you want the Flash to go.
Now surround this URL with code so it looks similar to the following:
[kml_flashembed movie="http://www.somesite.com/.../pyramids.swf" width="640" height="480" /]
(The above should be on a single line). If your Flash presentation requires a particular version of Flash to be installed on the viewer's computer, you can also specify that by adding an additional parameter, e.g. fversion="9". With that parameter attached, a user with Flash 8 installed on their computer would be prompted to upgrade their Flash plugin before viewing the content.
That's all there is to it!
Adding Photo Slideshow
A photo slideshow can add color and vitality to your Wordpress website. Most versions of Wordpress doesn't have a tool for you to upload photo slideshows directly. However, you can create slideshows on an external site, and then embed the code the site gives you to your Wordpress post. It's easy. You could do it without any knowledge in html or coding. Let me show you how: First, choose a friendly website to create your slideshow. flickr.com is good for photo uploading and sharing, but it doesn't provide an embedding code. I recommend Rockyou.com, which could help you create decent slidshows with ease and then gives you a code to paste to your own Wordpress website. You don't even need to register on Rockyou.com to get started. Simply click into the slideshow creating page (http://www.rockyou.com/slideshow-create.php?source=cw), and upload your photos. You can then adjust the order and size of the photos, add captions, and choose a transition style to make the slideshow more attractive. Click the Save button after you finish, and you will see the code appear automatically. Copy the code, go to the backend of your Wordpress website, and paste it into a post of your chosen. You could either combine it with text or post it as an independent entry. Save the post and the slideshow will appear on your website. Make sure your are using the Html mode instead of the Visual mode of your Wordpress editing page while pasting the code. Otherwise you will see the text of the code rather than an active slideshow after you save the post. Rockyou.com also provides songs and music for you to use, but unfortunately most of them are pop songs that are not suitable to accompany news photos. Another major limitation is that you can not add audio files of your own to the photo slides. But you could still get decent slideshows. Click here to watch examples of running Rockyou.com slideshows on a Wordpress-powered website: http://albanytoday.org/tag/slideshow/ Another website I tried once is http://web.splashcast.net/, which also allows you to create a slideshow and gives you a code to be pasted on your Wordpress website. However, it takes a long time to upload photos and doesn't provide convenient ways to adjust photo orders and add captions.Related Links
WordPress.com: Want to start your own blog quickly and easily? Free hosted blogs will get you up and running fast, but offer a limited selection of themes and plugins, and don't allow uploading of multimedia content types:
WordPress.org: Have access to your own web hosting account? Download your own copy of WordPress, install it on your server, and you'll have total control over your publishing system forever.
WordPress Documentation: Find all of the resources you need on WordPress in the Codex.
About this Tutorial
This tutorial was written by Brian Aguilar, a graduate of the UC Berkeley Graduate School of Journalism. This tutorial was written primarily for students at the J-School, but is intened for anyone just getting up to speed with WordPress for the first time.
After the basics have covered, we also cover some of the advanced plugins that make adding multimedia elements to WordPress sites a breeze.
Additional content by Scot Hacker, Webmaster, KDMC.