Feedback Follow Me on Twitter!

Build A Dynamic Design Portfolio with Wordpress

Any content pulled from Wordpress qualifies as “dynamic” by definition, but there are varying degrees of how to break down and print that data. As seen in other articles, I’m a fan of exploiting Wordpress’s query_posts function for purposes other than blogging.

The Scenario

I recently needed a solution to power the Portfolio section of my company’s website. Ideally, we wished to have a custom database to handle data tables like these, but our programming team was indefinitely busy with client work. So since Wordpress was being used to publish the flat pages and the News section anyway, I decided to create a new post-category for portfolio items and use the query_posts function to call them.

Homepage Excerpts

Take a look at the “Recent Projects” section of the homepage. Each sample contains a thumbnail image, title and summary. Each is actually is a separate post under one category called “Portfolio”, and when clicked they take you to the corresponding details on the main Portfolio page. How do we get this all to work?

Creating the Post

Let’s start with the SOCA project. Begin a new post and a new category called “Portfolio”:

Make sure you have the WP visual editor turned off. Then paste in the necessary table data (what appears on the detail page), making sure to insert an anchor jump like this:

This will allow excerpts on the homepage to jump to the corresponding item on the main Portfolio page. Scroll down to the “Optional Excerpt” field and insert whatever text you want for the homepage:

Scroll down even further and we’ll create a custom field for the thumbnail image. Name your key “Thumbnail”, and for the value just type the image filename:

The Homepage Template Code

We will now need a piece of template code to query the “Portfolio” category for its last four entries, print the thumbnail, title and excerpt for each, and wrap the entire thing with a jump-anchor:

