Why WordPress?

While I have listed other easy and inexpensive ways for artists to create online portfolios, I urge you to consider using WordPress with a theme. WordPress uses open-source technologies, is open-source itself, and is backed up by a generous, enthusiastic, and active community of developers, designers and users. Unlike blogs and paid web services you will have total control over the content and design. Websites grow and develop over time. To remain affordable, many of the other alternatives are inevitably standardized and limit what can be done with them. While WPFolio is also limited and standardized, you can alter its template or change themes as your artwork changes and develops. Once you have entered your content (text, images, video, etc.) in a WordPress site, it is easy to change the layout, design, structure and navigation of the site, without having to enter the content again. Because it is so flexible and extensible, ultimately a WordPress site could better reflect the creativity and do-it-yourself spirit of your artwork.

Student Examples using WPFolio

Nathanael S. Absher
Amanda Stohl Hendershot
Chrissie Carlson
John Emmerich
Jennifer Cheek

Other WordPress Templates

With WordPress it is easy to experiment. Download a theme and activate the new theme by going to Appearance->Themes in the WordPress Admin. Try out different themes with the same content. See how they look. It is easy to change back to WPFolio if the new one does not work out.

Some of the following themes cost money and they are all created for photography but could easily be tweaked to be used for any form of art.

Viso
Aperture
Photo Blog
Flashlike Photographer
Modularity
FolioBlogger
AutoFocus
Photocrati Themes
PhotoMinimal (using Flickr)

Now, onto the tutorial, in earnest. But remember to come back to this page and try out some other themes.

Alternatives Hosting Services

Below are some alternatives to BlueHost along with links to tutorials for installing WordPress. I have never used them and cannot help students and others troubleshoot the set-up process.

HostIcan

One-Click Self-Installation of WordPress with HostICan

Media Temple

1-Click Self-Installation of WordPress with Media Temple

DreamHost

One-Click Self-Installation of WordPress with DreamHost

Purchasing a Domain Name and a Web Site Hosting Plan:

Before you start you should choose your desired domain name, plus some alternatives if you your first choice is not available. And you should have your credit card and a way to copy and keep the usernames and passwords that you will be creating.

You should have:

1. desired domain name
2. alternate domain names
3. credit card
4. a notepad, document or program for safely storing and organizing usernames and passwords
5. patience

NOTE: If you already own a domain name, BlueHost can help you transfer your domain name to them.

NOTE: If you are planning on using a paid portfolio service like CarbonnMade or Arlo only purchase the domain name. If you buy both domain name and hosting plan together there is a discount for the purchase of the domain name. My total cost for both was $17.14.

Sign Up:

Go to BlueHost, click “Sign Up Now”.

Fill in you desired domain name in the textbox on the left. Click “Next” to continue.

If you already have a domain name, fill in the textbox on the right.

Enter Billing and Account Information

Fill in your account information. Choose a password. The password must be 15 characters or less. To create a secure password use a combination of uppercase and lowercase letters, numbers and characters like $,&,*,-, etc. Make sure that you write down your password and save it in a safe place you will remember. This is the password for you BlueHost account and will also be used to FTP files to your server.

Choose you account plan and fill in your credit card info or choose to pay with PayPal.

Click “Next” towards the bottom of the screen.

Congratulations

This next screen echos your bill information and the purchase process is complete.

You will receive 2 emails confirming the purchase of your domain name and hosting account. One email will include your username and password for BlueHost account. Please save it in a safe place you will not forget. The username and password will also be used for FTP.

Once you have checked the accuracy of the information click the “Control Panel” button.

Control Panel – Help and Tutorials (optional)

On the next screen, close the pop-windows trying to sell you stuff.

If you want to learn more about using BlueHost, you could spend some time now reading over some of their tutorials or you can skip onto the next section. To read BlueHost’s tutorials click “Get Started Now”

On http://tutorials.bluehost.com/started/ BlueHost lists its help links. Of particular interest for us are:

