Update On Building a Portfolio Site in Wordpress and the Plugins That Made It Work.

Feature image

Back in October 2009, I wrote about research I was doing about building a portfolio site with Wordpress. (Read that post here.) That post was inspired a project we were talking about doing at JMX2 at that time. Several months have passed and we’ve built the site I was initially researching. It’s live and I’m happy to finally share it with you. Check out the new TRÜF Creative site at http://trufcreative.com.

(Note to WordPress folks: This turned out to be a long post, but if you’re interested in what plug-ins used in building the site, I do go over those in a bit.)

The Front-end Design

The site was beautifully designed by Monika Kehrer, the design director at TRÜF. She did a stunning job, IMHO. (You’ll see some new design from her here at SuperGeekery in the future as well. I’m finally going to give this baby a design overhaul!) Monika built the site with a 960 pixel grid in mind using the design templates you can download at 960.gs. If you’re designing a site, you could learn a lot from how accurately she’s built her Photoshop documents. (I may share those with you later. Perhaps ones from the SuperGeekery redesign.)

Some of the things she had envisioned for the site didn’t seem possible using straight CSS though, so there’s some jquery helping out the design of the site. The obvious jquery pieces is the scrolling gallery on the home page. The less obvious jquery animation are the black rules that run off to the right hand side of the page. Their dimensions are recalculated whenever you resize the window in order to match Monika’s design. If you’re interested in how that happens, just go to the TRÜF front page and view source from your browser to check out the Javascript on the page.

The Backend Design with Wordpress

I’m very happy with the part of the site you don’t get to see as well, the admin panel. Primarily, the content of the site is a collection of portfolio pieces. This admin panel is customized specifically for the TRÜF site and the type of content needed for each portfolio piece.

Here’s how the “post” page turned out for TRÜF. (This is in reference to the screenshot below.)

1. An area to include as many graphics as needed for the main content area.

2. An area for writing about the piece.

3. Optional external link for each piece triggers a graphic on the portfolio piece’s page. If left blank, it doesn’t appear.

4. A drop down list to select a thumbnail image for each piece.

5. Optional radio buttons to have this piece included in the large rotating gallery images on the home page plus a drop down to select which image to use.

6. The ability to reorder pieces via drag and drop.

Sample of the admin panel

(Click this image to view it full size on Flickr.)

WordPress Plug-ins Used: More Fields

In building this site, I ended up using a variety of plug-ins to accomplish this type of customization. The ones I found most necessary were More Fields and postMash.