<?php query_posts('showposts=4&cat=46'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sample">
<a href="/portfolio#<?php the_title(); ?>" title="Read more about <?php the_title(); ?>">
<img src="/images/<?php $values = get_post_custom_values("Thumbnail"); echo $values[0]; ?>" />
<span><?php the_title(); ?></span><?php the_excerpt(); ?>
</a>
</div>
<?php endwhile; ?>

The Portfolio Template Code

If you’re already familiar with template tags, the code for this page be self-explanatory. I’ve also hardcoded in the little flower icon (”divider”) which appears between portfolio items:

<?php query_posts('showposts=10&cat=46'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<div class="divider">&nbsp;</div>
<?php endwhile; ?>

Excluding the Category

After all portfolio items are entered in the database, we’ll need to make sure they don’t show up in the “Latest News” section of the homepage. That’s as easy as creating a category called “News” and making sure to call only those items:

<?php query_posts('showposts=3&cat=44'); ?>

Using Wordpress to drive our portfolio is not a permanent solution, but it will make future updates much easier than they had been. It’s another example of how Wordpress can function as much more than a blog.

98 Responses {+}

Trackbacks

  1. links for 2007-08-26 | SOJo: Student of Online Journalism
  2. Rapidinhas 06-09-2007 | BrPoint
  3. Worldpress.it | Sharpfolio: il tuo portfolio wordpress| Temi, News e risorse wordpress
  4. Creating Custom Listings with Expression Engine, Part I | Darren Hoyt Dot Com
  5. WordPress Developer’s Toolbox | Developer's Toolbox | Smashing Magazine
  6. WP开发者资源-2.4: 把WordPress打造成CMS | 帕兰映像
  7. WordPress Developer’s Toolbox | rafdesign
  8. 瓶子的博客 » Blog Archive » 把WordPress打造成CMS
  9. NvD.esign magazine » The Big Wordpress Resources List
  10. Wordpress Araçları - İngilizce | indirazzi.com BETA
  11. [译稿]WordPress 开发者工具箱(上) | OPRO
  12. WordPress 开发者工具箱(上) | 木木的精品盒子
  13. WordPress 开发者工具箱 » 云计算
  14. 俺村嘞大杂院 » Blog Archive » [译稿]WordPress 开发者工具箱(上)
  15. WordPress Developer’s Toolbox - 山歌好比春江水
  16. [译稿]WordPress 开发者工具箱(上) | 蓝枫雨'Blog Bk00.Cn
  17. [译稿]WordPress 开发者工具箱(上) | IT News RSS
  18. WordPress 开发者工具箱1 | Ruijin Ubuntu Blog 生活中的每一点点滴滴......
  19. WordPress 开发者工具箱 | 易宝
  20. 互联网的那点事… » blog archive » [译稿]WordPress 开发者工具箱
  21. WordPress 开发者工具箱(1) | 窝棚-WPCMS
  22. android4us » Blog Archive » WordPress 开发者工具箱(上)
  23. WordPress 开发者工具箱
  24. WordPress 开发者工具箱 : Linuxer Home
  25. 疯言疯语 » Blog Archive » WordPress 开发者工具箱
  26. 逐浪·网络 » Blog Archive » WordPress 开发者工具箱
  27. - WordPress 开发者工具箱(上)【联讯网】
  28. WordPress Developer’s Toolbox | Fusuy.com || Webmaster Accessary Platform
  29. cssframework » WordPress 开发者工具箱【完整版】
  30. In the Woods - 20 Resources to Get You Started with WordPress from Scratch
  31. Creating a Design Portfolio in WordPress | SayShea: Indiana Kentucky Web Designer
  32. Top 50 Wordpress Tutorials - NETTUTS
  33. MyBlog - Top 50 Wordpress Tutorials
  34. 50???WordPress?? at ??????
  35. Top 50 Wordpress Tutorials
  36. ???? _kavid.net » Blog Archive » ??????WordPress?50?????
  37. Top 50 Wordpress Tutorials | Tech Underground
  38. Ula Kapa?a - portfolio » Blog Archive » How to make a portfolio with Wordpress
  39. 50???WordPress?? | ???
  40. 50???WordPress?? | forcto.com
  41. 135+ Ultimate Round-Up of Wordpress Tutorials | About Us | instantShift
  42. Ultimate Guide To Using WordPress For A Portfolio 於囧
  43. Wordpress Blog Services - Ultimate Guide To Using WordPress For A Portfolio
  44. Ultimate Guide To Using WordPress For A Portfolio
  45. 250 Wordpress Tutorials
  46. Ultimate Guide To Using WordPress For A Portfolio | jeremiahnellis.com/design_life
  47. Ultimate Guide To Using WordPress For A Portfolio | Designurimagination Blog - Let Your Imagination Fly
  48. Top 50 Wordpress Tutorials | Design-Tut+
  49. 135+ Ultimate Wordpress Tutorials
  50. WP开发者资源-2.4: 把WordPress打造成CMS | 帕兰映像
  51. Rolling in the Dynamic Portfolio | Cute Little Factory
  52. 50个最强WordPress教程 | 帕兰映像
  53. 36+ Resources To Craft The Perfect Portfolio | Hi, I'm Grace Smith
  54. How To Create A Dynamic Design Portfolio with Wordpress | Cute Little Factory
  55. 250 Wordpress Tutoriels et liens pour tous | Guppytrucs Freeware
  56. WordPress的50个最强教程 | 四叶草水晶天堂
  57. Top 50 Wordpress Tutorials « The Interweb of TJ
  58. 50 Wordpress Tutorials « Uttammitra’s Blog
  59. 鄞高博客 » Blog Archive » 50个最强WordPress教程
  60. 向前看 » 【收藏】——WordPress 开发资源列表
  61. bulldoggie studio » Top 50 Wordpress Tutorials
  62.   Ultimate Guide To Using WordPress For A Portfolio  by Oshoamy
  63.   WordPress Developer’s Toolbox  by Oshoamy
  64. Top 50 Wordpress Tutorials from TutPlus | WordPress News Magazine
  65. top 50 tutorials of wordpress(must use) | Umraz Ahmed | the official site
  66. Top 50 Wordpress Tutorials | NetExUrl | Web Development Tutorials & Design Resources
  67. Wordpress tutorials - Gurushala
  68. 50个最强WordPress教程 | Welcome to www.studydog.net
  69. 135 link cung cấp thủ thuật wordpress hot nhất | Giải Pháp SEO Internet Online Marketing-SEO consultants
  70. Build a Dynamic Design Portfolio
  71. 60+ Awesome WordPress Tutorials | The Best WP Themes Online
  72. 136 Massive Wordpress Tutorial Collection | WebCoreStudio
  73. Top Collection Of WordPress Tutorials On The Web | Nerdy Geeks Blogging Guide

Leave a Response