Simple Scripts

http://tutorials.bluehost.com/started/ss.htm

WordPress Installation and Configuration

http://tutorials.bluehost.com/started/WP_install.htm

http://tutorials.bluehost.com/started/WP_use.htm

http://tutorials.bluehost.com/started/WP_themes.htm

http://tutorials.bluehost.com/started/WP_plugins.htm

You can also find the tutorials in the cPanel by clicking on the these buttons:

You are done purchasing your domain name and hosting account.

The next step is to install WordPress.

Installing WordPress

If you are not signed in at BlueHost, go to http://www.bluehost.com and click the “Control Panel Login” button at the top right. Sign in with your domain name and password.

On the main cPanel page, scroll down to “Software Services” and click the “WordPress” button.

Click the “Install” button on the “Install WordPress” page.

Choose the most recent version, even if it is the “beta” version. It is good to be up to date. – In this instance it is 3.0-beta1.

Under “Step 2: Advanced Options” click “Click here to display>”. Don’t worry it is not very advanced.

In Step 1:

Optional - fill in a foldername where you want to host your WordPress files.

Pros – Your wordpress files will be consolidated and organized.

Cons – It is harder to set up – with some techy- stuff – e.g. writing htacess files

DON’T fill it in, if you are anxious about tech stuff.

In Step 2) Advanced Options:

Choose a name for your site. For artists it is usually their own name – it will appear in the header and in the title bar. You will be able to change this later, if you change your mind.

Choose a username and password.

DO NOT USE “admin”, the default, it will make it easier for hackers.

Write down your username and password someplace safe that you will remember. Make sure to note that this logon is for WORDPRESS.

BlueHost will send you an email with the logon, as well. Save the email, too.

Check “Automatically create new database” (don’t forget).

In Step 3) Legal Information:

Check “Terms and Conditions”

Then click “Complete”

NOTE: Installing WordPress in its own folder, an optional preference expalained above, can cause a problem. If a user goes to http://www.yoursitename.com they will see a generic “Site Coming Soon” screen while the content of your site is located at http://www.yoursitename.com/folder-name/. There are 2 ways to solve this that are explained in the comment section of this page.

In the next screen BlueHost lists the url’s for your WordPress site and your logon info. Save the url’s or bookmark them. It takes a few moments for BlueHost to install WordPress. To check if it is installed click on the Site Url or the Login Url. Also BlueHost will send you an email to inform you that WordPress is installed.

Once the installation is complete if you return to the main page for “Simple Scripts” you will see a list of MY Installs – which will include “WordPress”.

https://www.simplescripts.com/account/main

NOTE: if you click “Advanced” you will see a list of important info about your installation, as shown below. This is good to know about if you are trouble-shooting or have a question for me. There is also a “Resend Login Info Now” button, if you forget your WordPress logon.

Congratulations. You are done installing WordPress.

Check WordPress:

Once BlueHost has installed WordPress ,check the front page. Go to http://www.yourdomainname.com/ (or http://www.yourdomainname.com/wordpress_folder/ if you created an install folder.

If you installed WordPress 3 you should see something like this:

And you can check the admin section of WordPress as well. Go to:

http://www.yourdomainname.com/wp-admin/ (or http://www.yourdomainname.com/wordpress_folder/wp-admin/ if you installed wordpress in a separate folder.

Enter your WordPress username and password and you should see a screen like this:

Next is installing WPFolio and plugins.

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.

NOTE: For those students using BlueHost and who don’t have Dreamweaver, BlueHost suggests you use CyberDuck (Mac), CoreFTP (Windows), or Filezilla(Windows) as your FTP software. They are free.

Go to http://tutorials.bluehost.com/started/ and scroll down to “Managing /Uploading Files” and read their instructions for setting up these applications.

You can also use the free Firefox add-on FireFTP on all platforms as your FTP client.

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.

Option 1:

