This WordPress tutorial was specifically written for the students in the Contra Costa ROP Web Page Design Class. This tutorial will outline the process of creating a blog or weblog using a publishing platform called WordPress. Before beginning this WordPress tutorial you will need the following:
- Dreamweaver (MX 2004) - another text editor and an FTP program may be used, but you will have to modify the directions to suit your needs.
- A zip utility to unzip files - Windows XP has a built in zip utility
- Knowledge of HTML/XHTML and CSS (knowledge of PHP/MySQL is a plus, but not necessary).
- A web hosting account with FTP access. This hosting account must support PHP and MySQL. You will need your hosting account ftp address, your username and password and the name of your MySQL database and password.
- You should know how to FTP files to your web host. If you do not know how to FTP you can review one of these tutorials:
- FTP and Dreamweaver
- Using WS_FTP
- Using Firefox (includes information on FireFTP a free FTP extension for Firefox)
- If you do not have access to these requirements, you may want to use one of the hosted blogging tools mentioned in Blog Publishing Background.
- While this tutorial is specifically written for people with an f2o.org hosting account, I have tried to include alternative directions for people who are using other hosting companies.
What is a Blog
A blog or weblog is essentially a journal or diary that is available on the web. Updating or writing in a web journal is called "blogging". Blogs have become very popular over the last couple of years; it is estimated that over 8 million U.S adults now have weblogs. To learn more about the blog craze you may want to ready this Time article 10 Things We Learned About Blogs.Once a blog has been setup it is very easy to update on a daily or regular basis because it requires little technical knowledge. Simply type the text that you want to add to your blog into a web form and click a button. Your new content is published immediately to the web. I have several blogs that I maintain including: a photography blog, a recipe blog, and Rob's baseball blog. I hope to convert this site over to a blog at some point.
Blog Publishing Platform Background
There are many blog publishing platforms available. Some are hosted on third party web sites like Blogger, TypePad, SquareSpace, ModBlog, Multiply, LiveJournal, and BlogEasy. The benefit of these hosted blogs is that setup is very easy; it usually only requires the user to complete a web form. Maintenance is also simple; a few mouse clicks and you can change the look of your entire blog. The possible downside of these blogging platforms is that their features may be limited and the blog is not usually hosted on your own domain. If you decide that a hosted blog is the best option, Stephanie Booth has great information about hosted blogs on her blog, Climb to the Stairs. She tested 13 different hosted blog solutions and provides her readers with feedback on her blogging journey.More robust publishing platforms require the installation of files on your web host. These publishing systems include: b2, Movable Type, Drupal, Greymatter, and WordPress. For these programs your web host must have PHP/MySQL and possibly CGI capabilities. You will need to have some experience with HTML, FTP, CSS, and PHP. You can sign up with livingdot.com and for $9.95 per month you can have your blog hosted on its own domain name. Movable Type installation is free and it is $5.95 to register the domain name.
Regardless of the publishing platform you use, once the blog is up and running it's very easy to add new content or a "post" to your blog. Blogging software uses a web form interface to add content to your blog. I have included a sample of the form that I use to add entries to my photography blog below. The photography blog uses WordPress as the publishing platform.
The web form interface is straightforward (the above screen capture is for version 1.2). Type the title and the post. Apply formatting with the formatting toolbar or you can hand code XHTML. Select a category that you would like the post filed under. When you are satisfied with your post, click Publish. Of course there are more advanced features like inserting and resizing images, but those will be covered later in the lesson. You can see more screen shots of WordPress in action at http://wordpress.org/about/screenshots/.
For those of you with no HTML/XHTML experience I would recommend using one of the hosted blog options like Blogger, TypePad, SquareSpace, ModBlog, Multiply, LiveJournal, or BlogEasy. For those of you with some html, ftp, css, php/mysql experience who would like to experiment with a blog system that is more customizable and robust then continue reading to learn how to setup WordPress. For students in the ROP class I would recommend that you have completed the HTML unit and the Dreamweaver unit (including tutorial 9) prior to completing this tutorial.
WordPress Setup
I have setup three publishing platforms, b2, Movable Type, and WordPress and numerous hosted blogs. My first experience with blogging software was the installation of b2 for my photography blog a little over two years ago. Recently, my fiance wanted to be able to update his baseball web site, but he had a hard time learning Dreamweaver (which is what I used to create and edit his site). I teach web development all day and during my off time I'm not very enthusiastic about updating his site. After much moaning about the lack of updates on his site, I decided to convert the site to a blog format so he could do the updating himself. I decided to use WordPress (a descendent of b2) because it had the features he needs and I could install it on his existing domain. I installed WordPress on his site and found that it was very simple to install and he is now having a blast updating his own pages. I no longer have to hear "honey, can we work on my site?" We're both happy. :)Downloading WordPress
I am going to outline the basic steps of installing WordPress, but you will want to keep these two URLs handy for future reference: WordPress support forums - http://wordpress.org/support/ and WordPress installation information - http://codex.wordpress.org/Installation.WordPress is free and you can download the latest zipped version from their download page. When downloading be sure to select the latest stable version. Once you have downloaded the zip file you will need to unzip (extract) it. If you do not know how to unzip a file, I have a tutorial for using WinZip. When you unzip or extract a file a folder will be created with the same name as a the zip file. When you unzip the file, you should make a note of the extracted folder location.
In Windows Explorer, locate the folder that you just extracted. Inside this folder there should be a sub folder called WordPress. The WordPress folder contains all of the necessary files to setup your blog. The entire folder will be uploaded to your web host and it will become a part of the URL (address) to your blog, so may want to rename the folder. For the purpose of this tutorial I am going to rename the folder blog. To rename a folder, right click the folder in Windows Explorer and select Rename, type blog and press enter.For this tutorial we will setup the WordPress blog on f2o.org (a hosting company that provides hosting to my students).
Using Windows Explorer, move the blog folder into the same folder that contains the rest of your f2o site files. If you are using a different web host move the blog folder into the folder that contains the rest of your web site. If you do not have a site yet, but you have a host, you can use this tutorial to setup a Dreamweaver Site Definition to connect to your web host.
If you are in my class you should already have a Dreamweaver site definition that connects to your f2o.org account.
Open Dreamweaver and select your f2o site from the Manage Sites dialog box (Site > Manage Sites). Open the Files Panel, Window > Files or press F8. To the right there is a screen capture of my Files Panel. Make sure that the Files Panel is set to Local View and that you have a folder named blog in the files list. If not locate the blog folder and move it into the correct folder now.
In the Files Panel double click the blog folder. The blog folder has all of the necessary configuration files for WordPress. It also contains a readme.html file that I would recommend that you open and read. The readme.html file contains installation and configuration instructions.
Editing the wp-config-sample.php File
In order to configure the WordPress blog a PHP file called wp-config-sample.php must be edited and resaved as wp-config.php. Before you can edit the wp-config-sample.php file you need to know the username and password for your hosting account. You will also need the MySQL database name and database host address. For f2o users the MySQL database name is the same as your user name and the database host is localhost. If you are using a different hosting company you will need to obtain this information which can usually be found on hosting company support pages.In the Files Panel double click the file wp-config-sample.php to open the file for editing. You will need to edit this file in code view, so click the code view
button or select View > Code from the menu. If you do not have Dreamweaver you can use any text editor (NotePad) to edit this file. The wp-config-sample file is written in PHP, so it may seem like Greek to some of you. WordPress uses XHTML, PHP and MySQL. PHP is a scripting language that is used to create dynamic web pages. It works in conjunction with MySQL, a database language. While you do not need to know PHP and MySQL to complete this tutorial, you may find this Introduction to PHP helpful if you want to understand a little bit about how the underlying PHP and MySQL code in your WordPress blog works.
Note: Do not try to preview the wp-config-sample.php file in your web browser. In order to preview the file locally you would need to have a testing server with PHP/MySQL running.
WordPress needs to know the location, database name, username, and password of your MySQL database. These details are stored in the wp-config-sample file. These "connection" details can be found in lines 6-9 of the wp-config-sample.php file, they are under the comment // ** MySQL settings **//. I have included a screen capture of the original settings in the wp-config-sample file below. You will only need to change the three words that are underlined with green.
In line 6 you will need to change the name of the database (DB_NAME). Currently the name is wordpress. Replace wordpress with your database name. My username and database name is robin, so I replaced wordpress with robin. Make sure to keep the single quotes around the database name.
In line 7 you will need to change the username (DB_USER) to your username. Again my username is robin, so line 7 looks like this:
(be sure that you do not delete the single quotes!)In line 8 you will need to change the password (DB_PASSWORD) to your hosting account (MySQL database) password. Replace password with your own password.
You do not need to change line 9 if f2o is your host. The DB_Host on f2o is localhost. If you are using another hosting company you may need to change the DB_Host. When you are done editing the file, lines 6-9 should look something like this:
Again, if you are using f2o you must use your own username and password. Your DB_Name is the same as your username. The DB_HOST is localhost. Do not delete any of the single quotes in the code.
That's all the code editing you will need to do for now. The wp-config-sample.php file needs to be saved as wp-config.php. In Dreamweaver or your text editor click File > Save As and type wp-config.php in the File name box
and make sure that the file is being saved in the blog folder. Click Save. Uploading the Blog Files
If you are in my class you should already have the remote site information completed in the Dreamweaver site definition. Click Site > Manage Sites > Select your site and click Edit, then click Remote Info. You do not need a Testing Server. I have provided a screen capture of my remote site definition to the right for quick review. Of course you will need to use your own FTP host address, host directory (should be www/public_html if you're using f2o), login name and password. After checking the remote info, exit the site definition dialog box.
If you need help setting up a site definition you should read this tutorial on Dreamweaver FTP.
From the Files Panel, select the blog folder and click the Put 
icon. If you are prompted to include dependent files click No. Since you are uploading the entire folder you do not need to click Yes to the dependent files prompt. If you are not using Dreamweaver, use your FTP program to upload your blog folder to your web host. Running the WordPress Install Scripts
You will need to run a script from your web site that is located in the blog/wp-admin folder called install.php. Open Internet Explorer.If you are using f2o, copy and paste the example below into your address bar and replace username with your username.
http://username.f2o.org/blog/wp-admin/install.php
If you are using another hosting company the address to the install script should look something like this http://www.yourwebaddress.com/blog/wp-admin/install.php
Press Enter or click Go
. The WordPress welcome screen should appear (see image below). If it does not double check the address, correct any errors and try again. 
Click the First Step link.
Enter your web log title and your email address and click Continue to Second Step.
WordPress will build all of the necessary MySQL/database tables. You will be given your login id and password. Make a note of this information or print out the page. You will need this username and password.
Click log in and use your admin login name and password. These are case sensitive. Click Login.
Note: If for some reason the login page does not appear, the URL is http://username.f2o.org/blog/wp-login.php
Once you login, the WordPress post page should appear. I displayed the post page at the beginning of the tutorial, click here if you need to refresh your memory.
Blog Addresses
You can use the following address formats to access your blog and the administrative page.Blog Address: http://username.f2o.org/blog
Administer Blog: http://username.f2o.org/blog/wp-admin
Create a New User Account in WordPress and Increase User Privileges
I would recommend that you create a second user account with administrative privileges. After creating the account you can use it to make updates to your blog. From the WordPress menu click Users.
Complete the Add Users form with your own personal information and click Add User.
The page will display a list of users with your user information. You should give yourself admin level privileges by increasing your user level to 9.
The image above shows my Users screen. Notice the Level column. Click the + until the 0 changes to a 9. By increasing the Level, you will be able to author new posts and configure your blog with this account. You can use your personal account to login to your blog from now on. Here is a screen capture after I increased my Level to 9.
Click the Profile menu and complete the user details for the admin account. You can use the profile menu to change account passwords.
Note: You can change the admin password from the Profile page, but there seems to be some kind of documented bug with the admin account password in WordPress 1.2 (this is not a problem in 1.5). If you get locked out of the admin account after changing the password you will need to access the MySQL database. This can be done from the Account Manager at f2o. From the Account Manager use Manage MySQL to change the password (user_pass field) in the wp_users table in your database. Unfortunately, you cannot simply type a new password, you will need to create a new password using this MD5 Hash Generator. After creating the password hash, copy and paste the hash code into user_pass field in the wp_users table and save the table. This really goes beyond the scope of this tutorial, but since I experienced this problem, I wanted to make you aware of the issue and give you a solution in case you experience the same issue. Back to the regularly scheduled tutorial.
Editing the General Options
Click Options in the menu bar.
Change the Web Log Title to your desired blog name and change Tag line to whatever you like. Change the E-mail address to your own e-mail address. Click Update Options
. Notice that the options menu (see above image) has a sub menu. This is the configuration menu for WordPress. I would recommend that you take a look at each of the menu items as time permits. We just configured the general options. Here is a brief summary (highlights) of the rest of the options menu items:
Writing: Configure the default settings for the post screen. You can also configure WordPress to accept blog entries by e-mail.
Reading: Set the number of blog entries to display on the front page. The default is 20. If you are creating a photo blog you probably want to change this to a smaller number of entries so the page does not take a long time to download.
Discussion: Discussion options allow you to setup commenting. Visitors can post comments about your blog entries. You may want to turn this feature off or you may want to moderate comments before they are posted to your blog. Unfortunately, blogs have become the target of spammers and comment spam has become a real problem in the blogging community. Fortunately, WordPress has some nice comment spam protection features which are accessed in the discussion options. In the comment moderation box you can type a list of words that spammers frequently use separated by line breaks. This feature is similar to spam filters in e-mail. WordPress even provides a list of words you can copy and paste into the comment moderation box.
Miscellaneous: Configure your blog to upload images. This feature will be covered later in the tutorial.
Permalink: Stands for permanent link. PHP content is dynamic so links change. You can, however, have permalinks to blog entries. On this page you can customize the permalink structure. For beginners, I would recommend using the default structure. This is an example of a permalink that links to a blog entry about my crab Iggy.
Link Manager: You can setup a rating system for links in your blog.
Checking Your Site So Far
You can see what your site looks like so far by clicking View Site in the menu bar. Click the browser back button when you're done admiring your handy work.Creating Categories
Categories are used to organize blog entries. Take a look at my recipe blog. Notice the menu on the right. There is a Categories heading which includes: *Most Popular*, About, Appetizers, Barbeque, etc. Categories are used to organize your site content. If you click the Appetizers category you will see all of the appetizer recipes that I have posted on the recipe blog. Categories allow the visitor to navigate the site by subject area. From the WordPress menu click Manage > Categories.
By default when you install WordPress you will have one Category named unassigned. Click the add new link on the categories page. The Add New Category form should appear.
You can use whatever category names you like. If you are creating a personal journal you may want to create a category for each of your interests or hobbies. Category names are up to you, you can always add or delete categories at a later date. You may want to look at other blogs to get some ideas about categories to include in your own blog.
In the Category Name box type the desired category name. You can create sub categories from the Category parent drop down list. I would recommend that you create all of your main categories first, then create any sub categories. You can add an optional description, but this description will appear in the category menu and tends to clutter up the menu, so keep it short.
Click Add Category. Repeat the above process until you have added all of your blog categories.
Writing a Post (Publishing)
From the WordPress menu click Write. The post form will display. Type the Title (appears above the post) and the post content. You can use the QuickTags to add formatting to your post.
I think these icons are pretty self explanatory to those of you who know HTML. Most of these buttons are toggles. For example, click
to turn on bold (strong). Type the text and click 
to turn off bold. Click the QuickTags link to learn more about each of the icons. If you want to add formatting to existing text, select the text and click the desired format button. 
On the right-hand side of the Write screen there is a Category list. By default all new entries are added to the general category. Select the appropriate category for your entry. You can select more than one category. Trackback URLs are not required. You can learn more about Trackback at plasticbag.org.
For this tutorial I am only covering the basic options, but there are Advanced Editing features. Below the trackback input box you should see the following buttons:
You can save your post as a Draft for later editing. Mark posts as Private so that the general public can't view them. Publish posts for the whole world to see. Advanced Editing options contain additional posting options (password protection, excerpts, commenting, etc.). Read the WordPress Reference to learn more about all of your posting options.
After typing up your entry, click Publish, the write screen will reappear. Click View Site to view your latest post. Click the Browser's back button to return to the WordPress Admin screen when you're done viewing your blog.
Editing Entries
From the WordPress menu select Manage > Posts; from this page you can edit or delete existing posts. (Note: WordPress version 1.5 will also have a "View" option.
The Manage Posts menu displays all of the existing blog entries (and drafts). You can edit a post by clicking the Edit link next to the entry. Click Delete to delete a post and click View to view a post. Notice that there is no Edit/Delete option next to the Hello World entry in the above image. This is because I was logged in as Robin and not admin and the post was created by the admin account. If I login with the admin account I will be able to edit or delete the first post (which I will). In WordPress you can have multiple authors and you can only Edit and Delete your own posts.
Use Show month to display a calendar month's posts. The Search function can be used to search posts that contain a word or phrase.
Comments can also be accessed and edited from the Manage menu. They can be viewed, deleted, edited, and approved (if you have comment moderation enabled).
Allowing File Uploads
I use WordPress for my photography blog. Before I upgraded my blog from b2 to WordPress I had to use FTP software to upload my photos to my site. Now I can easily upload photos with WordPress.Changing Folder Permissions in FireFTP or WS_FTP
By default image uploading is not enabled; this feature needs to be enabled. Before enabling the feature folder permissions need to be changed on the server. The wp-content, located in the blog folder, is the default upload folder. This folder has to be given "write" permissions in order to enable image uploading. Unfortunately, to my knowledge, there is no way to change permissions on a server folder in Dreamweaver. In order to change the folder permissions you will need to use another FTP program that supports chmod (Unix) like WS_FTP or FireFTP. If you do not know how to use another FTP program I have a tutorials for WS_FTP and a tutorial for installing extensions in Firefox with specific instructions on how to use the FireFTP extension.FireFTP
If you have the Firefox browser you can download and install the FireFTP extension. After installing the FireFTP extension, access the extension by clicking Tools > FireFTP. Enter your host, login, and password and click Connect.
Click here for a more detailed FireFTP screen capture. The right-hand side of the FireFTP screen displays the remote files. If you are connecting to f2o the folder structure should look similar to the image below.
Double click the www folder (circled above).
Double click the public_html folder (circled above). Then double click the blog folder.
You should see four folders and numerous files in the blog folder. Right-click the wp-content folder and select Properties. In the Properties box check Write under Group and Public. This will set the permissions on the folder to 0777. Click OK. 
The process should be very similar if you are using another host. Navigate to the wp-content and change the folder permissions.
WS_FTP
In WS_FTP the process is essentially the same. You will need to connect to your host. Navigate to the wp-content folder. Left click the wp-content folder once to select it, right click the wp-content folder and select chmod (UNIX). Check all of the remote file permissions and click OK. You can find some additional directions with screen captures at DisCusWare.Enabling File Uploads
In WordPress click Options > Miscellaneous from the menu and check Allow File Uploads.
WordPress recommends a destination directory and a URI of the destination directory (circled above). Beginners should use the recommended directories. You can retype the recommended directory or highlight the recommended destination directory text by dragging your mouse across the path on the web page and press CTRL+C to copy the directory path. Click in the input box and press CTRL+V to paste copied path into the input box. Repeat this process for the URI.
The maximum image size you can upload is defaulted to 96kb. You may want to increase this setting if you need to upload higher resolution images. Once you have made the changes, click the Update Options button at the bottom of the page.
Uploading Images
Once you have enabled image uploads you will have a new menu option called Upload, click Upload.
Click Browse to locate the image on your hard drive that you would like to display in your blog.
Type a description of the image (the description will be included in the alt tag).
WordPress will also create a thumbnail image.
Click Upload File and the file will be uploaded to the wp-content directory.
After a few seconds a confirmation screen should appear.
The display code is used to display your image in a post. Highlight the <img src> code (red) and press CTRL+C to copy it. Click Write from the menu and click inside the post box. Press CTRL+V to paste the code into your post. If you would like to use the thumbnail file in your post the thumbnail filename will have a prefix of thumb-. For example, I uploaded and created a thumbnail image of test2540.jpg. If I wanted to display the thumbnail file for test2540.jpg in a post the filename would be thumb-test2540.jpg. If you wanted to create a link from the thumbnail image to the full size image here is a code example:
<a href="http://www.yourwebsite/blog/wp-content/test2540.jpg"><img src="http://www.yourwebsite/blog/wp-content/thumb-test2540.jpg" alt="sample image" width="100" height="200" /></a>
Plugins
Plugins add additional functionality to WordPress. Plugins consist of a few small files that you download, install, and activate. The files need to be placed in the appropriate directory, usually the wp-content/plugins folder. You should always read the readme file that accompanies the plugin for specific installation instructions. Once you have copied the files to the appropriate directories you activate the plugin via the Plugins menu.Visit the WordPress Codex for plugin installation directions. The Codex also has a list of available plugins. WordPress Plugins Database is also a useful site for finding plugins.
If you are creating a photo blog or you plan to add photos to your text blog on a regular basis I would recommend that you download and install IImage Browser. It makes uploading and adding images to your blog much easier.
Styling Your Blog
Your blog's style is controlled by a CSS file. The CSS can be accessed via the WordPress Admin page by clicking Presentation > Theme Editor and selecting the Stylesheet link. You can also edit the styles.css file locally. The file is located in wp-content/theme/default. I would recommend that you make a backup copy of the CSS file before you modify it. You can edit the styles.css on your local hard drive with Dreamweaver or any text editor and upload it to the server. For more information on CSS and WordPress read wp-layout.css Explained and the WordPress CSS Guide.Closing Notes
In addition to the CSS guides, Tamba2 has a numerous WordPress tutorials.WordPress has a support forum that you may find helpful @ http://wordpress.org/support/.
Eric Meyer has an article on his upgrade experiences from WordPress 1.2 to 1.5 that you may find helpful and interesting if you're looking to upgrade your current install.
About.com has a section devoted to web logs that you may find useful.
I hope that you have found this tutorial helpful. Please leave a comment in one of my blogs or drop me an e-mail (address below) with your new blog address, I would love to see it!
0 comments:
Post a Comment