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:

Finding your FTP username and password on Bluehost (optional)

Go to Bluehost.com
click Control Panel

To enter the cPanel at BlueHost
–enter your domain name e.g. daniel-wiener.com
–enter your password – you have received an email with the password from bluehost.

In cPanel->Files click on FTP Accounts

Next Screen scroll down to Account Management and click on “Configure FTP Client”

ON the FTP Accounts screen -there are manual settings at the lower left. These are what you need to enter in your ftp client.
OR
Click on FTP configuration link for your chosen ftp client – CyberDuck, CoreFTP or FileZilla and follow the instructions.

A few FTP client suggestions(optional)

MAC
Fetch – http://fetchsoftworks.com/ Trial for 15 days – $24.00
Transmit – http://www.panic.com/transmit/ – $34.00
Cyberduck – http://cyberduck.ch/ – Free

WINDOWS
CoreFTP (Windows) – Free
Filezilla(Windows) – Free

There are others. Too.

Setting up Cyberduck as an FTP client if using Bluehost (optional)

After downloading Cyberduck, start the application.

Click: “Open Connection”
Server: ftp.domainname.com
username: username@domainname.com
password: your_password
click “Add to Keychain”
path: /public_html
click “connect”

NOTE: some ftp clients are set up differently. Be sure to read the instructions for your particular ftp client.

FTP programs are essentially file browsers, like the Finder on Macs and Windows on PC’s. They work in a similar way to the Finder and to the Windows Browser where you can move files and folders by dragging and dropping, etc. but instead of moving things around on your own computer you are moving them from one computer to another.

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.

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 “Install Themes” tab towards the top of the page.

On the next screen enter “WPFolio” in the search box and click “Search”.

When WPFolio appears click “Install”.

In the dialog box, click “Install Now”

In the next screen click “Activate”

And that’s it. Voila!

NOTE: You can also take a look at Eyebeam.org’s instructions for WPFolio:
WPFolio Instructions and Steve Lambert’s “WPFolio User’s Manual” also has great instructions.

http://dev.eyebeam.org/projects/wpfolio/wiki/WPFolio
http://wpfolio.visitsteve.com/wiki/

Configuring Widgets

The names of Categories and Pages will be the items in the your navigation.

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. There is a bug with WPFolio so that you cannot use category names of more than one word. For example “Recent Work” will cause an error. This will be solved in the next version of WPFolio.

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 you will need to add the new Menus feature of WordPress 3.0 to your installation of WPFolio. This requires some coding. Check the WordPress Codex for instructions.

More Widgets – adding a footer

Also included in WPFolio are Widgets to add text, RSS feed, and credits to the footer. There is a very good explanation of adding these widgets at the WPFolio User’s Manual. Take a look.

Changing the background color, font and other options.

WPFolio gives you some control over the fonts, font colors, font size and background color.

Go to Appearances->Current Theme Options in the left hand subpanel.

Change the options as needed. Click “Save Changes”. I recommend using trial and error to experiment with how your site looks.

Go to the WPFolio Owner’s Manual for more detailed instructions on fonts, etc.

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.

Note: You should prepare your images according to these dimensions, as well. Images should be no more than 900 pixels wide or 600 pixels high.

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 teh information you need will be in the section titled “Using ‘Pretty’ permalinks”.

Miscellaneous Settings

Leave the Miscellaneous Setting 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/.

For the image galleries to show a good-looking “slide show” we need to add a plugin. I recommend jQuery Lightbox For Native Galleries.

In the WordPress Dashboard open “Plugins” in left subpanel. Click “Add New”.

Enter “jquery lightbox for native galleries” in the search box. Click “Search Plugins”

Click “Install Now”

Wait and watch while the plugin installs. Then click “Activate”

Configuring jQuery Lightbox For Native Galleries

Go to Settings->JQuery Lightbox – in the Setting subpanel on the left sidebar of the WordPress Dashboard.

Choose which theme you like. The click “Save Changes”

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 will create thumbnails for you.

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

There are two free online image-editing services that I would recommend if you do not own a good image-editing program. Both of them are easy to use and can do everything you need to creating screen-ready images – resizing, minor color correction and sharpening and exporting as a jpeg.

http://www.pixlr.com/
Go to the site and then click “Image Editor”.

http://www.aviary.com/
Click “Image Editor” icon, then click “Launch Phoenix, start a new creation”. It should be fairly self-explanatory after that.

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”

Steve Lambert’s “WPFolio User’s Manual” also includes instructions on creating galleries.

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 section of WordPress return to the post you just created.

There are 2 ways to access your uploaded images.

1) In the text box, click the gallery icon and then click the image icon to edit the gallery (see below).

OR

2) Click the image icon adjacent to “Upload/Insert (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.

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

Once you have finished click “Save All Changes”, at the bottom of the list of images.
Because this is a “Gallery”, do not click “Insert into Post”

Exit the dialog box

and click “Update”.

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

Repeat to create more “galleries”.

Useful Links

Adding Posts – WPFolio User’s Manual

Choosing the featured image

There is now a new, easier, better way to choose the featured thumbnail on a category page.

On the Posts page of the WordPress Dashboard click “Set Featured Image” in the “Featured Image” subpanel in the lower right sidebar.

Then on the “Add an Image” screen, click “Use as Featured Image”.

Be sure to click ” Save All Changes” before closing dialog box.

The featured image will appear in the lower right of the Edit Posts page. Like this:

You can easily remove the image and add another one, if you wish.

In the WordPress Dashboard open “Plugins” in left subpanel. Click “Add New”.

Enter “Contact 7″ in the search box. Click “Search Plugins”

Click “Install Now”

Once it is installed click “Activate Plugin”

You will most likely use the default with Contact 7 but if you wish to make changes or make sure that it is using your correct email address click “Settings” once it is installed.

For more detailed instructions go to the Contact Form 7 website.

Now you are ready to add a Bio page and a Contact page to your site.