I received the following email from a developer yesterday.
As a newcomer to the web world and genesis included, I’m attempting to learn from others and looking at great designs that inspire me. This brings me to my question. Would you be willing to share your experience or even go as far as sharing your code for your custom designed portfolio page here?
After writing out my response, I figured others might be interested as well. Here’s the code, followed by a description of what each function does below.
First, the functions.php file:
be_portfolio_query()customizes the query on the portfolio pages. This must go in functions.php since it needs to run before main query, which happens before the template is determined. More information on customizing the query.
I specify the post type so the projects show up on the taxonomy archive pages AND so that the archive-projects.php file is used for the taxonomy archive pages. I could’ve also done this second part using the template_include filter.
be_portfolio_body_class()adds a consistent body class to all the pages using this template, for styling (if I didn’t use this, I’d have to write styles with body.post-type-archive-projects and body.tax-type )be_collect_testimonials(), I wanted to display a testimonial between certain projects, and wanted that testimonial to be from one of the projects featured on this page. So before the projects are listed, I loop through them all and pull out all the testimonials. I can then use this in a function lower down in the pagebe_sort_projects()adds the links before the project listing that lets you go from the main portfolio (all projects) to one of the taxonomy archivesbe_project_post_classes()– This looks at the loop counter and adds column classes to the posts, breaking it into multiple columns. See this tutorial for more information.be_outer_wrap()andbe_outer_wrap_close()add a wrapping div around all the posts and testimonials so they can be cleared with CSSbe_project_archive_content()is the content of each project. It has the image and then displays the taxonomy terms (Project Type) below itbe_project_divider()adds a dividing line after every 3 posts, except after the 6th one (where a testimonial is the divider)be_project_quote()adds a testimonial after the 6th project (it’s #5 since it starts counting at 0) OR after the last project if there are less than 6. I also have it choosing different testimonials for different taxonomies so the same testimonial isn’t used on every page


Wow, this is terrific! I’ve been putting off dealing with my own portfolio and clearly the procrastination was worth it. Thanks for posting this!
Thank you!!!
So there I am, just redone my portfolio, all snug and happy and then Bill comes with one of his great posts again
should I restart?
Thanks for taking the time to share, your are my top Genesis guru ! although when I look at your beard on the twitter avatar, you seem to work at looking like the first WordPress prophet…
Just noticed before posting this.. is the “Notify me of new posts by email” custom code as well ?
I think that’s coming from Jetpack. All I know is I didn’t code that
Very generous, thanks for taking the time, Bill!
Thanks so much Bill – I honestly didn’t expect this detailed of a response when I sent you that email. So generous of you
Now it’s time for me to work my way through the code and see what I come up with. Let the fun begin!
Thanks again Bill.
Interesting read! you have inspired me to build a portfolio page just like yours =)
Hello,
I cannot style the “active” taxonomy with CSS on my portfolio page. I have structured my CSS in the same way with the .sort-works li.(tax-slug).active a, but I cannot get the menu item to style differently when the current page is active.
Here are my functions:
https://gist.github.com/anonymous/5298060
css snippet:
.sort-works li.available-works.active a,
.sort-works li.available-works a:hover {
background: #000000;
}
I need to see a link to your site to be able to troubleshoot