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"> </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.
Follow me on Twitter
6:00 am
A quick tip for you
empty anchor elements are bad. The better thing to do is to use a div with an id that you link to – in your example a div with an id of SOCA would work exactly the same as an anchor with a name of SOCA.
And it’s less code :)
Otherwise it’s a nice idea. I like to use wordpress for things other than blogs too.
6:10 am
Hello !
I don’t understand three things :P
Where do we have to put this
<a href="/portfolio#" title="Read more about ">
<img src="/images/" />
and
and where do I have to put the thumbnail image ?
6:11 am
Excuse me for the last post, didn’t work fine..
I don’t understand where I have to put this :
<a href=”/portfolio#” title=”Read more about “>
<img src=”/images/” />
and this
and the thumbnail, in what directory ?
12:29 am
Good point – til I tested it just now, I didn’t realize spaces were allowed in the id attribute, example:
<div id=”Artful Lodger”>
But sure enough it works.
9:19 am
Another stunning entry!! Great great job.
6:35 am
Hi Darren,
Great post ! I am implementing the same kind of feature for one of my client. But I have a question: I want to divide my homepage into 2 parts. The 1st one is the last “leader” post. It belongs to the category “leader”. And below, I have the others post. But I would like to have the older “leader” posts too.
What i dit is to implement query post to show 1 post from cat=1 but for the rest of the page I would like to implement quesry post show all articles EXCEPT last article cat=1.
Do you know how I could to that ? You can contact me by email if you think it is not exactly the subject of that article… Sorry for flooding…
Thx
Francis
4:16 pm
This is my first post
just saying HI
1:42 pm
I loved your post. This is a very innovative idea for a portolio. I thought that your users might also benefit from my article on How to Create a Traditional Design Portolio – http://allgraphicdesign.com/graphicsblog/2007/10/01/how-to-create-a-traditional-graphic-design-portfolio-yes-with-an-actual-case/ – sort of the opposite of your post.
Thanks for the great post.
Rachel
2:53 am
Greatfully, the conseption of your portfolio will help me to create my own plugin. Thanks.
8:44 pm
Hey Darren
I don’t think it was mentioned, but what is controlling the thumbs from cat 4 to display in 2 rows of 2 instead of one row of 4?
10:34 pm
Each portfolio summary on the Cat4 homepage sits in a left-floating div, with the class of “sample”. Since they float against each other inside a larger div, they break down to the next line and begin to “tile”. It took a little experimentation to get the widths right.
8:46 pm
It can be a pain in the ass to get the widths just so for this to work. What you can do instead is run a PHP for loop and then when it gets to the last one on that row, you add the .last class to it.
In your CSS, you then add something along the lines of …
.last{ margin-right: 0; }
This way you can fill the entire width of the container, be pixel-perfect, and not have to take an afternoon to get the math correct (if you’re me ;p).
Hope that’s useful to someone.
1:05 pm
Nice tutorial.
One question – the place where I am specifying the thumbnail image name with extension(thumb_soca.png), how will the wordpress know where actually the file is lying on the server?
1:52 pm
The path is specified in the code, before the custom field is called:
3:57 am
This is very useful tips and I will for sure include in further maintenance of my on line portfolio.
Thank you for sharing :)
Srecko
10:54 am
I have bookmarked this site. Thanks Kfz Versicherung
3:44 am
first I congratulate for your site, I have enjoyed your site in a general look. I wish for continuance of your success
9:35 am
Very cool. It never ceases to amaze the many different uses for wordpress. Great post.
6:33 pm
Great article, just wondering how you are actually making the tables in wordpress?
Thanks,
Tom
3:55 pm
same tom’s question… this is a hard coding, maybe a sample of css code & the table will be more hulpful. thanks.
5:37 am
生活ç†è´¢ç½‘为您全方ä½æ供财ç»èµ„讯åŠå…¨çƒé‡‘èžå¸‚场行情，覆盖股票ã€åŸºé‡‘ã€æœŸè´§ã€è‚¡æŒ‡æœŸè´§ã€å¤–汇ã€å€ºåˆ¸ã€ä¿é™©ã€é“¶è¡Œã€é»„金ã€ç†è´¢ã€è‚¡å§ã€åšå®¢ç‰è´¢ç»ç»¼åˆä¿¡æ¯
6:54 pm
Thank you for sharing, very useful tips.
8:10 am
通过我们的图片和文å—è®©ä½ äº†è§£ã€è®¤è¯†å¹¶å–œæ¬¢ä¸€ä¸ªçœŸæ£çš„晋江。
11:13 am
Hi Darren, I have looked around your site (we use a theme based on yours) and I just wanted to say thanks for the good work and articles.
12:40 pm
2009年度淘宝最畅销减肥产品，销量排名