The upcoming release of WPFolio (Version 1.5) has many new and useful features. I highly recommend that you download it. (It will be on WordPress.org soon)

For version 1.5 of WPFolio go to:

http://github.com/slambert/WPFolio

Click on “Download Source” button towards the upper right
corner.

Save the wpfolio zip file in you local site folder in wp-content/themes, see below. Unzip the file. It will have a strange name like “slambert-WPFolio-v1.5-1-g2fc9aaa” . Change the name to “wpfolio”. Then follow the instructions for uploading it to your site below.

Option 2 (For version 1.41):

With the recent versions of WordPress you can add Themes from the WordPress Dashboard. Click on Appearances->Themes in the left-hand side panel of the WordPress Dashboard. Then click on the “Add New” button towards the top of the page. On the next screen enter “WPFolio” in the search box and click “Search”. Once WPFolio appears click “Install”, follow instructions and finally click “Activate”.

Option 3 (For Version 1.41):

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.

Option 1) Installing Plugins from the WordPress Dashboard:

With the recent versions of WordPress you can add Plugins from the WordPress Dashboard. Click on Plugins->Add New in the left-hand side panel of the WordPress Dashboard. On the next screen enter the name of the Plugin in the search box and click “Search”. The Plugins are listed below. Click the “Install” button for the appropriate Plugin, follow instructions and finally click “Activate”. Repeat for each Plugin.

Option 2) Downloading “manually”:

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.

NOTE: You can also take a look at Eyebeam.org’s instructions for WPFolio:
WPFolio Instructions

“http://dev.eyebeam.org/projects/wpfolio/wiki/WPFolio

Go to the admin section of your wordpress website.
the url will be something like:

http://www.yoursite.com/art/wp-admin

http://www.yoursite.com/wp-admin

Fill in your username and password for WordPress. You will see the WordPress "dashboard".

Click "Appearance" in the left hand menu.

In the themes section click Activate beneath the WPFolio screenshot.

After you have activated WPFolio it will be highlighted as the Current Theme. You may return to the Appearance settings later for further configuration.

Enable Plugins.

Click Plugins on the left hand menu.

You will see a list of plugins. Click "Activate" for Gallery Plus, Lightbox and Contact Form 7 and PHP Markup if you have chosen to install it. You will not need to activate Askimet or Hello Dolly.

WordPress Configuration

General Settings

Click Settings in the left hand menu.

Enter a blog title, usually your name. The tagline is optional. Leave it empty if you wish. Change the timezone to UTC -5.

Don’t forget to click "Save Changes"

Writing, Reading, Discussion Settings

We will skip Writing, Reading, Discussion for now.

Media Settings

Click on "Media" in the "Settings" menu.

Change Large Size to 900 width and 600 height. The other settings should remain as the default.

Don’t forget to click "Save Changes"

Permalink Settings

Click Permalink in the Settings menu. Enter the following in "Custom Structure":
/%category%/%postname%


This will make the url more "friendly" and will be in everyday language.

Click "Save Changes".

For more information see WordPress Docs on Permalinks. Technical problems can develop when creating friendly urls. This is probably caused by an .htaccess file that is not writable or does not exist. Read the Wordpess Docs on Permalinks to solve the problem. Most of the information you need will be in the section titled "Using ‘Pretty’ permalinks".

Miscellaneous Settings

Leave the Miscellaneous Setting as is.

Configuring Widgets

Now we will add a couple of widgets to the “navbar” to create an easy-to-update menu. The names of Categories and Pages will be the items in the your navigation. Aside from my instructions you can also read the instructions on the WPFolio Site

Click "Widgets" in the "Appearance" in the leftside menu.

In "Available Widgets" drag the "WPFolio Categories" banner to the "navbar".

Open WPFolio Categories Widget by clicking the triangle at the top right. To customize the order of the categories fill in the catgory slug names in the order you wish. Be sure to separate them with a comma. If you are unsure of the category slug name go to Posts->Categories to check them. A slug name will be the category name written in all lower case letters with an underscore replacing white space. Don’t forget to click "Save".

