Converting the page of posts to a portfolio viewer…

I was asked to come into a project very late in the game. We had 4 1/2 hours until we were to show off a prototype of the company’s new “portfolio” site. We were five days behind with minimal functionality accomplished. I was asked to save the day.

A little nervous, and completely in the dark still about what this WordPress theme we’d bought was all about, I agreed to give it my best shot. I’ve worked with WordPress plenty of times, I had a decent understanding of how the API sorta worked, and I know PHP like the back of my hand. Still, tearing into someone’s code often times translates into hours of just figuring out their style and where everything is laid out.

Firebug is something I hold dear to my heart. It’s a web developer’s best friend at times. Chrome has a similar tool built into it also that I like to use in conjunction with Firefox & Firebug. There are aspects of Chrome that I like, but then there are pieces of firebug I cannot live without. I hopeful that since Google now employs the guy who wrote Firebug, those features will find their way into Chrome.

I noticed that the Artboard Theme for WordPress was laid out just as we wanted it. It has a nice toolbar at the bottom, and when you click on the thumbnails, it shows the image in the middle area of the site. It was close to what we wanted, just not quite all there.

We were looking to put an image and text area with some icons next to each other. Naturally, I turned to the content portion of the post. The image itself comes from the featured image of the post. Now it was just a matter of wrapping some divs around each piece, putting them in a container, and adjusting the API calls in the template code.

One of the nicest pieces of the API is the ability to posts based on many options. We’re pulling 100 at a time based on category. Here’s a look at the PHP code.

$my_query2 = new WP_Query("cat=$cat_filter&meta_key=_thumbnail_id&posts_per_page=100");

After this, I had to grab the content. The theme itself was only using the image, and setting it as a background image. WordPress does a really nice job of putting everything into a nice array. After throwing a print_r() at the array, I had the information I needed to modify theme, and complete my task.

Normally you’ll see a Page of Posts in WordPress used as the blog portion of the web site. You’re looking at a Page of Posts when you come to this web site’s home page. Since it’s just content, you can really do anything you want with it. In this case, I wanted to make a bunch of hidden divs to cycle through.

So now that I had my content and images, it was time to build the div. Here’s a basic structure I used:

<div id="$post->post_title" class="my_post">
    <div id="bg_image">wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' )</div>
    <div id="post_content">$post->post_content</div>

I paired that with some CSS to hide all the .my_post class tagged divs. This gave me a set of “panels” hidden away, and now could control what gets shown when I click on the thumbnail.

With the major of jQuery, I was able to whip up some easy show and hide.



The idea was to hide them all every time I clicked on a thumbnail. After they were all hidden, I then showed the one I clicked on, as shown in the code above.

So now you have an idea of how you can use the Page of Posts and manipulate the content in a way that will suit what you need it to do. You don’t have to be confined a blog styled layout. You can take the post content and lay it out any way you want. You can make hidden divs like I did, and control them thru jQuery, or you can show them all inline. Play around with the API arguments, and see how far you can take your next project.

Dan Joseph is the CEO and head of Software Engineering of Familiaris Games.

Aside from my personal flash game projects, I am collaborating with Ben Davis on multiple future 
projects, and writing the story and script for an upcoming AAA level RPG, modelled after the same 
type of game play you see in Lost Odyssey, Final Fantasy, and other Japanese-based RPGs.  When 
I'm not developing games, I'm working as a Web Developer on various major brand web sites.

You can follow me on twitter @iamdanjoseph.  

If you wish to contact me, please click the contact page, 
and fill out the form.  I will get back to you as soon as I can.
Written by Dan
I am a Magento Certified Developer Plus and Software Developer. In my spare time I like reading, doing things with my Church, and hanging out with my wife and daughter. I am a Christian and like sharing things I am studying and reading.