Introduction

This series of tutorials was prepared for a class at Maryland Institute College of the Arts to create a website for students’ work. I will also be presenting website workshops at Rhode Island School of Design Scultpure Department and Bard. Wordpress with the WPFolio template, created by Eyebeam, offers an inexpensive, extensible way to make an artist portfolio website with little technical know-how. These tutorials include step by step instructions on setting up WPFolio from buying a domain name to adding “gallery” pages to a simple well-designed website. It will be helpful for all artists creating their own websites.

1. Intro and Examples
2. Purchasing a domain name and hosting from GoDaddy
3. Installing Wordpress on GoDaddy
4. Using FTP in Dreamweaver to upload WPFolio
5. Configuring Wordpress, WPFolio and required plugins
6. Creating the Navigation Menu by adding Categories
7. Creating Galleries of Images
8. Adding a Bio, Contact & Home Page
9. Customizing the Menu Order
10. Other Online Artist Portfolios

FTP in Dreamweaver, for WPFolio installation.

We are going to be learning about ftp and will install some more files necessary for WPFolio. The folks who created WPFolio also have instructions, if you would like to check them out.

Create root folder on your computer

Create a folder on your computer. This will be the root folder for the local mirror of your online site. Name the folder whatever you wish. If you are on a Mac, I recommend creating this folder in the Sites folder, for the sake of consistency.

Setting up Remote/Local Sites and FTP on Dreamweaver:

NOTE: If you understand FTP and already have an FTP client you can skip this step and just download the required files (WPFolio, Gallery Plus, etc.) and drag and drop them in the appropriate folders. See below.

Open Dreamweaver and choose Sites->New Sites from the top menu.

In the dialog box, choose the "Basic" option. Editing Files Step 1. Enter your site name and the url to your site. Click "Next".

In Editing Files Step 2 choose the radio button that says "No, I don’t want to use server technology." Click "Next".

Editing Files Step 3, choose to Edit Local Copies. Click the folder on the right of the text box to find the folder you created at the beginning of the tutorial. It will look something like this on a Mac. The path will look different on a PC. Click "Next".

Testing files. Use default. Don’t change. Click "Next".

Sharing Files. Enter information for connecting to your site with FTP. If your site ends with .org or another extension use that instead of .com. Enter you username and password. These should be the username/password pair for your GoDaddy hosting account – not your database, wordpress or goDaddy account username and password. I know this is a bit confusing but… Click "Test Connection" to check you have entered the correct information. Troubleshoot if it does not work right away.

Sharing Files Part 2 – Choose "No, do not enable check in and check out." Click "Next".

Check the Summary, then click "Done".

NOTE: Some hosts require “Passive FTP”. In Dreamweaver go to Sites->Manage Sites. Select your site, click “Edit”. In the dialog box choose “Advanced” and choose “Remote Info” from the drop-down list on the left. Then check “Passive FTP” and save and close dialog box.

Downloading remote files to mirrored local site.

Open the file browser. Go to "Files" from the Windows menu:

When the file browser is opened make sure that both the remote site and local site panels are open. It should look something like this:

With the file browser open click the Connect button:

When the remote files appear select the your WordPress folder or if you have uploaded the WordPress files to the root folder, select the files. You don’t need to select the folders/files that come with the GoDaddy install, e.g "cgi-bin", "php.ini", "stats", etc. Then click the green "Get Files" arrow to transfer the Wordpress files to your computer.

To "get" files means that you send them from the remote site (hosted by GoDaddy, in this instance) to your own computer, better known as "downloading". "Putting" files means to send them from your computer to the remote site, better known as "uploading". These terms are good to know, you don’t want to confuse them.

To download your WordPress files will take at least 5 minutes. (more if you are on dial-up) Dreamweaver gives you feedback about the progress of the download.

When the remote files are completely downloaded your file browser will look something like this:

Downloading WPFolio and required plugins.

Download the WPFolio template for Wordpress.
Go to:
http://www.wordpress.org/extend/themes/wpfolio/ and click "Download". Save the wpfolio zip file in you local site folder in wp-content/themes, see below. Unzip the file.

Download the following to the "plugins" folder in "wp-content"
Gallery Plus – http://wordpress.org/extend/plugins/gallery-plus/
Contact Form 7 – http://wordpress.org/extend/plugins/contact-form-7/
On the Eyebeam page of instructions that recommend Form something. I like and am familiar with Contact Form 7.
Lightbox 2 – http://wordpress.org/extend/plugins/lightbox-2-wordpress-plugin/

Optional:
PHP Markdown – http://michelf.com/projects/php-markdown/
The Eyebeam site recommends using PHP Markdown. I am not going to cover it. If it looks promising to you download and install it.

If they are zip files, unzip them.

Uploading WPFolio

Back to Dreamweaver.

In the file browser, select "wpfolio" in "wp-content/themes" and click the blue arrow to "put" or upload "wpfolio" to the remote site.

Select "contact-form-7", "lightbox-2", "php-markup" and "gallery-plus" in "wp-content/plugins" and click the blue arrow to "put" or upload them to the remote site.

 

Ok. Now everything is downloaded. It is time to go to wordpress and configure WPFolio and the plugins.