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.
- Intro and Examples
- Purchasing a domain name and hosting from GoDaddy
- Installing Wordpress on GoDaddy
- Using FTP in Dreamweaver to upload WPFolio
- Configuring Wordpress, WPFolio and required plugins
- Creating the Navigation Menu by adding Categories
- Creating Galleries of Images
- Adding a Bio, Contact & Home Page
- Customizing the Menu Order
- Other Online Artist Portfolios
Enabling WPFolio
NOTE: You can also take a look at Eyebeam.org’s instructions for WPFolio:
WPFolio Instructions
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.
Hello,
I’ve started a good ole fashioned blog with your theme and i love the look.
But I very much want to have the ability for people to be able to scroll to older post pages at the bottom of my main page (and all subsequent pages) and I can’t do that. Can you advise me how to do this or point me in the direction of someone who can? Thanks so much,
Heidi
I started with the WPfolio template. I thought the category’s: calender, art, ect.. that was the nav would be linked to post or pages. How do I do this.
Whenever I’m in dashboard I’m not getting how to put the page or post where I want it in my nav structure.
thanks
rp
Rodger,
The next section
http://www.danielwiener.com/is/artist_website/categories-navigation-menu
explains categories and navigation better.
Categories work more like containers. When you click on a category in the menu you will see a list of posts, which in the WPFolio template will previewed as a thumbnail. For WPFolio, “Posts” are meant to be used for a group of images, while “Pages” are meant for more text based entries. I hope this makes it a little clearer.
If you send me a url of your project I might be able to help more.
I have added some instructions for a Hack for Ordering Categories.
– Daniel
Hello,
I am new to wordpress and am currently installing wpfolio. I tried the hack for ordering catagories. The result is the current state of my site showing this error:
Catchable fatal error: Object of class WP_Error could not be converted to string in /home/usimonfl/public_html/wp-content/themes/wpfolio/functions.php on line 218
So I thought I would start again. I un-installed then reinstalled wpfolio. Started from the beginning and I am still having this problem. Can you help me?
thanks
Simon,
I have not come across this problem so I may not have a quick easy answer.
A few questions:
Did Wordpress and WPFolio work before you tried the hack for ordering Categories?
In general I would try to get it to work before changing the code. Once you get Wordpress and WPFolio to work then try the hack. Once you are changing the code, my guess is that it is a missing semi-colon, quote, bracket or some other small mistake that computer code does not like.
What version of Wordpress?
What plugins do you have installed?
When troubleshooting it can help to turn off all the plugins, see if the problem occurs and then turn on plugins one by one to see if they are causing the problem.
Errors like this are very frustrating but we’ll figure out a solution.
Daniel
Hi
I am have set up my site with a static homepage or frontpage. Just curious if it is possible to have more than one image on there.I am thinking like a triptych l. Have tried, with different alignments, but it just comes out uneven and generally strange looking
Thanks muchly
Lars
Lars,
Sometimes things that seem like they would be easy are difficult. This is one of them. The code for floating images that is created by Wordpress is a little funky and not too flexible, so if I were doing this I would make some changes to the CSS. However, this can be a bit complicated unless you have a good understanding of CSS. My recommendation is to create a composite image of your 3 chosen images in your favorite image editor (photoshop, etc.) and then upload that image. I do this frequently, even though it is a compromise. I hope this helps.
Daniel
Hello Daniel,
When I click on thumbnails, lightbox launches a massive un-centered image. I found this hack:
http://nooxnet.com/2009-07-12/lightbox-2-with-auto-resize-in-wordpress/
but it didn’t work for me. Any suggestions? Oh, and I’m using “one button ftp,” which is simple and somewhat annoying to use, but free.
thanks,
sam
Sam,
Thanks for the tip on “one button fly” ftp.
I took a look at Lightbox 2 with auto-resizing. To help you troubleshoot I need more information. If I were troubleshooting this myself I would check to make sure the files are all where they are supposed to be. I would check the page source for the page (in Firefox, it is View->Page Source). Check the settings in Wordpress. I also use the Firebug extension for Firefox to debug javascript. If you give me more information I may be able to give more specific suggestions.
–And some more thoughts—
I think the problem is that your images are too big. As with everything digital, images will be rendered on different sized screens with different resolutions, so you have to compromise to fin the optimal image size. Now, I suggest that images be no more than 900 pixels wide and 600 pixels high at 72dpi. This size will fit on an average-sized screen without scrolling but aren’t too small on a big screen. This means that you will need to delete the images you have up on your site now, prepare images with photoshop or another image editor and upload the resized images to the image gallery on your site.
As an alternative you can tell Wordpress to resize your images when you upload them. Go to Setting->Media in the Wordpress Admin, enter 900 for max width and 600 for max height for large images and save. You will still have to upload your images again for this to take effect.
If you want to use larger images that are resized to the screen size on the fly as they are displayed, this is something more complicated. I am sure that there is a JQuery plugin or hack that will do that, however I am not familiar with one and I expect using it will require some programming knowledge… not just copy and paste. If you find one, though, please let us know.
I used photoshop, and it worked great! thanks again.
I have gone through these steps and when I go to “view post” this error come up…. any idea what I am neglecting?
Meghan,
This was caused by couple of issues. First it was caused by creating pretty urls (when you added /%category%/%postname% to the permalinks settings). Your .htaccess file either was not writable or did 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".
The other reason this happened is that the “WordPress address (URL)” was different than your “Blog address (URL)” in Settings->General. Your Wordpress Address was http://www.yoursitename.com/art (you had placed your wordpress files in the folder called “art”, as I suggested) but you used the root url (www.yoursitename.com) for you Blog Address. This is a perfectly fine thing to do but you need to configure some files in order for it to work. In the Comment section of Installing Wordpress there is an explanation of the problem and links to instructions for solving it.
A 500 server error is often difficult to solve because the error does not give you any information about what is causing it. The solution to the problem is a little more technical than other parts of these tutorials but is solvable nonetheless with a little patience and careful reading of the instructions.