Make a portfolio website with WordPress

The other day I set myself to figuring out what the best way to make a portfolio website for my artwork. I hope that this guide can be of use to any artists or designers looking for an easy way to build out a portfolio. If you can get WordPress installed and have access to an FTP account then all you really need is a little love and patience and all will be well.

Thinking about how I would go about making such a site, it seemed ideal that it would use one of the preexisting content management systems like Drupal or WordPress. For me, the main requirements I had were: (1) a portfolio page with a bunch of thumbnails, (2) sub-pages where contact and other static information could published, and (3) easy content updating.

One good candidate I came up with was Zenphoto, a sample site of which you can find here. In some ways this would make a very good solution because the diversity of gallery themes give a certain latitude in how the images are presented. However, from what I could smell, Zenphoto is really lagging other CMS systems in terms of development and a range of themes\plugins. I therefore decided to move on.

The solution I finally settled on was a combination of WordPress and the Yet Another Photoblog Plugin. You can see the site I made here. It uses the Monolit theme pretty much out of the box. For general reference I will outline the changes I made to it for anyone who wants to adapt it for a similar purpose. First thing is first: install WordPress, Yet Another Photo Blog and Monolit. Dreamhost, my host, has a very nice one-click install that drops a WordPress installation and mysql database right on top of your domain making the setup of WordPress a breeze.

• Go to the YAPB settings and under Automatic Image Insertion, unselect “Activate automatic image rendering in general” otherwise two copies of each picture will appear on each page.
• Create a few posts with images in them and assign them the same category. This will group them together on the Archive page that we will create next and then hack into a Portfolio page.
• Create a page using the Archive template.
• Also create however many additional pages you may want to have (About, Contact, et cetera)

Now for a small dose of PHP editing:

• In the folder that you uploaded the monolit theme there will be a subfolder called config and in it a file called config.php; find it and open it. I think you will have to use an FTP client for this step as it will not appear in the Theme Editor portion of your WordPress UI. The first section should have a list of definitions that look something like: “define(‘MONOLIT_SET_ABOUT_WP_TITLE’, ‘about’);”. In this example ‘about’ is referring to a page title as it would appear in WordPress. Copy this line over a few times and change it to suit your needs [eg. define('MONOLIT_SET_CONTACT_WP_TITLE', 'contact');]
• Change the “define(‘MONOLIT_SET_COPYRIGHT)” string to alter the footer text of each page.
• In the Menu Configuration section add a define line for each of the pages that you referenced in the first WordPress Page Titles section and set them to show (1). Also show the latest page (this is the index) and the archive page.
• Take note of the other settings you can change in the config file for your reference and to tweak things later.
• Open the functions.php file. You can do this within the WordPress theme editor. Find the menu function (“function monolit_get_menuitems”). As you can see here, these if statements are calling the config file we just edited and looking to see if the pages referenced there are turned on (1) or off (0). Duplicate the “if (MONOLIT_SET_SHOW_ABOUT == 1) :” section as many times as necessary and alter the copies to cover the new pages that you referenced in the config section.
• Look for “latest_photo_link = buildLink($latest_photo_url, MSG_MENUITEM_LATEST);” Here if you change “MSG_MENUITEM_LATEST” to something like “Portfolio” it will alter the menu text accordingly.
• After you made these changes go back and view the site. If you have not actually created the pages that you referenced in config.php and in functions.php make them now. The links on the top of the blog should now all work.
• Now go to the archives link that you enabled. The theme is set up to show you an archive portal when you do that which lets you enter a variety of archives based on different criteria (date, author, category, etc). This is why it was useful to keep all the posts we made earlier in the same category. When you click on that category you will be taken to a page with thumbnails of the images in your post that will be sized and arranged according to the settings in config.php . By taking note of the direct address to this category archive page we can rewrite this archive portal to take us directly there.
• Open archives.php and replace it with this code:

<?php
$URL=”http://www.ARCHIVEPAGE”;
header (“Location: $URL”);
?>

• After doing this, clicking on the Archives link should just direct you to the category archive that has been selected. If you want this page to be your index, you can direct WordPress to automatically load it under Settings–>Reading–>Static front page
• To remove dates from the posts, check out the date exclusion WordPress plugin
• To add a contact form, there does not seem to be too much of a better way to go than this PHP Contact Form WordPress plugin
• Of course you can edit the CSS to your heart’s content to alter the formatting. But this is a good quick and dirty to build a portfolio website.