Step 1: Understand the Dimensions

The header of Simplicity is the wide, blue area at the top where you see the blog name and description. The width of the header is 940px wide. That means any header image you place there needs to be no wider than that. As for the height, well that doesn’t really matter. The header height will expand to fit.

Step 2: Upload Your Image

To upload your header image to your web host, I suggest you use an FTP program such as SmartFTP. FTP stand for File Transfer Protocol, and it basically allows you to transfer files between your home computer and a web server (i.e. your web hosting account). If you’ve never used an FTP program before, you’ll need to get the FTP login information from your webhost. Specifically, you’ll need the FTP url, the username and the password.

Once you have your FTP login info, go ahead and login. You’ll want to upload your header image to the following folder on your web hostiing account: /wp-content/themes/Simplicity10/images.

Step 3 - Add Your Image to the Theme

Next, we need to tell the theme to place your new header image into the header itself. To do that, you’ll need to modify your Stylesheet template. So, click the Presentation tab on your WordPress control panel. Then click the Theme Editor link on the subnav bar. Your stylesheet template should show up in the code box, but if for some reason it doesn’t, just click the Stylesheet link from the list of theme files on the right side of the page.

On the page that follows, you’ll see your stylesheet template. Scroll down just a bit until you see the following block of code:

#header {
        clear: both;
        padding: 25px 0;
        margin: 0 auto;
        background: #0066cc;
        }

Once you find it, change it to this:

#header {
        clear: both;
        padding: 0;
        margin: 0 auto;
        background: url(images/headerimagename.gif) top left no-repeat;
        height: header image height goes here (e.g. 100px);
        }

Of course, you’ll want to change the name of the file from headerimagename.gif to whatever is the name of your actual file. Be sure to click the Update File button in the bottom right corner.

Step 4: Remove the Blog Name and Description from the Header

The last thing we have to do is remove the blog name and description from the header area. On the right side of your Theme Editor page, you will see a link named Header about half way down the list of files. Click it. Once you get to that page scroll down until your find this block of code:

<div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
<h1 class="blogtitle"><?php bloginfo('name'); ?></h1>
<p class="description"><?php bloginfo('description'); ?></p>
</div>

Change it to this:

<div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
</div>

Click Update File. And that’s all there is to it.

• Play Video in New Window
• Download Video (right-click and “save link as”)

1. Download WordPress

The very first thing you’ll want to do is download a copy of WordPress 2.0. So, go the WordPress site here, and look for the link that says “DOWNLOAD.ZIP.” You should see it on the right side of the page with a dark blue background. When you see the link, click on it, and save the file to your desktop so it’s easy to find going forward.

2. Unzip the Folder

After you download the program, you’ll need to unzip the files into their own folder on your desktop. Most computers have a built-in zip/unzip application when you buy them, and if you’re not sure about your system, right-click on the file you just downloaded, and look for the menu option that says “Extract All …” Select that option if you see it. If you don’t have an unzip feature already installed, you can download a free program called Stuffit Expander (for PC or Mac).

3. Set Up Your Hosting Account

You may already have a web host, and if so, you can skip this section. If not, the web host I’ve been using for a couple of years is 1and1 Internet, Inc., and I recommend them highly. They offer several hosting packages, and I’d suggest the “Business Hosting” plan at $9.99 per month. You can find it on the left menu bar under the heading “Linux Hosting.”

During the set-up process, you’ll need to choose a domain name for your site if you don’t already have one you want to use. Give careful consideration to the domain name you choose. Try to make it something memorable yet easy to spell as people will be typing it into their brower to get to your site. You wouldn’t want them to have to type www.superlongandhardtospelldomainname.com. Also keep in mind, you can add on other domains very easily in the future if necessary.

4. Set Up Your FTP Program

FTP stands for File Transfer Protocol, and an FTP program will allow you to copy files from your own computer to your web host. There are many FTP programs available, and the one I use is a free program called SmartFTP. You can download it here.

5. Get Your FTP Access Information

You’ll need to enter this information into your FTP program to access and upload files to your web host. Specifically, you’ll need to enter the the domain name, user name and password for your FTP account. You can get this information from your web host if you don’t have it already. If you have a 1and1 account, you’ll find a link on the main “Administration” page just after you log-in to your account (login page: admin.1and1.com).

6. Set Up Your MySQL Database With Your Web Host

This isn’t as scary as it may sound. Well, not if you have a good web host. Again, back to 1and1 (because that’s who I use). It’s really simple to set up a database in their control panel.

