WordPress Workshop Workbook

WordPress Workshop Workbook
Version 2.02
Rich Helms
www.RichHelms.com
[email protected]
Note: This book is designed as a workbook. PLEASE WRITE IN IT!
Write your name here: __________________________________
WordPress Workshop
RichHelms.com
Page 1
Table of Contents
WordPress Workshop Workbook..............................................................................................................1
Agenda for Today......................................................................................................................................3
Objective....................................................................................................................................................3
What are the goals of your site?............................................................................................................4
WordPress.COM vs WordPress.................................................................................................................5
Beginner Strategy..................................................................................................................................5
Before Coming to Class: Sign Up For a Free Blog Site........................................................................6
Basic Elements...........................................................................................................................................7
Creating a Page..........................................................................................................................................8
Exercise: Create an 'About the Author' Page..................................................................................10
Creating a Link.........................................................................................................................................11
Creating a Link...............................................................................................................................11
Exercise: Create a link and category..............................................................................................11
Select a Template.....................................................................................................................................12
Templates on your own WordPress installation.............................................................................12
Creating a Post.........................................................................................................................................12
Exercise: Create a Post...................................................................................................................13
Design of Your Site........................................................................................................................13
Creaking a Page/Post Link.......................................................................................................................14
Setting an Intro Page...........................................................................................................................14
The More Tag......................................................................................................................................15
WordPress.com Upgrades...................................................................................................................15
Requirements to Host WordPress Software........................................................................................15
Getting my Own URL.........................................................................................................................16
Privacy Options........................................................................................................................................17
Getting your Blog Listed on Google........................................................................................................17
Media.......................................................................................................................................................18
Image...................................................................................................................................................18
1. Capture Image: Digital Cameras................................................................................................18
Scanners..........................................................................................................................................19
2. Crop/Resize: Image Editor..............................................................................................................19
Online Image Editor............................................................................................................................19
Steps for Images..................................................................................................................................20
Edit the Image with Online Image Editor.......................................................................................21
Sending the Image to the Host........................................................................................................24
Audio...................................................................................................................................................25
Video...................................................................................................................................................25
WordPress Plug-ins..................................................................................................................................26
Conclusion...............................................................................................................................................27
References................................................................................................................................................28
Notes:.......................................................................................................................................................29
WordPress Workshop
RichHelms.com
Page 2
Agenda for Today
1. Before the workshop you need to sign up for a WordPress.com blog
2. Create basic elements (page, link, category, post)
3. Select a template
4. Select Widgets
5. Discuss elements and site strategy
6. Rework your site
7. Your own URL
8. Plugins and hosting
Objective
A website can serve as a selling tool as well as a portfolio for writers. While traditionally, writing a
website involved HTML and other programming languages, site management tools have gained in
popularity. A “blog” - short for weblog - is a type of website made popular as a public journal where
the site author can publish and viewers can comment. Blog sites are written with a site-authoring tool
such as Movable Type or WordPress. While this course will focus on WordPress, most of the basic
concepts are the same for all blogs.
For this workbook, I will use a website for a writer as my example. The elements will be appropriate to
a writer as the owner of the site, but the concepts are universal.
Strengths of a Website
●
Mixed-media support
○
Text, audio, video, music, images
●
Accessible worldwide
●
Low cost
●
Available 24/7
●
Deliver detailed information
●
Sell online
Weaknesses of a Website
●
World-level competition
●
Hard to find
●
Requires specialized skills to build
WordPress Workshop
RichHelms.com
Page 3
●
Open to a world of crime and fraud
Goal of Your Website
Here are some common goals of a website:
●
Provide samples/portfolio of my writing (easy to accomplish)
●
Convince viewers to contact me (challenging)
●
Advertise my writing
○
●
Challenging to attract people to my site
Sell my work - challenging to:
○
Get people to spend money (trust me)
○
Collect the money
○
Deliver the product
Most beginner website designers have an unrealistic expectation of website results. They believe that as
soon as they put a site, people will come in droves - wrong. There are now over 100 million websites
on the Internet. Is one more going to make that much difference? With over 1 billion surfers, the
potential is there. The challenge is how to stand out.
By the way, the answer to standing out is constantly adding quality content. Surfers come to a site for
information. A site with a brief advertisement and a call me for information doesn't work.
What are the goals of your site?
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
THINK WITH YOUR 'CUSTOMER' MIND
Enough theory. Let's do some construction!
WordPress Workshop
RichHelms.com
Page 4
WordPress.COM vs WordPress
WordPress is a software package for writing a blog-based website. There are two ways to use the
WordPress software. WordPress.ORG is the site for downloading the WordPress software to install on
your host. WordPress.COM is a commercial hosting service that allows you to publish your own site
for free. The obvious question is if you can host for free on WordPress.COM with the WordPress
software, why would you pay to host your own site?
WordPress.COM
WordPress 2.3
Software Cost
Free software
Free software
Hosting Cost
Free
Depends on hosting service
Purpose
Blog - not for profit. Limited Can be business
commercial
Can hide the blogging parts
No
Yes
Select Template (Themes - look) Specific list
Upload themes
User must maintain
Automatic
Version updates, backups, stats
integration, security
Integrated Statistics
Yes
No (use Google Analytics) - free
http://www.google.com/analytics
Automatic SPAM protection
Yes
Yes but must install/turn on
Control of Authors and
Administrators
Yes (other WordPress.com
members)
Yes
Host Media - Image
Yes
Yes
Host Audio and Video
No
Yes
Beginner Strategy
New to creating websites? Here is a strategy for getting into blog software based websites.
1. Sign up for a free WordPress.COM site
2. Sign up for a URL (Example: mysite.com)
3. Down the road you can convert to your own hosted WordPress site.
WordPress Workshop
RichHelms.com
Page 5
Before Coming to Class: Sign Up For a Free Blog Site
1. Go to: http://wordpress.com/
2. Click on Sign Up
3. Pick a Blog Domain. This will become your address, e.g. RichHelms.WordPress.com
Your Blog Domain name CANNOT change. It is permanent.
Note: Your WordPress address is NOT case sensitive. I use RichHelms as it is easier to read
than richhelms.
The name can be 4 to 15 characters. The only acceptable characters are letters (A-Z) and
numbers (0-9)
4. Provide your email address, check the box for terms & conditions and select Gimme a blog!
5. Press Next >>
6. Your Blog Title can be changed later, so just plug one in.
7. The privacy setting determines if the site is to be listed in search engines. This can be changed
later
8. Click on Signup >>
WordPress Workshop
RichHelms.com
Page 6
9. You are now set up. An email is sent to you with details.
10. Now go to www.wordpress.com, fill in your Username and Password then click Login
You now have a WordPress.com blog.
During Login, if you check “Remember Me” then you will not need to log in next time you visit the
site from that computer. This is useful if you are working on your computer at home. You should NOT
use this at a cyber café, where someone else could use the history to visit your site.
Basic Elements
A WordPress blog is made up of basic elements: pages, posts and categories. Understanding the
difference between a page and a post is core to understanding WordPress.
A page and a post are both a collection of paragraphs and look almost identical. Pages form the basic
information about a site, such as “About the Author” or “Contact Information.” A page is on a topic
and there is one page on that topic. A user views pages one at a time.
A post is like a collection of pages. A post belongs to a category. A site has multiple posts about each
category. In my site, I have a category called “Articles.” As I post an article, I categorize it under
Articles. This enables a viewer to see my articles by clicking on the category “Articles.” A user can
view a single or multiple posts at a time. A post is time sensitive, reflecting when it was written with
the most recent shown first. The more website-like a blog is, the more posts it will have. Pages are
website-like, posts are blog-like.
Suppose the website was about a group of writers. Two approaches to show the authors are to create an
“About the Authors” page or a collection of posts with one post per author. These posts would be
assigned to a Category called “Authors”.
Page
Post
Static Website
Fluid Blog
Yes
Listed in Page List
No
No
Listed by Date (Archive)
Yes
Listed by Category
Yes
Yes in 2.2+
WordPress Workshop
RichHelms.com
Page 7
Page
Post
One at a time
View on One Screen
One or Multiple from
most recent
Yes
Sub-template Support
No
One
Number Per Topic
No
Usually Time Sensitive
Yes
No
Searchable
Yes
Many (Categories)
Day-to-day additions are done as posts.
●
To write a page, click on Write/Write Page.
●
To write a post, click on Write/Write Post. As writing a post is the most common activity, it is
the default for Write.
Creating a Page
There are several common pages to create including About and Contact.
Click on Write/Write Page. The parts of the entry page include:
●
Page Title - What shows up in the page list. This should be short, as it will show in the menu
page list.
●
Page Content - Body of the page
●
Page Status - A page is visible to the public when it is 'Published.' While working on a page,
save it in Draft status. To un-publish a page, change the status back to 'Draft.'
WordPress Workshop
RichHelms.com
Page 8
●
Saving work
○
Save and Continue Editing - Save and return to this page for more editing
○
Save - Save this page and open a new page
○
Publish - Save and make available for public viewing
Highlighting
Click on 'Visual' to work in the WYSIWYG (What You See Is What You Get) mode or 'Code' to work
in Strict HTML mode.
Visual Mode: This is an example of text with bold and italic.
Code Mode: This is an example of text with <strong>bold</strong> and <em>italic</em>.
While visual mode is easier, it is more restrictive. Tip: If you are copying material from Microsoft
Word, you may get formatting you do not want. Go into Code mode and paste it there to get rid of all
formatting. Then go back into Visual mode and add the formatting you want.
Icons in the Visual Editor
●
B - Bold
●
Center
●
I - Italic
●
Right Justify
●
Create Link
●
ABC - Strike Through
●
Bulleted List
●
Break Link
●
Numbered List
●
Insert image
●
Outdent
●
More Tag (Show top in article list)
●
Indent
●
Spell Check
●
Left Justify
●
Help
●
Advanced Controls
WordPress Workshop
RichHelms.com
Page 9
Advanced Controls - This is VERY important if you are cutting/pasting content written in Microsoft
Word. Clicking “Paste from Word” brings up this dialog box. Paste in the Word content with CTRL+V
then click on Insert. This step will remove extra Word formatting that conflict with WordPress.
Technical Notes: Apple users, it's worth noting that the page/post pages are rather limited in Safari. It's
best to use FireFox, as you get all the WYSIWYG capabilities.
Exercise: Create an 'About the Author' Page
Publish it and then click on View Site (up top) to see the new page under the “Pages” list in the menu.
WordPress Workshop
RichHelms.com
Page 10
Creating a Link
A link is a pointer to another website. These other websites can be of associates, resources or
organizations that you find of value. Pointing to other sites and having them point to you can increase
the visibility of your site.
When a link is clicked, the new site can be opened in the existing window or a new window. If the link
sends people off your site, open it into a new window; then when the visitor is done and closes that
window, your site is still there.
Links are listed by their category. On my personal site, my link categories are “Links” and “My
Websites.” Categories help the viewer understand what each link is about.
Creating a Link
Click on Blogroll/Add Link.
●
Name: What appears in the list
●
Address: Complete address of the site (Tip: Copy/Paste to avoid typos and test once done)
●
Description: What shows in balloon when pointing to the link
●
Categories: Which category to list under. To add a new category, fill in the box above and click
on “Add.”
●
Target: None - load in this window, _blank to load in a new window, _top clear frame
structures. It is useful if someone embeds your page in their site.
Exercise: Create a link and category
Then view the site to see your link.
WordPress Workshop
RichHelms.com
Page 11
Select a Template
A template configures the look of the site. WordPress.com provides a collection of over 50 templates.
New templates are added on a regular basis. Some templates can be configured for colours. To select a
template, click on Presentation/Themes.
Browse the list and click on one to activate it. Notice that the basic elements, pages, links, categories
and posts are still there. The template just changes the appearance.
Templates on your own WordPress installation
Installing a template on your own installation of WordPress is more complex. A template is
downloaded, then uploaded to your wp-content/themes folder. Then it is available in the list like on the
WordPress.com site. The advantages are that you can modify the template, and there are literally
thousands of templates available.
Read the terms and conditions before using any template. As an example, one template I found looked
very nice. When I installed it I found the bottom of the page had advertising links. What shocked me
was that many of the links were to porn and scam sites. This is why more and more I am turning to
commercial templates such as Template Monster.
http://www.templatemonster.com/category/wordpress-themes/
Prices are about $50 each. While free templates put a link to their author in the bottom on the page,
commercial templates do not have such a link.
Creating a Post
A post is time sensitive and categorized. In my site, posts are used for articles and announcements. To
create a post, click on Write/Write Post.
WordPress Workshop
RichHelms.com
Page 12
The entry screen is almost the same as a page, except you select Categories and the Post Timestamp
field. The Post Timestamp is comprised of the date and time that will show on a post. I use the
publication date for my article posts. This puts them in the order they were published.
Postdating a Post
Another use of the timestamp is setting when the post will appear. My agreement with the newspaper is
that they have exclusive rights to an article for 30 days. My truck story appeared on Dec 31, 2006. I put
the article on my site and set the Timestamp to Jan 31, 2007. On that day it appeared on my site.
Exercise: Create a Post
Design of Your Site
Field
Your value
Name
Title
Pages
Link Categories
Post Categories
WordPress Workshop
RichHelms.com
Page 13
Creaking a Page/Post Link
To create a link from one page or post to another:
1. Load the page you want to link to. Copy the address. In this example, the address of the details
on this workshop: http://www.wsws.ca/richhelms/?p=148
2. Type the words in the page you want to click on in order to go to the other page
Example: Click for Details.
3. Select them
4. Click on Insert/Edit Link
5. Put in the address from step 1
6. Select to open in this window or another
7. Type in title to display when floating over the link
8. Click on the Insert button
The HTML for this link would be:
<a target=_blank href=http://www.wsws.ca/richhelms/?p=148>Click for Details.</a>
target=_blank - open a new window. Omit to open in the same window.
Setting an Intro Page
When you go into a WordPress site, the default is to show the latest posts (ie the most recent.) On a
commercial site the goal is to enter on an introduction page. To change the intro page setting, click on
Options/Reading.
WordPress Workshop
RichHelms.com
Page 14
In this example, I selected the page “About Rich” as the first page to come up.
The More Tag
When viewing a list of posts, there are two modes. The system can show the first part of each post or
the complete article. Which mode the system is using is set by the template.
If your template shows complete posts, you can control how much shows with the “More Tag”. The
material before the “More Tag” always shows with “More...” where the “More Tag” appears. The user
clicks on the title to see the complete article.
WordPress.com Upgrades
Domains — Purchase your own domain for your
blog, or map an existing domain.
$15/year
Custom CSS — Modify your blog’s theme, look
and feel to your liking.
$15
Unlimited private blogs — Add an unlimited
number of users to a private blog.
$30
Extra storage — Add extra storage for uploading
of photos and MP3s.
$20 (1 gig) to $90 (10 gig)
Requirements to Host WordPress Software
A number of web hosting companies offer Wordpress auto-install hosting where they will install
WordPress and set up the database from $6.95 per month. For the user with limited programming
experience, this is the best approach. See http://wordpress.org/hosting/
For more sophisticated users, WordPress can be hosting on most Linus/MySQL systems.
Here is what to ask your hosting company:
WordPress Workshop
RichHelms.com
Page 15
I'm interested in running the open-source WordPress (http://wordpress.org) blogging software, and I
was wondering if my account supported the following:
●
●
●
PHP 4.2 or greater
MySQL 4.0 or greater
The mod_rewrite Apache module
Getting my Own URL
A URL (Uniform Resource Locator) is a web address like www.RichHelms.com. This is a unique
name that is available around the world.
For those at WordPress.com the easiest approach is to use the Wordpress.com URL service.
1. Trivial to set up
2. Costs $15 per year
3. Google email support
4. Address will appear as www.RichHelms.com rather than RichHelms.wordpress.com
Steps:
1. Go to the Dashboard
2. Select Options/Domains
If you are doing your own hosting, then you will have full email support: receive emails at the URL as
well as send from that URL.
To get your own URL, first you have to check if someone else has it registered.
Step 1: Check if the URL is available.
Check at http://www.bluegenesis.ca/
At BlueGenesis, you can check if a URL is available. Common domains.
●
.COM - Most common. COM was Commercial. Available in any country
●
.CA - Canada
WordPress Workshop
RichHelms.com
Page 16
●
.NET
●
.ORG - Organization
Domains to avoid: INFO, TV, BIZ. I am yet to see a useful address or site from any of these. They
have such a bad reputation that people avoid them now.
Step 2: Register the name and aim at your blog.
You can register the name at WordPress.com for $15 per year. This does NOT provide any e-mail
support. My address www.RichHelms.com is registered at BlueGenesis ($20 per year) and for $13 per
year, I get domain forwarding (point to actual blog) and e-mail forwarding (any e-mail sent to
[email protected] is forwarded to my real e-mail, [email protected]).
Privacy Options
Click on Options/Privacy. You have three options:
●
I would like my blog to appear in search engines like Google and Sphere, and in public listings
around WordPress.com.
●
I would like to block search engines, but allow normal visitors
●
I would like my blog to be visible only to users I choose
I usually block search engines while I am building the site, then set it to appear in search engines.
Getting your Blog Listed on Google
Goto www.google.ca/addurl
Put your complete address to your site including the http:// in the URL input box. The best way to do
this is by bringing up your site and using copy/paste on the address. Type in the squiggly letters shown
and click the Add URL button.
It usually takes a few days for your site to appear in Google.
WordPress Workshop
RichHelms.com
Page 17
Media
One of the most interesting aspects of a website is the ability to put in pictures, audio and video. The
complexity of the media preparation grows from pictures to audio to video. Photos are expected on a
writer's website even if it is just a photo of the author.
How to Digitize Various Media
Previously Captured
Live
Image
Scanner
Digital camera
Audio
Audio card/tape deck
Mic into audio card
Digital recorder
Digital microphone
Video
Video capture card/VCR
Digital camcorder
(MiniDV, DVD, hard disk or
memory)
All media work involves three steps: capture, edit and upload. Whether the subject is live or previously
captured dictates how the media is digitized. In photography, if the original is a photo, a scanner is
used. If capturing a live subject, a digital camera is how to go. While it is tempting to get a scanner and
stick with your traditional camera, digital cameras offer speed and convenience. Unless you need to
convert old photos, start with a digital camera. Avoid used digital cameras, as the past two years have
brought dramatic improvements while lowering cost. You can purchase a basic digital camera for $100
to $200.
Image
Putting an image on your website involves capturing the image, edit/resize the image then uploading to
the site. To capture the image you need a digital camera or a scanner. Scanners and cameras are
designed to produce images for printing, thus the raw image created will be far too large for the web.
An image editor is used to prepare the image for the web.
1. Capture Image: Digital Cameras
A digital camera captures a photograph as a computer file. Many factors affect digital camera prices
including resolution, flexibility, size and lens. The most common specifications quoted on a digital
camera are the number of mega pixels and the optical zoom. (Digital zoom capabilities may also be
advertised, but are not nearly as useful as the optical zoom and should be ignored).
The photos are stored on a digital media card that can usually be removed. Larger media cards will
store more photographs. Older digital cameras tended to consume batteries quickly, but this is not true
of the modern units. Any camera you consider should use rechargeable or AA disposable batteries. AA
batteries are cheap and easily bought in bulk. A rechargeable will provide one to two years of service
before it needs replacing (generally at a cost of $40 to $80). Virtually all cameras connect with a USB
cable.
WordPress Workshop
RichHelms.com
Page 18
A popular strategy is to buy a video camera that can also do stills, or a digital camera that can record
video. This is a good theory, but one side is a compromise.
Scanners
A scanner looks like a small photocopier. A photo is placed under the cover and a sliding sensor scans
the image. An interesting product is the Canon LiDE series. While most scanners require a power
supply, the LiDE series has only a USB cable providing both the connection to the computer as well as
the power. The CanoScan LiDE 25 is a low-cost portable 1200 DPI (dots per inch) retailing for about
$80 (Staples.ca). If your only scanning is for the web, there is no need to get an elaborate, highresolution scanner.
2. Crop/Resize: Image Editor
PhotoFiltre
The higher quality a camera, the larger the file size. Whether you scan a photo or take a digital photo,
the resulting file MUST be edited and resized before it can be put on the web. A 5-meg camera image
would be 2,500 by 2,000 pixels. An image on the web is more on the order of 400 by 300 pixels. The
two steps involved in resizing an image are cropping and resizing. Cropping is cutting out the area of
interest and discarding the extraneous image area. Once an image is cropped, resize the result to fit.
Editing is done with an image editor. The first place to look for an editor is the software that came with
your scanner or camera.
The most popular image editor is Adobe PhotoShop. Various levels of the package exist, from those
included with scanners to the full commercial version.
Mac iPhoto is included with OSX. A free Windows image editor is PhotoFiltre
(photofiltre.free.fr/frames_en.htm). A shareware version (www.photofiltre-studio.com/) is also
available with more features for 25 € (roughly $40). Another popular free photo editor is
Gimp(www.gimp.org/). Gimp is very powerful, but has a steeper learning curve.
Online Image Editor
For most work it is easier to work with an installed image editor. There are online image editors that
are more limited but do not require installing anything on your computer. They also work on Windows,
Mac and Linux. As the steps to prepare an image are similar regardless of the editor, we will do the
work with an online editor called Online Image Editor.
WordPress Workshop
RichHelms.com
Page 19
●
www.online-image-editor.com - This editor supports the basics (crop, resize, brighten and
adding text).
Steps for Images
The steps for putting an image on a WordPress website are:
1. Shoot/capture the image
2. Copy into the computer
3. Edit (crop/adjust and resize)
4. Upload to the site
5. Insert into the page/post.
When a digital camera is connected to the computer, it usually appears as a new disk drive. Just copy
the image files to your computer. Some cameras require software to be installed. If so, then follow the
documentation.
The raw images are too large for the Internet. To prepare the image, crop it, adjust it for
brightness/contrast and resize it.
Original Car Shot - 1,524KB
2,560x1,920 pixels
Cropped Resized Shot - 64KB
450x300 pixels
WordPress Workshop
RichHelms.com
Page 20
Once you load the image into the editor, crop the shot to remove extraneous information. You may
need to brighten or adjust other factors like contrast, then resize to a size appropriate for the Internet.
Two factors affect how an image will work on the Internet. First is the physical size (in this example,
64KB finished versus 1,542KB originally). The second is the width and height in pixels. While printing
can support various DPI (dots per inch), an image on the Internet screen is treated as 72 DPI. The
actual DPI of the image is irrelevant to a web browser. In this example, the cropped image will display
as 6.25x4.17 inches. From my experience, images in WordPress are usually 400 to 500 pixels wide. In
PhotoFiltre, use Image/ Image Resize... to change the size.
Save the image as a JPG. Browsers support three types of images: GIF, JPG and PNG. GIF is for
graphics (such as pie charts). GIF files support only 256 colours but do support transparent space. JPG
stands for Joint Photograph Group. It is a standard for photos. PNG is a new image standard for both
images and transparency. PNG is usually used for small or graphic images only.
For photos, use JPG. The last question that will be asked for when saving in JPG is the quality. The
better the quality, the larger the file. I usually use “Medium” or “High” quality, never maximum.
Edit the Image with Online Image Editor
Select an image to edit. Goto www.online-image-editor.com
1. The first step is to open up the image. To open an image click on File/Open
2. Click on Browse... and select the file. The image will show below. Click on Upload.
3. The image will now appear on the host. It may be much larger than the screen.
WordPress Workshop
RichHelms.com
Page 21
4. To Crop the image click on Edit, Resize/Crop, Crop
5. The red box indicates the cut line. Move the top-left crop border by dragging the red box. Then
position the cursor over the lower-right corner and drag to size.
WordPress Workshop
RichHelms.com
Page 22
6. Then click on the Apply button.
7. To Resize the image click on Edit, Crop/Resize, Resize
8. The current width and height are shown. The maximum pixel width you will want is between
300 and 400 pixels. There are two ways to define the resize. Type in the new width or height in
the red boxes or drag the lower right-corner of the image. As you drag, the revised size will
show. Then click the Apply button to do the resize.
9. To save the resulting image, click on File, Save. Click on the Save Image Local button.
10. Click on Save and select where to save the image.
WordPress Workshop
RichHelms.com
Page 23
11. Now the cropped and resized image is back on your computer ready to be uploaded to your
website.
Sending the Image to the Host
When creating a page or post, click on browse... in the Upload area to send up the file.
Select the file and type in a title and optionally a description. Then click on the “Upload >>” button.
The next screen sets how the image will be inserted.
First put the cursor in the body of the text where you want the image to appear.
Select how to show the image: Thumbnail (tiny picture like a postage stamp), Full Size or Title. Then
select to link to File to show the full size image when clicked, Page to show the image on a page or
None to not link to the full-size image. In the example, show the image without any link. Click on
“Send to editor >>” to do the insert.
In addition to images (jpg, jpeg, png and gif), you can upload a pdf (Adobe Acrobat file), doc
(Microsoft Word document) and PPT (Microsoft PowerPoint presentation).
Audio and video are similar in concept with two major differences. One, they are more complex to deal
with, as the size of the data is so much larger. Two, if you are using WordPress.com, then you must put
your audio and video on another service as you cannot upload to the WordPress.com site.
YouTube.com is a popular service for video as well as google video. I will introduce only some of the
basics here.
WordPress Workshop
RichHelms.com
Page 24
Audio
Audio is a powerful addition to the web, as your voice provides emotion and conviction to your words.
With audio, there are four steps: Capture, edit, upload/host and link to the file.
Capture/Edit
To capture audio, you need a microphone connected to the computer and an audio editor. The simplest
setup is a microphone plugged into the mic input of the computer. An audio editor is then loaded and a
recording made. The file is then saved in MP3 format. My favourite audio editor is a free Open Source
package called Audacity. Audacity is available for Windows, Mac OS X and GNU/Linux.
Upload/Host
Once the audio file is saved, it must be uploaded to a site. On WordPress.com, there is no capability to
save any media except as noted above. ODEO.com is a free site for hosting MP3 files. On a personal
site with WordPress software installed, other files can be uploaded, but again, not through the
WordPress software. They must be FTPed to the host. Learning to use audio hosting services is easier
for all WordPress installations.
Link to Audio File
Now add a link in the WordPress page pointing to the audio file. If you are hosting your own
WordPress site, the 'Audio Player' plug-in can be used to provide a more integrated user experience.
If you are hosting your own WordPress site, there is a plugin for audio. It can play any MP3 file. This
plugin can be found at www.1pixelout.net/code/audio-player-wordpress-plugin/
Video
Video is similar to audio in preparation but requires a more powerful computer and different capture
WordPress Workshop
RichHelms.com
Page 25
tools. I use a video editor called AVS Video Editor (www.avsmedia.com). This editor sells for $40 US.
Windows XP comes with a basic video editor. Mac OSX includes iMovie, which does a wonderful job.
Video capture is usually done with a camcorder. There are three common types based on the storage
media they use: MiniDV, DVD, hard-disk and Flash Memory.
An interesting development has been digital media computer media like Flash memory, as well as hard
disk units. These are connected to the computer after shooting, and the raw video files are copied to the
computer.
I have the Sanyo VPC-CA6, which uses SD memory. On a 4-gig memory card, two hours and 45
minutes of full DVD quality can be stored. This camera is small enough to be carried in my pocket.
The camera can also produce still images, but they are limited in quality compared to a still camera.
WordPress Plug-ins
For websites with WordPress software installed (not WordPress.com sites), a powerful feature is
plugins. I use several plugins to add capability to a site.
Name
Function
Web address
Akismet
Anti-spam
Included with WordPress
(This is a MUST to turn on)
You need to register but it is safe and easy
Audio Player
Nice interface to play MP3s http://www.1pixelout.net/code/audio-playerwordpress-plugin/
WordPress Database
Backup
Backup the database
http://www.ilfilosofo.com/blog/wp-dbbackup/
Inline Google Maps
Display google maps in a
post or page
http://www.macdiggs.com/
WP-Print
Create a nice print format
http://lesterchan.net/portfolio/programming.p
hp
WordPress Workshop
RichHelms.com
Page 26
Flash Video Player
Show flash videos
http://www.mac-dev.net/blog/index.php
Statistics
Not a WordPress plugin but http://www.google.com/analytics
easily added to any template
in the header
Conclusion
WordPress is an amazing package for writing websites. While WordPress is usually described as a blog
package, I find it an effective tool for writing websites. For samples of sites I have created, visit my
website at www.RichHelms.com
WordPress Workshop
RichHelms.com
Page 27
References
●
http://www.RichHelms.com - Author website
●
http://www.WordPress.com - Host your site with WordPress for free
●
http://en.wikipedia.org/wiki/Blog - Wikipedia on Blogs
●
http://photofiltre.free.fr/frames_en.htm - PhotoFiltre - Free Windows Image editor
●
http://www.photofiltre-studio.com/ - PhotoFiltre Studio - 25 euro shareware version
●
http://www.online-image-editor.com - Online Free Image Editor
●
http://www.gimp.org/ - Gimp - Free Image Editor
●
http://audacity.sourceforge.net/ - Free Windows, Mac OS X, GNU/Linux Audio editor
●
http://odeo.com/ - Free site to host MP3 audio
●
http://www.1pixelout.net/code/audio-player-wordpress-plugin/ - MP3 Audio Plugin
●
http://www.avsmedia.com - Windows Video editor
●
http://www.bluegenesis.ca/ - Check for URL availability (There are MANY sites which offer
this service)
●
http://www.openoffice.org - Free Windows, Mac OS X, GNU/Linux Open Office software word processor, spreadsheet, presentation (doc, xls, ppt)
●
http://www.google.ca/addurl - List your site on Google
As future releases of this notebook are available, they will be available on my site
(www.RichHelms.com). You will need the password. Write it below
Workbook Password: _____________________________________________
WordPress Workshop
RichHelms.com
Page 28
Notes:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
WordPress Workshop
RichHelms.com
Page 29