Note: A category will not appear on your website until it includes posts.

In "Available Widgets" drag the "Pages" banner to the "navbar". I recommend that you place "Pages" beneath the "WPFolio Categories" widget. Pages will then appear after Categories in your site navigation.

Ordering Pages – Pages can be ordered alphabetically by title, by their ID or you can customize their order by choosing "Page order" from the drop down list.

You can also exclude pages by adding their ID number.

Skip this step if you are not customizing the page order. To customize "Page" order, navigate to Pages->Edit Pages and click on a Page. Add the order number to "order" in the "Attributes" subpanel. Remember that WordPress, like many digital products, starts with 0 and not with 1. Then "Update" your page.

Note: You may notice some comments regarding ordering categories in the menu. The instructions above should minimize those problems. If you need to customize your menu more than this I suggest you use the Menus Plus+ plugin. Read my tutorial on how to use Menus Plus+ with WPFolio for installation and usage instructions.

Gallery Plus Settings.

Click Gallery Plus in Settngs menu.

You may wish to change "Gallery Columns" from 3 to 4, depending on how you want the layout of your "galleries".
Check "Show Title in Link"

Check "Image overly package" and add "lightbox" in the text box.
Check "Only show gallery when single post"
Leave the rest as is.

There are 2 different kinds of entries in WordPress – Posts and Pages.

Posts are organized in Categories and are meant for multiple entries of a similar kind. All artwork should be entered as Posts and included in a Category. For example a group of paintings completed between 2006 and 2007, would be uploaded to a post named “2006-2007″ and included in the category “Painting”. Later you might add another post, “2008-2009″, of recent paintings to the “Painting” category.

Pages are meant for single entry items, usually complete in themselves. Your bio, artist statement and contact info should probably be entered as Pages.

Creating Categories for the Navigation of your site.

Choosing category names and how they are used in WPFolio.

Categories organize your site and become menu items in the top menu.

Choose short words that are general and inclusive.

Choose categories that will work as your site expands and grows.

Do not create too many catgeories.

WPFolio navigation examples:

Category Suggestions:

Painting
Sculpture
Installations
Editions
Projects
Artwork,
etc.

Unless a series is large and includes many groups of work, don’t create Categories for series. Include them in posts (galleries) within the most appropriate Category.

Special WPFolio Categories that are formatted for text with inlines images, appropriate fore news and blogs:

News
Latest
Updates
Blog
Notable

I recommend creating at lease one category with one of those names as an all-purpose category to notify people about upcoming shows and reviews and the like.

Create Categories

Once you have decided which categories to use.

Click on “Categories” in the “Posts” menu.

On the Categories page enter your category and enter a category slug. The “slug” is what will appear in the url for that category. The slug should be lower case only without spaces. Use a dash “-” or an underscore “_” instead of a space. If you have a category “Recent Work” the slug will be “recent_work”. Add a description. And Click Save at the bottom of the page.

Also you should change “Uncategorized” to one of your navigation categories.

Change Setting for Default Category

One final change in regards to Categories. Return to Settings in the left hand menu and click “Writing”.

Change “Default Post Category” to your most commonly used category.

Click “Save Changes”.

Reminder: Make sure you choose a category when creating a Post.

Julian, A WPFolio User Wrote to Ask About Formatting The Category and Gallery Pages:

Thank you so much for your post. Its much easier to follow than the ‘official’ guide.

I have one question I hope you might know the answer too.

In the text at the bottom of my gallery pages is the permalink. How can I remove this? Or change it to the post title?

I Answered:

I am glad you found my tutorial useful.

In the admin section of WordPress go to Appearance->Editor.

Click on Main Index Template, index.php in the right hand menu.