• Simply log in to the control panel at admin.1and1.com, and go to the Administration page.
• You’ll see a section that says “Websites and Applications,” under which you’ll see a link that says “MySQL Administration.”
• Click that link, and look for a button that says “New Database.”
• Enter anything you like for the description of the new database (e.g. WPBlog), then click “SetUp.”
• That’s it. Your database is set up. On the following page, you’ll see the information about your new database, such as the database name, host name, user name, etc.
• Keep that window open or print the page as you’ll need the database information shortly.

7. Enter Your Database Information into Your WordPress Config File

Remember when you downloaded and unzipped the WordPress program on your computers desktop? Open that folder, and you’ll see another folder labeled “WordPress.” Open that folder, and find a file named wp-config-sample. Open this file in a text editor such as Notepad or Wordpad. When you open the file you’ll see some text, much of which looks like gibberish, but it’s not. Look specifically for the lines that read:

define(’DB_NAME’, ‘wordpress’); // The name of the database
define(’DB_USER’, ‘username’); // Your MySQL username
define(’DB_PASSWORD’, ‘password’); // …and password
define(’DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value

This is the place to enter the database information you saved from the previous step. So whatever the database name is, enter that information in place of ‘wordpress.’ Just be sure to leave the ‘ marks before and after as it appears above. Do the same for the DB_USER, DB_PASSWORD and DB_HOST. When you’re done, save the file, but save it as wp-config.php rather than wp-config-sample.

8. Upload WordPress to Your Server

Okay. We’re in the homestretch. The next thing you want to do is copy the entire WordPress program from your computer to you host’s server. So, first, open your FTP program and connect to your host’s server. Back in step 5, you tracked down your FTP information. If you haven’t already entered it into your FTP program, go ahead and do that now. Again, you’ll need to enter you domain name, your user name and your password. After you enter the information, go ahead and connect to your host’s server.

At this point, you’ll need to make a decision about where you’ll place your WordPress program. You can put it in, either, the root directory of your host server or a sub-directory. Personally, I place mine in a subdirectory because I run several different websites on the same server, and it just makes things a lot easier by keeping them separate. After you make your decision, go ahead and upload all the files and directories located in the WordPress folder you unzipped to you desktop, excluding the folder itself.

9. Run the WordPress Install Script

• If you installed WordPress in the root directory of your server, open your web browser and type the following: http://www.mydomain.com/wp-admin/install.php (replace “mydomain.com” with your own domain name).

• If you installed WordPress in a sub-directory, open your web browser and type the following: http://www.mydomain.com/subdirectory/wp-admin/install.php (replace “mydomain.com” with your own domain name and “subdirectory” with the name of the sub-directory you created).

After you go to this page, WordPress will do the rest. Just follow the onscreen directions, and then you’ll be all done.

Update: You may have one final step. See this comment from Billy.

Besides the quality issue, there are other benefits to using Quicktime over Flash. First of all, Quicktime video is the file-format-of-choice for video blogs. In other words, people with video iPods and Quicktime-compatible, portable video players can download the video automatically, just like you would a regular podcast. And from what I understand, that’s not the case with Flash video (correct me if I’m wrong).

You’ll notice, most of the popular videoblogs, such as Rocketboom, RealVerse and (my new favorite) the Clever Parents Vidcast, aren’t using Flash. They’re using QT.

Another benefit is if your video camera records to the QT format, like mine, you can skip the step where you convert your QT video to Flash format. And finally, unlike the Flash tutorial, you won’t have to download and install a media player on your server because many people already have Quicktime installed on their system. For those who don’t, it’s a quick and simple download.

A quick note before we move forward. There are several ways to do what I’m showing you here. There are numerous plugins you can install, for example, but the method below seemed to me to be the simplest. So, without further banter, here’s the tutorial.

Note: This only works if you ARE NOT using the visual rich editor, also known as the WYSIWYG editor, to write your posts. If you are using the WYSIWYG editor, I’d suggest you not use it as it tends to mess things up a bit. To turn off the WYSIWYG editor, visit your profile page and uncheck the box that says “Use the visual rich editor when writing” in the bottom left corner of the page.

Step 1: Assemble Your Tools

1. A WordPress Blog/Site. Okay, so you probably already have this part covered. If not, this tutorial will show you how to download and install WordPress on your own server.

2. Download, install and activate the WP-AddQuickTag Plugin. This is an excellent little plugin created by Roel Meurders. It gives you the ability to create new quicktags above the standard WordPress post box. Click on the graphic to the right, and you’ll see what I mean. We’ll be adding a button that will instantly add the code you need to embed a Quicktime video into a blog post.

Update 03/28/07: The WP-AddQuickTag plugin referenced above does not work with WordPress 2.1. However, there is another version that I’ve found effective with WP 2.1. Get it here: www.mikebrowne.com/wp/?p=3

Step 2: Add The Quicktag to Your Write Post Page

After you’ve installed and activated the WP-AddQuickTag plugin, click the “Options” tab from your WordPress control panel. When you get to the Options page, you’ll see another menu beneath the main navigation bar. You want to click the “Add QuickTags” link (see below).

Once you get to the WP-Quicktag Management page, you’ll see three fields labled as follows: Buttontext, Start tag(s) and End tag(s). We’re only interested in the Buttontext field and the StartTag Field (see below).

In the field for ButtonText, enter the following:
Insert QT Movie

In the field for Start tag(s), enter the following:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320"><param name="src" value="/videos/movie.mov"><param name="autoplay" value="false"><param name="type" value="video/quicktime" height="256" width="320"><embed src="/videos/movie.mov" height="256" width="320" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>

Leave all other fields blank, and then click the Update Options button.

Step 3 - Publish Your Video

1. Make sure your video is in Quicktime format. Quicktime videos have the file extension .mov.

2. Upload your video (via FTP) to your server. If you need an FTP program, I use SmartFTP, which is only compatible with Windows machines. If you use a Mac, I hear Fetch is a pretty cool FTP program, but I’m sure some of you Macheads have other options.

It’s crucial that when you upload your videos, you store them in a subdirectory called “videos.” If you want to store them in a different directory, you’ll have to change the code above that reads “/videos/movie.mov.” For example, if you store your videos in the root directory of your site, you’d want the code to read simple “/movie.mov.”

3. Write a new Worpdress post containing the code for your video. Now that you’ve uploaded your video, you want to write a new post. Enter a title for the post as you normally would. Just below the field for your post title, you should see the quicktag we created. It’s labled “Insert QT Movie.” Click that tag/button. When you clcik the quicktag, the code for your video will pop up in your post field.

4. Change the default name of your movie. The quick tag will automatically insert the movie name as “/videos/movie.mov.” So you’ll need to change that to whatever name you gave your movie. Click the graphic to the right, and you’ll see I’ve highlighted the quicktag itself, as well as the movie name (in two places). You have to change the movie name in both places. For example, if you gave your movie the filename “mymovie.mov,” you should change the highlighted code to “/videos/mymovie.mov” without the quotations, of course.

And that should do it. If you try this out, shoot me a message an let me know about it. I’d like ot make sure it works as easily as it should.

Maybe you have a business site and want to provide some video for customers and/or potential customers. For example, when I designed a site for Hi-Way Campers, an RV dealer, I included video walk-through tours of some of the RVs for folks who started their RV shopping online (see an example here). Website video would also be great for restaurants, conference facilities, hotels, resorts, real estate brokers or anyone with a product people need to see.

Whatever your reason for wanting to add video to your site, it’s pretty easy with WordPress and a couple of other tools. Before anyone else mentions it, let me say at the outset that sites like YouTube, Vimeo, Google Video and the like also make it pretty easy to upload and share video. If, however, you’re a tad paranoid like me and you’d rather not rely on another service (who may insert ads into your video at some point) to help you share your video with the world, this tutorial is for you.

Step One: Gather Your Tools

1. A WordPress Blog/Site - Okay, so you probably already have this part covered. If not, this tutorial will show you how to download and install WordPress on your own server.

2. Download, install and activate the WP-FLV Plugin - This is an excellent little plugin created by Roel Meurders. It greatly simplifies the task of inserting flash video into your WordPress site.

Download the wp-flv.txt file from Roel’s site and change the file name to wp-flv.php. Next you’ll need to open your favorite FTP program and add the wp-flv.php file to your wp-content/plugins directory. Finally, visit the Plugin managment page on your WordPress site, and activate the WP-FLV plugin.

3. Download and install a free Flash video player. If people are going watch videos on your site, you’ll need to embed a Flash video player for them to use (don’t worry, it’s not as difficult as it may sound).

As a brief side note before we go further, the other way to distribute video is via download. In other words, you could simply link to the video file in your blog post, and allow folks to download the file to their own computer. A true video blog also distributes video via RSS feed. In that case folks use a piece of software called a podcatcher to receive new videos. The podcatcher software (e.g. iTunes, Juice, Newsgator, etc) automatically detects and downloads new videos for its user. This particular tutorial is geared more toward what’s known as “streaming video,” in which case someone visits your site and watches the video while there. So let’s move on.

Visit Jeroen Wijering’s site, and download his Flash Video Player 2.4. The player downloads as a zip file, so you’ll need to use your favorite unzip program to unzip it. If you don’t have an unzip feature already installed on your computer, you can download a free program called Stuffit Expander (for PC or Mac). After you unzip the file, you’ll end up with a folder named: flash_flv_player.

Next, you’ll need to upload the Flash player to your website. The actual file name you’re looking for is flvplayer.swf. You’ll find it in the unzipped flash_flv_player folder. Again, FTP that file over to your website. I strongly suggest you create a folder named “videos” within your main WordPress folder, and copy the flvplayer.swf file into that folder. This is also the folder into which you’ll need to place your video files once you have them ready (more on that later). If the video files and video player are not in the same folder/directory, this won’t work.

Step Two: Create Your Video

Now that you have everything in place to play videos from your WordPress site, the next thing to do is actually create and publish your videos. Again, you’ll need some tools for this part as well. Before we get to that, however, lets talk about file formats.

The Flash Video Player you just installed will only play Flash Videos, which have a file name that looks like this: filename.flv (notice the .flv file extension). If your digital video camera is anything like mine, it will probably create video files in what’s known as Quicktime format. Quicktime files have the file extension .mov. So you’ll have to convert those files to the .flv format. Again, this is much easier than it sounds, and that brings us to the next free tool you’ll need.

1. Download the free Riva FLV Encoder. This is a cool little program that will convert various file types (e.g. .mov, .avi, mp4) into the .flv format. You can download the program here.

The Riva Encoder is pretty intuitive to use. There’s a box for you to enter the file you want to convert, and there’s the “Encode” button (click the graphic to the right for a larger view). On the right, you can set some of the parameters for the output video, such as size and quality. I use a file size 320×240, but you can decide what size you prefer. As for teh other parameters, I simply use the default settings, but again, you may want to experiment with different ones. After you’ve converted your video to the .flv format, you simply need to FTP it into the same folder/directory where your Flash video player is installed (see above).

We’re in the home stretch. Just one more step.

Step Three: Publish Your Video

Again this part is pretty easy. It’s as simple as writing a new post on your WordPress site. In fact, that’s all it is … with one little twist. Before we get to that, however, you need to set the correct parameters for the WP-FLV plugin we installed up in step one.

So, login to your WordPress site, and click on the Options tab. In the submenu, you’ll see a tab that says “WP-FLV.” Click on it. In the top box, you need to tell WordPress where the Flash video player is located. If you followed my directions above, all you need to enter in this first box is: http://www.yourwordpresssite.com/video/flvplayer.swf (just change the “yourwordpresssite.com” portion to whatever your is).

Click the graphic to the right, and you’ll see the other settings you need to set. In the “Default movie size” box, make sure you use the same size you used when you converted your videos with the Riva Encoder above. After you enter your setting, click the “Update Options” at the bottom.

There’s one more thing to take care of before you publish your first video. The WP-FLV plugin only works if you’re NOT using the WordPress WYSIWYG or “Rich Text” editor. So, click on the Users tab from the top menu. At the bottom left of your profile, you’ll see a checkbox with the phrase “Use the visual rich editor when writing” next to it. Make sure this box IS NOT checked. If it is, uncheck it, and click the “Update Options” button. After that, you’re ready to publish your first video.

Click on the Write tab from the main menu to create a new post. Just above the Post box, you’ll see a quicktag that says “FLV.” Click that button. This will open a new box that asks you for the file name of your video. It will probably already have “/video” in the box, so all you have to do is add the video’s file name after so it’ll end up like this /video/filename.flv.

The next series of boxes that come up should be filled in by default. The final box will ask “Do you want this video to start playing automatically?” Just click the cancel button because you DON’T want the video to start playing automatically (there’s nothing more annoying than going to a site and immediately some strange video starts playing in your face).

After you click the cancel button, you’ll end up with something in your post box that looks like this: [flv href="/video/filename.flv" width="320" height="240" autostart="false" /]. If you want to also write some commentary on the video, you can do that as well. If not, just click the publish button, and you’re all done.

And that’s it. You now have a video blog (minus the RSS video distribution). If you do use this tutorial to add video to your site, I’d love to hear your feedback, and see your site, so please shoot me an email or leave a comment on this post. Likewise, if you have troubles, share those as well, and I’ll try to help you get them sorted out. Happy Vlogging!

The video fo this lesson is about 16 minutes long, and you can download it here.

The video for this lesson runs about 8 minutes, and you can download here.

The video for this lesson runs about 12 minutes, and you can download it here.

The video for this lesson runs about 12 minutes, and you can download it by clicking here.

There are many different site statistics programs out there, but one of the simplest to install and use is Site Meter. In this brief lesson, I show you how to set up your Site Meter account and install it on your WordPress site.

The video for this lesson runs about 7 minutes, and you can download it by clicking here.