More Fields (http://wordpress.org/extend/plugins/more-fields/) simplifies adding all those extra fields you see in the admin panel above. In the screenshot below, you’ll see how I’ve set up the “Home page gallery options” section of the admin. It’s very handy. As I write this though, the More Fields homepage says it is not compatible with the latest version of WordPress, 2.9.1. Hopefully that gets updated soon.

More Fields set up screen.

I did make one change to the More Fields plug-in code though. The drop down file list would normally only populate with files that were uploaded with the posting of each post or attached to that post in another field. I wanted the file list to populate with all the media files in the media library. That required a change to the more-fields-write-js.php file. (This fix was discussed in the WordPress forums, but I can’t locate the URL anymore. Sorry about that!)

Here’s the original code:

if ($_GET['action'] == 'get_file_list') {
  $post_id = attribute_escape($_GET['post_id']);
  $attachments['data'] = get_children( array( 'post_parent' => $post_id, 'post_type' => 'attachment', 'orderby' => 'menu_order ASC, ID', 'order' => 'DESC') );

  $attachments['clicked'] = attribute_escape($_GET['clicked']);
  echo json_encode($attachments);
  exit();
 }

And here is how it was updated:

if ($_GET['action'] == 'get_file_list') {
  $post_id = attribute_escape($_GET['post_id']);
  $args = array('post_type' => 'attachment','numberposts' => -1,     'post_status' => null,     'post_parent' => null,     );
  $attachments['data'] = get_posts($args);
  $attachments['clicked'] = attribute_escape($_GET['clicked']);
  echo json_encode($attachments);
  exit();
 }

WordPress Plug-ins Used: postMash

The postMash plug-in (http://wordpress.org/extend/plugins/postmash/) was important for this site because unlike a blog, the most recently added entry doesn’t necessarily belong at the front of the line. The postMash plug-in provides a nice “drag-n-drop” interface for reordering posts.

I did make one change to the plug-in in the postMash.php file at line 153. I felt like having the word ‘postMash’ in the left hand column wasn’t descriptive enough, so I changed that menu item name. Here’s how the postMash_add_pages function looks in my update:

Here’s the original code:

function postMash_add_pages(){
 //add menu link
 global $minlevel, $wp_version;
 if($wp_version >= 2.7){
  $page = add_submenu_page('edit.php', 'postMash: Order Posts', 'postMash', $minlevel,  __FILE__, 'postMash_main'); 
 }else{
  $page = add_management_page('postMash: Order Posts', 'postMash', $minlevel, __FILE__, 'postMash_main');
 }
 add_action("admin_print_scripts-$page", 'postMash_head'); //add css styles and JS code to head
}

And here is how it was updated:

function postMash_add_pages(){
 //add menu link
 global $minlevel, $wp_version;
 if($wp_version >= 2.7){
  $page = add_submenu_page('edit.php', 'postMash: Order Posts', 'Reorder', $minlevel,  __FILE__, 'postMash_main'); 
 }else{
  $page = add_management_page('postMash: Order Posts', 'postMash', $minlevel, __FILE__, 'postMash_main');
 }
 add_action("admin_print_scripts-$page", 'postMash_head'); //add css styles and JS code to head
}

WordPress Plug-ins Used: The rest of them.

There are a number of other plug-ins that help this site along. None of the others have any customization to them though. Here’s a quick list.

1. All in One SEO Pack - (http://wordpress.org/extend/plugins/all-in-one-seo-pack/) Gets your site found more easily.

2. Custom Post Limits - (http://wordpress.org/extend/plugins/custom-post-limits/) I think I ended up not actually needing this, but it gives you control of how many posts automatically show up on different pages.

3. Google Analytics for WordPress - (http://wordpress.org/extend/plugins/google-analytics-for-wordpress/) Simplify the installation of Google Analytics into any WordPress site.

4. Google XML Sitemaps - (http://wordpress.org/extend/plugins/google-sitemap-generator/) Google likes for you to have a site map of the content of your site. It helps Google. You help Google and hopefully they help you back. This plug in help generate that site map XML document for you.

5. Search & Replace - (http://wordpress.org/extend/plugins/search-and-replace/) I used when moving the site from the development server to the live server. There were a lot of image paths pointing to the wrong location in the database and this plug-in helps you do your SQL search and replace very easily.

6. TinyMCE Advanced - (http://wordpress.org/extend/plugins/tinymce-advanced/) The default text styling controls didn’t include a horizontal rule tag and this plug in let me add it in.

7. Twitter for Wordpress - (http://wordpress.org/extend/plugins/twitter-for-wordpress/) There is a Twitter feed on the TRÜF site. This handy plug-in simplified setting it up.

8. WP-DBManager - (http://wordpress.org/extend/plugins/wp-dbmanager/) I use this mainly for backing up the database on a regular basis.

9. WP Super Cache - (http://wordpress.org/extend/plugins/wp-super-cache/) This helps speed up the site by caching pages. It’s a must have for every WordPress site.

This screenshot below shows you what version numbers I used at the time of the build.

Screenshot of plug-in page for TRÜF Wordpress admin

TRÜF was a really fun site to work on and I learned a lot about WordPress doing it. I’m currently working on an Expression Engine project, another CMS, and I do find it more powerful and I’ll continue using it for the SuperGeekery build, but WordPress is a very impressive CMS. I expect to use both in the future.

Comments on this post.

Thanks for the shout-out John! Cool post. It was a pleasure working with you, as always. We are so happy with our site and have gotten an amazing response so far! WordPress is so easy to use and surprisingly fast when uploading a good amount of content. I would recommend it for anyone creating a portfolio site.

By Monika Kehrer on Jan 24 2010

Well said Monika, I am a massive fan of Wordpress, ever since Wordcamp 2009 cardiff, where I was lucky enough to hear Matt Mullenweg talk about his vision for Wordpress including wordpress MU, it has become my base for any website not just the blogging part.

By taylor on May 25 2011

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?