Find the section that looks like this:

 <div class="posted">
   <b><?php the_title(); ?></b>  | <a href="<?php the_permalink() ?>" title="Permalink"><?php the_time('Y') ?></a> | <?php the_category(', '); ?>
    <?php the_tags('| Tags: ',', ',''); ?>  <?php comments_popup_link(__('| Comments (0)'), __('| Comments (1)'), __('| Comments (%)'), __(''), __('')); ?>
    <?php edit_post_link('edit this entry', '<br /><span class="adminuser">', '</span>'); ?> <!--USER EDIT LINK-->
    </div>

To delete it I usually “comment” it out rather than delete, in case you change your mind at a later date. To comment it out add <!– at the beginning and –> at the end. So that it looks like this.

 <!-- <div class="posted"> 

    <b><?php the_title(); ?></b>  | <a href="<?php the_permalink() ?>" title="Permalink"><?php the_time('Y') ?></a> | <?php the_category(', '); ?>
     <?php the_tags('| Tags: ',', ',''); ?>  <?php comments_popup_link(__('| Comments (0)'), __('| Comments (1)'), __('| Comments (%)'), __(''), __('')); ?>
    <?php edit_post_link('edit this entry', '<br /><span class="adminuser">', '</span>'); ?> <!--USER EDIT LINK-->

    </div>
    <br /><br /> -->

If you want to rearrange it a bit. You could do something like the following. I made the title a link, commented out the archive page (2009) and kept comments the same. I think if you look at the php you will be able to figure out what it refers to e.g. <?php the_title(); ?> is the title, etc. WordPress has a good list of all the template tags if you want to go deeper.

http://codex.wordpress.org/Template_Tags

 <div class="posted">
    <b><a href="<?php the_permalink() ?>" title="
    <?php the_title(); ?>"><?php the_title(); ?></a></b>>
    <!-- | <a href="<?php the_permalink() ?>" title="Permalink"><?php the_time('Y') ?></a> | <?php the_category(', '); ?> <?php the_tags('| Tags: ',', ',''); ?> -->
  <?php comments_popup_link(__('| Comments (0)'), __('| Comments (1)'), __('| Comments (%)'), __(''), __('')); ?>

  <?php edit_post_link('edit this entry', '<br /><span class="adminuser">', '</span>'); ?> <!--USER EDIT LINK-->
  </div>
  <br /><br />

I hope this helps.

You can view his finished site at http://mariancarow.com/.

Before you upload images to your site they need to be sized, color-corrected and exported as jpegs. Color correct you image for the screen. In order to fit on most screens using "lightbox" images should have a maximum width of 900px and a maximum height of 600px. Images should be 72dpi and exported as a medium high quality jpeg. Don’t export them at 99% quality. The final image will be between 50KB and 100KB. WordPress with Gallery-Plus will create thumbnails for you.

Both Photoshop and Fireworks offer batch processing, which can automate some of this tedious work.

I recommend that you organize your image files in folders as you want them to appear online so it will be easy to access them as you upload them.

NOTE: You will have better luck if your file names, include the proper extension, jpg, etc and have no white space or unusual characters, e.g. $#^,"" . It is best if the names include only letters, numbers, underscore and dashes.

Adding Images to a Post and Creating a "Gallery"

Click on "Posts" in the left hand menu of WordPress.
Click "New Post"
Make sure you choose the category for the post, in the right hand sidebar.

Add a title for the the group of images being uploaded, e.g. "Recent Sculpture",
"River Series", etc.
Click the small image icon above the "post" text box, shown below:

An overlay dialog box appears. Click Select Files

Navigate to the images you wish to upload and select them.
You can select multiple files.

Watch the images as they upload. It will be quick if you have broadband.
Click "Save All Changes" and the screen will refresh in the Gallery tab.

NOTE: I have noticed a glitch. If you are uploading large files or many files at the same time, the gallery tab does not appear. Try uploading one image first. Then repeat the process selecting multiple files from your computer. This method seems to force the software to create a gallery.

