Creating Custom Post Types – Portfolio

Custom Post Types

One of the features that I worked hard to incorporate into my new site were WordPress Custom Post Types. In the past, I had “tricked” WordPress into showing certain posts as portfolio entries using categories and other means. On my new site, my portfolio got its own custom post type. Likewise, the team members on the About page are also custom post types.

There are lots of tutorials online about implementing custom post types. Most of the tutorials I found did not cover some aspects I was hoping to incorporate into my new post types. I wanted to include some custom meta boxes, and make use of them and the other elements in non-traditional ways.  The best custom post type tutorial I found that came close was on ThinkVitamin.com.

The tutorial was perfect for what I was looking for! It implemented lots of the features I wanted to make use of. I re-purposed the meta boxes, and made them my own. Otherwise, my portfolio creation dashboard looks very similar to what is featured on Think Vitamin.

Custom Meta Boxes

One thing I wanted to do differently, was to have images of my beautiful websites and graphic creations on each portfolio entry. I needed a way to insert images systematically. I wanted  to have a defined thumbnail image, an enlarged image and title tags on each image. I came up with a workable solution for the time being. I just upload a thumbnail image, an enlarged image, and type in the title tag into the meta boxes. I have made room for up to 5 images per portfolio listing. I would like a way to do this more cleanly. Like an “add more” button, and be able to add as many or as few images as I would like. (In the works!) Beside that one issue, I am happy with my results.

Custom Meta Boxes

Porting to the Front End

The next dilemma was implementing all these neat features on the front end. I mean, now I have all this great content, I want to show it off! I wanted the text content to all be shown in the sidebar of the portfolio pages. I called each meta box in where I wanted, and used the main content in the sidebar as well. The main part of the screen just shows the portfolio images.  To call information from the meta boxes, I made use of the WordPress function get_post_custom();.

Like the portfolio custom post type from the Think Vitamin article, I used the custom taxonomy (aka… Custom Categories) to list the skills used to create each portfolio piece. I wanted to have this listed on my portfolio page. However, I did not want the list items link to a category page, which is default if you use echo get_the_term_list( $id, $taxonomy, $before, $sep, $after );.  I did use the function to get the listing of custom taxonomy. However, to output the list, I used echo strip_tags(); to strip away all the markup except for the “li” tags. I know this was a little anal, but when you have something in mind, you try to make it happen. Right?

I hope that gives a brief insight into how I made my new portfolio come to life. It was hard work, but fun all the same. Next time, I hope to cover how I made the team members come to life on the about page.

Stay Tuned!

As always, thanks for reading!

Bradley

Love it? Share it!

About Bradley

I live and breathe web design! You want a fantastic looking and great performing website. I just know it. Contact me about making that happen today!

What's Next?

Never miss a moment! Get all our fantastic posts delivered right to your inbox. Plus! Once a month receive our newsletter and occassional emails about great stuff you won't want to miss out on!

Subscribe now! You know you want to!

Worried? Your email address will be kept in a heavily guarded vault!

Bookmark

8 Responses to Creating Custom Post Types – Portfolio

  1. Trisha says:

    Bradley,

    If you wanted to echo that custom taxonomy (category) slug, so you could use it as a class (div class=””), would you have any idea how to do that?

    I built a custom portfolio with custom categories much like youve done here. Now Im trying to implement tabbed content…

    The custom categories are listed as a nav bar above the portfolio items. When you click on a category, it should only show the custom posts in that category. Jquery needs a class identifier for both the link, and the div its trying to either hide or show. I have almost ALL of the code working, except for one minor detail. I cant get wordpress to echo the category slug to use it as the class. I think im not understanding the custom loop query here.

    I hope this makes sense, and Honestly, I hate to bother you with this sort of thing, but it seems that you have a really good handle on this, plus im running out of people to ask!

    thanks so much!

    • Bradley says:

      Trisha –

      I think you have two options.

      1. Inside the loop:
      div class=”< ?php echo strip_tags( the_category() ); ?>”

      2. Outside the loop:
      < ?php $category = get_the_category(); ?>
      div class=”< ?php $category->cat_name ?>”

      Check these two pages in the WordPress Codex for more information:

      http://codex.wordpress.org/Function_Reference/get_the_category
      http://codex.wordpress.org/Function_Reference/the_category

      Good Luck.

      Bradley

      edit: Should have read your question more closely. The above will work with regular posts, but I don’t think it will work with custom post types. Take a look at get_the_term_list in the WordPress Codex. This is the function I used to get the “skills” list in my portfolio.

      Caveat: It will return a linked value. Make sure you strip_tags similar to Option #1 above.

      get_the_term_list in WordPress Codex: http://codex.wordpress.org/Function_Reference/get_the_term_list

      • Trisha says:

        Sorry i was so long winded, stress does bad things to a person… get_the_term_list ALMOST worked but I couldnt figure out how to change the name to a slug.

        I FINALLY found it here, but I changed a few things. this is the code that worked

        < li class="
        ID , ‘port_cats’);
        if($terms) {
        foreach( $terms as $term ) {
        $ts = get_term($term->term_id, ‘port_cats’);
        $n = $ts->slug;
        echo $n . ‘ ‘;
        }
        } ? >

        ” >

        • Trisha says:

          haha, well thats not the code. but if you do want the code, i can email it to you. Its pretty cool.

          its a portfolio page with a list of custom categories across the top, using jquery tabs to show each item in a category (and hide the others)

          now for pagination… ugh.

          thanks so much for your help!

  2. Hi Bradley, great post thank you.

    If portfolio is set up as a custom post then why is not included in the list item output of plugins like popular posts, random posts and similar posts?

    So is there a way to get portfolio custom posts to show up in plugins like these (i.e. shjow up alongsidenormal post types..?)

    Peace.

    • Bradley says:

      That is something you will probably have to take up with the plugin author. I think it has to do with the way the variables are passed when you have a custom post type set up.

Leave a Reply

Your email address will not be published. Required fields are marked *