Leave the other gallery options, as is.

You may want to change the number of Gallery Columns depending on the layout of your page.
You will return to this screen later to add more information like title, media, size to your images.

Click "Insert Gallery".

After returning to the post page Click "Publish" on the right side of the page.
Click "View Post" to check the page.
You should see a page with several rows of thumbnails cropped to 150 x 150 pixels.
Click the thumbnails and see the lightbox in action.

Adding the title, media, date and size of each artwork

In the admin sectio of WordPress return to the post you just created.
In the text box, click the yellow gallery icon and then click the image icon to edit the gallery (see below).

In the overlay dialog box click "show" next to an image.

Add title, media, size and date to "Title". (As you get to know WordPress, you may want to use the other options. For now, leave them as is.)

Repeat this process with all your images.
Once you have finished click "Save All Changes", at the bottom of the list of images.

Don’t forget to do this or your titles will be lost and you will have to enter them again.

Exit the dialog box and click "Update Post".

Check your page by clicking "View Post". The title, etc. only appears in the "lightbox", not below the thumbnails.

Repeat to create more "galleries".

Click on "Pages" in the left hand menu.

When installing WordPress it creates a page called "About". Let’s change that page into your bio page. Click on "About" in the center of the page. Change the title at the top of the page from "About" to "Bio".

In the text box, start adding your bio. It works like a simple word processor.

NOTE: The "return" key creates a full line space. If you only want a line break use shift-return.

I recommend that because of the vagaries of html you format your bio very simply as a list.

The following is moderately difficult to do in html:

This is easy to do:

2007
Exhibition 1
2008
Exhibition 2
2009
Exhibition 3

When you are finished adding your bio. Click "Update Page" at the right. Don’t forget. Your work could be lost if you don’t.

Create Contact Page

While we are in Pages let’s create a contact page (if you have installed Contact Form 7).

Click "Contact" at the bottom of the left hand menu. Then copy this code including the square brackets:
contact-form 1 "Contact form 1"

Then Click "Pages" in the left hand menu.
Click "Add New".
Enter "Contact" as the title and then paste:
contact-form 1 "Contact form 1"
into the body of page, as shown below. Don’t forget the square brackets.

Click "Publish" on the right side. Click "View Post" to check the page. It should look something like this:

For more complex forms and troubling-shooting view Contact Form 7 Docs

Create Home Page

By default WordPress displays a list of recent posts on the front page of your site. These are instructions for displaying one large image on your front page.

Create another new "Page". Title it "Home". Upload one image and insert it into the page.

A horizontal image 900 x 600 pixels works best. Horizontal images work best since they match the format of computer screens (example).

If you would like to use more than one image I suggest compositing several images together as one image in Photoshop and simply use that.

Click "Publish" or "Update Page" in the right sidebar.

You are not done yet

Go to Settings->Reading

Click "A static page" and choose "Home" from the dropdown list. Click "Save Changes" at the bottom of the page.

Check the front page on your site to see if it work.

For more information look at the WPFolio instructions or the WordPress instructions for creating a static home page. Voila!

Adding a Header Image

The WPFolio Wiki has good instructions for adding an header image to your site.

If the WPFolio Categories Widget and the Pages Widget don’t allow you to customize the navigation menu as much as you would like I suggest you use Menus Plus+. Read about it here, along with Keigl’s instructions. Or follow mine below.

Install Menus Plus+

In recent versions of WordPress it is possible to install plugins, automatically, from the WordPress Admin. This makes it very very easy. No more downloading and uploading using FTP, etc. If you don’t have a recent version of WordPress, upgrade.

Click on the Plugins subpanel

Click "Add New". Search for "menus plus+"

In the dialog box that appears click "Install Now"

After the plugin is installed sucessfully your screen should look something like this. The version number may be greater than this. Click "Activate Plugin" .

Now that Menus Plus+ is installed click the "Appearance" subpanels and click "Menus Plus+".

To use Menus Plus+ , you should have already created a Home page, Categories with Posts and Pages like "Bio", "About", or "Resume" or at least placeholders for those items.

Click "Home", label it, and add a class, if appropriate, then click "Add".

When "Home" is added it looks like this.

Click "Category", choose which category you would like to add (painting in this instance) and then click "Add". Menus Plus+ gives you the option to show the children of the parent category but WPFolio does not distinguish sub-categories, so leave the default as "No".

If you would like to add a Page to the menu, click "Page".

Choose the page and click "Add"

You can rearrange the menu items by dragging and dropping them (to your heart’s content).

Adding the Menus Plus+ menu to the Navbar

Click "Widgets" in the "Appearance" subpanel.

Drag "Categories" and "Pages" out of the navbar.

Drag the "Menus Plus+" banner to the "navbar".

There are a few advanced options to Menus Plus+ which you can ignore for this project. And that’s it. Check your site and see what your navigation menu looks like.

My Ordering Categories Hack

Introduction

Even though it is probably not necessary I am not deleting the category hack. It took me a long time to write it up so here it is if you want a down and dirty way to order categories. This is a hack, a workaround to order the menu. It requires that you change a little bit of code to get it to work. Despite the length of the explanation it is quite easy.

Remove Categories and Pages Widgets from the Sidebar.

If you have used Widgets to post Categories and Pages in the Navigation you will need to remove them. This hack requires that you do some coding by hand and not use the Graphical User Interface. Skip this step if you have not used Widgets

Go to the Admin section of WordPress. Click on Appearance->Widgets and move Categories and Pages out of the Sidebar.

Editing the Code in header.php

Go to Appearance->Editor, then click on Header in the right hand column.

You will see code for the MENU which will look like this:

<div class="nav">
<ul>
<!--
>?php wp_list_categories('exclude=&title_li=' );?>

>?php wp_list_pages('exclude=&title_li=' );?>
-->
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('navbar') ) : else : ?>
        <ul>

<?php wp_list_categories('exclude=&title_li=' );?>

<?php wp_get_archives('type=yearly'); ?> 

<?php wp_list_pages('exclude=&title_li=' );?>
</ul>
<?php endif; ?>
</ul>

</div> <!-- END Menu -->  

You will change "wp_list_categories" so that it is ordered by the "slug". Also I like to comment out the original code so that you can return it easily to its original state. I also commented out the Yearly Archives so the year will not show in the menu. Aside from commenting out the only real change is "wp_list_categories(‘orderby=slug&exclude=&title_li=’ )"
Your changes should look something like this:

<div class="nav">
<ul>
<!--
<?php wp_list_categories('exclude=&title_li=' );?>

<?php wp_list_pages('exclude=&title_li=' );?>
-->
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('navbar') ) : else : ?>
        <ul>

	<?php wp_list_categories('orderby=slug&exclude=&title_li=' );?>
    	// categories ordered by slug
	<?php wp_list_pages('exclude=&title_li=' );?>
    	//pages will follow categories in the menu, change the order here, to change the order in the menu

<?php /* wp_list_categories('exclude=&title_li=' */);?> // original

<?php /* wp_get_archives('type=yearly'); */ ?> // original
//this hides the year archives in the main menu. Many people don't want the year showing in their navigation.

<?php /* wp_list_pages('exclude=&title_li=' ); */ ?> //original
</ul>
<?php endif; ?>
</ul>

</div> <!-- END Menu -->  

Click "Update File" at the bottom of the page to save the changes to the file.

Changing the Category slug

Go to Posts->Categories. Click on an existing category to edit it. Change the name of the slug so that is preceded by a number. In this example "Sculpture" will appear first in the menu.

Click "Update Category" to save. Number all categories accordingly.

And that’s it.

As I stated above this is a hack. And not a pretty one. Though it works you might also try the category plugins that are available.